THAI.DEV / คู่มือสี

ลองสีให้เห็นภาพก่อนลงมือออกแบบ

Palette Visualizer ช่วยตอบคำถามง่าย ๆ: สีที่ชอบจะยังดูดีเมื่ออยู่บนโลโก้ หน้าเว็บ และแดชบอร์ดหรือเปล่า? เริ่มลองได้ฟรีด้วย 3 สี ไม่ต้องสมัครสมาชิก

เปิด Palette Visualizer →

ตัวอย่าง: สร้างภาพจำให้ร้านกาแฟ

สมมติคุณมีสีน้ำเงินเข้มเป็นสีแบรนด์ แต่ยังไม่รู้ว่าจะจับคู่กับสีอะไร ใส่ HEX ลงในแถบสีแรกแล้วล็อกไว้ กด Generate เพื่อดูสีรองหลายแนวทาง จากนั้นดู Website ว่าปุ่มอ่านง่ายไหม ดู Business card ว่าชื่อร้านเด่นพอหรือยัง และดู Logo variations เพื่อเทียบสีบนพื้นสว่างกับพื้นเข้ม

เริ่มต้นใน 3 ขั้น

1. คลิกแถบสีด้านล่างเพื่อแก้ HEX หรือเลือกสีจากตัวเลือกสี หากยังไม่มีสีในใจ ให้เลือก Random, Analogous, Complementary หรือโหมดอื่น แล้วกด Generate
2. เมื่อเจอสีที่ชอบ ให้กด Lock color ก่อนสุ่มใหม่ สีที่ล็อกจะอยู่เหมือนเดิม ปุ่ม Shapes เปลี่ยนลวดลายตัวอย่างโดยไม่เปลี่ยนสี
3. กรองตัวอย่างเป็น Mobile / Web UI, Branding หรือ Pattern แล้วกด Copy colors เพื่อคัดลอก HEX หรือ Export เป็น CSS, PNG, SVG

ทำไมเริ่มที่ 3 สี?

สามสีพอสำหรับลองบทบาทหลัก: สีตัวอักษร สีเน้น และสีพื้นหลัง โดยยังเห็นผลลัพธ์ชัดเจน คุณเพิ่มได้สูงสุด 8 สีและลดได้เหลือ 2 สี ชุดสีที่เคยบันทึกในเบราว์เซอร์จะยังเปิดด้วยจำนวนสีเดิม

บันทึกและใช้ต่อ

เครื่องมือบันทึกชุดสีล่าสุดไว้ในเบราว์เซอร์นี้เมื่อ localStorage พร้อมใช้งาน ข้อมูลไม่ซิงก์ข้ามเครื่อง ใช้ Export CSS เพื่อเก็บตัวแปรสีสำหรับเว็บ หรือส่งออก PNG/SVG เพื่อคุยงานกับทีม ภาพตัวอย่างเป็น mockup สำหรับทดลองสี ไม่ใช่ไฟล์เว็บไซต์ที่พร้อมใช้งานจริง

สีอ่านง่ายหรือยัง?

ตัวอย่างช่วยให้เปรียบเทียบบรรยากาศและลำดับสายตาได้เร็ว แต่ไม่ได้รับรองว่า contrast ของทุกข้อความผ่านเกณฑ์การเข้าถึง ก่อนเผยแพร่จริงควรตรวจสีตัวอักษรบนพื้นหลังทุกคู่ที่ใช้ในผลิตภัณฑ์

ไปต่อด้วยเฉดสีสำหรับโค้ด

เมื่อได้สีหลักแล้ว เปิด Tailwind Colors เพื่อสร้างเฉด 50–950 ทดลองปุ่มและโหมดมืด หรืออ่าน คู่มือ Tailwind Colors แบบทีละขั้น เครื่องมือทั้งสองใช้ได้ฟรี; ถ้าเป็นประโยชน์ ช่วยส่งต่อให้เพื่อนในชุมชน ThaiDev ได้ลองใช้