เครื่องมือค้นหาสีคู่ตรงข้าม

ตัวอย่าง

ค่า HEX, RGB และ HSL ที่แสดงอธิบายสี sRGB เดียวกัน คัดลอกผลลัพธ์เพื่อนำไปใช้ใน CSS หรือเครื่องมือออกแบบอื่น

สีคู่ตรงข้ามแบบ HSL เทียบกับแบบ RYB

• HSL (หน้าจอ): แดง ↔ ฟ้าน้ำทะเล, เขียว ↔ ม่วงแดง, น้ำเงิน ↔ เหลือง เป็นเรขาคณิตของมุม HSL ที่ได้จาก sRGB และใช้ใน CSS ไม่ใช่การจำลองการผสมแสง
• RYB (ศิลปิน): แดง ↔ เขียว, น้ำเงิน ↔ ส้ม, เหลือง ↔ ม่วง เป็นข้อตกลงในการสอนแบบดั้งเดิม ไม่ใช่การทำนายการผสมเม็ดสีชนิดใดชนิดหนึ่ง

เครื่องมือนี้ใช้โมเดล HSL ดิจิทัลเท่านั้น และไม่แปลงเป็นวงล้อสีแบบ RYB เพราะสีคู่ตรงข้ามของเม็ดสีขึ้นอยู่กับวัสดุและวิธีผสม

สีคู่ตรงข้ามใช้งานได้ดีตรงไหน

• ปุ่ม CTA บนพื้นหลังของแบรนด์ จับคู่สีหลักกับสีคู่ตรงข้ามเพื่อให้ปุ่มโดดเด่น
• การแสดงผลข้อมูล แผนภูมิแบบสองชุดข้อมูล (กำไรเทียบขาดทุน ก่อนเทียบหลัง)
• เงาในงานวาดภาพประกอบ: เงาของฟักทองสีส้มดูสมจริงกว่าเมื่อเป็นสีน้ำเงินมากกว่าสีส้มที่เข้มขึ้น
• การสร้างแบรนด์กีฬา: หลายทีมใช้จานสีแบบคู่ตรงข้ามหรือ split-complement (น้ำเงิน/ส้ม, แดง/เขียว, เหลือง/ม่วง)

สีคู่ตรงข้ามใช้งานไม่ดีตรงไหน

• ข้อความเนื้อหาบนพื้นหลัง: สีคู่ตรงข้ามโดยตรง (แดงบนเขียว น้ำเงินบนส้ม) อ่านยาก ความคลาดสีที่สูงทำให้สายตาล้า
• ใช้เต็มพื้นที่: หน้าจอที่เป็นสีแดง 50% และสีเขียว 50% ทำให้รู้สึกเหนื่อยล้า ใช้สีคู่ตรงข้ามสำหรับการเน้น (5-10% ของพื้นที่) ไม่ใช่เป็นสีหลัก
• ความสอดคล้องของแบรนด์: สีคู่ตรงข้ามให้ความรู้สึกวุ่นวาย แบรนด์สมัยใหม่ส่วนใหญ่ใช้โทนสีเดียวหรือสีข้างเคียง + สีเน้นหนึ่งสี ไม่ใช่สีคู่ตรงข้ามทั้งคู่

Split-complement

Split-complement (สีฐาน + 150° + 210°) มักเป็นทางเลือกที่ใช้งานได้จริงกว่า:

• คงความเปรียบต่างสูงกับโซนของสีคู่ตรงข้ามไว้
• หลีกเลี่ยงการสั่นไหวของสีคู่ตรงข้ามโดยตรง
• ให้สีเน้นสองสีสำหรับการออกแบบแบบเป็นชั้น

ตัวอย่าง: สีฐาน = น้ำเงิน → สีคู่ตรงข้าม = ส้ม (จัดจ้าน) → split-complement = ส้มอมแดง + ส้มอมเหลือง (เข้มข้นกว่า)

การลดความอิ่มตัวของสีคู่ตรงข้าม

สีคู่ตรงข้ามล้วน ๆ มักดูไม่ดีที่ความอิ่มตัวเต็มที่ ลดความอิ่มตัวลง 20-40% ที่สีใดสีหนึ่งหรือทั้งสองสีเพื่อให้ได้จานสีที่นุ่มนวลขึ้น:

• แดง (S=100%) + ฟ้าน้ำทะเล (S=100%) = สั่นไหว
• แดง (S=60%) + ฟ้าน้ำทะเล (S=60%) = จานสีโปสเตอร์คลาสสิก
• แดงอิฐแบรนด์ (S=45%) + เขียวน้ำทะเลหม่น (S=30%) = ทันสมัย ใช้งานได้

ตรวจสอบความสมเหตุสมผลก่อนใช้งาน

• อัตราส่วนความเปรียบต่างของคู่สี: เครื่องมือจะรายงานค่านี้ ต่ำกว่า 4.5:1 จะไม่ผ่านมาตรฐาน AA สำหรับข้อความ
• ทดสอบบนพื้นหลังสีกลาง: สีคู่ตรงข้ามดูแตกต่างกันบนพื้นหลังสีขาว สีเทา และสีดำ
• ทดสอบงานพิมพ์ หากปลายทางคืองานพิมพ์ ระบบ CMYK อาจเปลี่ยนความอิ่มตัวและความสัมพันธ์ของสีคู่ตรงข้ามไปจาก RGB