เครื่องกำเนิดจานสี

เลือกรูปแบบให้เหมาะ

โครงสร้างพาเลตสำหรับงานจริง

พาเลตที่สร้างได้คือจุดเริ่มต้น ไม่ใช่ design system ที่สมบูรณ์ สำหรับ UI ที่ใช้งานจริง ควรตั้งชื่อสีตามบทบาท ไม่ใช่ตามหน้าตา เช่น primary, secondary, accent, surface, border, text, success, warning และ error เพิ่มสีเทากลางแยกต่างหาก เพราะสีกลางมักต้องควบคุมละเอียดกว่าตัวสร้างที่อิง hue อย่างเดียว

ใช้สี HEX ที่สร้างได้ใน prototype ก่อน แล้วค่อยเก็บเฉพาะสีที่ทำงานดีบนหน้าจอจริง พื้นหลังสว่างและมืด รวมถึงสถานะ hover หรือ disabled

ส่งออกเป็นตัวแปร CSS

ขั้นตอนส่งออกใช้คุณสมบัติแบบกำหนดเองที่เรียบง่าย:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

เปลี่ยนชื่อตัวแปรเหล่านี้ให้ตรงกับระบบของคุณเมื่อวางลงใน CSS, token ของธีม Tailwind หรือไฟล์ design tokens

HEX, RGB และ HSL

อินพุตและผลลัพธ์ที่มองเห็นใช้ HEX เพราะเป็นรูปแบบที่คัดลอกไปมาระหว่าง CSS เครื่องมือออกแบบ และคอมเมนต์งานได้เร็วที่สุด ภายในเครื่องมือจะเปลี่ยนสีหลักเป็น HSL เลื่อน hue หรือ lightness แล้วแปลงผลลัพธ์กลับเป็น HEX หากต้องการ RGB หรือ HSL ให้แปลงค่า HEX ที่สร้างได้ด้วยตัวแปลงรหัสสี

คอนทราสต์และการเข้าถึง

รูปแบบความกลมกลืนไม่ได้รับประกันการเข้าถึง ก่อนใช้คู่สีสำหรับข้อความ ปุ่มควบคุม หรือกราฟ ควรตรวจด้วยเครื่องมือตรวจคอนทราสต์:

• ข้อความปกติบนพื้นหลัง: ขั้นต่ำ 4.5:1 สำหรับ WCAG AA
• ข้อความขนาดใหญ่: ขั้นต่ำ 3:1
• ส่วน UI ที่ไม่ใช่ข้อความแต่สำคัญ เช่น ขอบปุ่ม ไอคอน วง focus และขอบกราฟ: ขั้นต่ำ 3:1 เมื่อเทียบกับสีที่อยู่ติดกัน

อย่าพึ่ง hue อย่างเดียว สีสองสีอาจดูต่างกันใน swatch แต่ยังไม่ผ่านเมื่อใช้กับข้อความเล็ก ไอคอนเส้นบาง หรือป้ายสถานะ

เคล็ดลับ

• เริ่มจากสีหลักที่มีความหมาย เช่น สีแบรนด์ สีสินค้า หรือสีแคมเปญที่มีอยู่แล้ว
• เลือกสีเด่นหนึ่งสี แล้วใช้สีอื่นเป็นตัวสนับสนุน การให้น้ำหนักเท่ากันทุกสีมักทำให้หน้าจอดูยุ่ง
• ลด saturation บนพื้นที่ใหญ่ เช่น พื้นหลังแอป แผง และส่วน hero
• ทดสอบอีกครั้งหลังใช้ธีมจริง พาเลตที่ใช้ได้บนพื้นหลังขาวอาจไม่ผ่านใน dark mode หรือกราฟที่มีข้อมูลแน่น