วิธีใช้งาน
- ป้อนสีพื้นฐานหรือเลือกสี “สุ่มสีพื้นฐานใหม่” จะเลือกสีให้คุณ
- เลือกชุดสีที่เข้ากัน “เฉดสีอ่อนและเข้ม” จะสร้างระดับสี 11 ระดับ ตั้งแต่สีอ่อนมากไปจนถึงสีเข้มมาก
- ล็อกสีที่ต้องการเก็บไว้ แล้วลองใช้สีพื้นฐานอื่นต่อได้
- เลือก HEX, คุณสมบัติ CSS แบบกำหนดเอง หรือ JSON ตั้งชื่อ แล้วคัดลอกโค้ด
วิธีการทำงาน
การหาชุดสีที่เข้ากันทำได้โดยหมุนค่าสีรอบวงล้อสี: สีคู่ตรงข้ามเพิ่มสีที่อยู่ตรงข้ามกัน (180°), สีใกล้เคียงเพิ่มสีข้างเคียงที่ห่างออกไปด้านละ 30° และ 60°, สีสามสีใช้สี 3 สีที่ห่างกัน 120°, สีสี่สีใช้สี 4 สีที่ห่างกัน 90° และสีคู่ตรงข้ามแบบแยกใช้สี 2 สีที่อยู่ข้างสีคู่ตรงข้าม (150° และ 210°)
การหมุนนี้ทำใน OKLCH ไม่ใช่ HSL โดย OKLCH ช่วยรักษาความสว่างที่รับรู้ให้คงที่ ทำให้สีเหลืองและสีน้ำเงินในชุดสีเดียวกันดูสว่างใกล้เคียงกัน แทนที่สีเหลืองจะสว่างจ้ากว่า หากสีที่หมุนแล้วอยู่นอกช่วงที่หน้าจอ sRGB แสดงได้ ระบบจะลดค่า chroma จนสีอยู่ในช่วง โดยรักษาความสว่างและค่าสีไว้
ระดับเฉดสีอ่อนและเข้มใช้ค่าความสว่าง OKLCH แบบคงที่ 11 ระดับ ตั้งชื่อเป็น 50 ถึง 950 คล้ายรูปแบบการตั้งชื่อของ Tailwind CSS โดยลดค่า chroma ใกล้สีขาวและสีดำ เพื่อไม่ให้เฉดสีอ่อนที่สุดดูนีออน ชุดสีที่เข้ากันเป็นเพียงจุดเริ่มต้น ก่อนนำไปใช้กับเนื้อหา ให้ตรวจสอบคู่สีข้อความและพื้นหลังด้วยเครื่องมือตรวจสอบคอนทราสต์
ตัวอย่าง
สีแบรนด์พร้อมสีเน้น
ใช้สีพื้นฐาน #3366cc กับ “สีคู่ตรงข้าม” จะเพิ่ม #8c6500 ซึ่งเป็นสีเหลืองน้ำตาลอบอุ่นที่มีความสว่าง OKLCH เท่ากัน การจับคู่สีน้ำเงินกับสีส้มอมเหลืองเป็นตัวเลือกที่นิยมใช้เป็นสีเน้นคู่กับแบรนด์สีน้ำเงิน
โทเค็นการออกแบบสำหรับไลบรารีคอมโพเนนต์
เลือก “เฉดสีอ่อนและเข้ม” ตั้งชื่อเป็น “primary” แล้วส่งออกตัวแปร CSS คุณจะได้ --primary-50 ถึง --primary-950 พร้อมใช้กับพื้นหลัง (50–100), เส้นขอบ (200–300) และข้อความ (700–900)
คงสีหนึ่งไว้ขณะลองสีอื่น
ล็อกสีที่สองในชุดสีสามสี แล้วลองเปลี่ยนสีพื้นฐาน สีที่ล็อกไว้จะคงค่า HEX เดิม ส่วนสีอื่นจะเปลี่ยนไป
คำถามที่พบบ่อย
ทำไมสีของฉันจึงต่างจากสีในเครื่องมือวงล้อสี HSL?
เครื่องมือนี้หมุนค่าสีใน OKLCH ซึ่งเป็นปริภูมิสีที่อิงการรับรู้ มุมสีของ OKLCH ไม่ตรงกับ HSL ทุกประการ ดังนั้นสีที่ “อยู่ตรงข้าม” กันอาจมีเฉดต่างจากที่เครื่องมือวงล้อสี HSL แสดงเล็กน้อย
ใช้ JSON กับ Tailwind CSS ได้ไหม?
JSON จะจับคู่ชื่อกับค่า HEX ในรูปแบบเดียวกับที่ Tailwind ใช้กำหนดสีในการตั้งค่าธีม ใน Tailwind 4 คุณยังวางตัวแปร CSS ลงในบล็อก @theme ได้ด้วย หลังเปลี่ยนชื่อเป็น --color-…
ชุดสีที่สร้างขึ้นรองรับการเข้าถึงหรือไม่?
ไม่ใช่โดยอัตโนมัติ การจัดชุดสีที่เข้ากันไม่ได้บอกอะไรเกี่ยวกับคอนทราสต์ระหว่างข้อความกับพื้นหลัง ตรวจสอบคู่สีแต่ละคู่ที่ต้องการใช้ด้วยเครื่องมือตรวจสอบคอนทราสต์
ความเป็นส่วนตัว
สร้างชุดสีในเบราว์เซอร์ สีของคุณจะไม่ถูกส่งไปที่ใดหรือจัดเก็บไว้