การจับคู่สีตามทฤษฎีสี: สีคู่ตรงข้าม สีข้างเคียง สีสามเส้า และอื่น ๆ
การจับคู่สี (color harmony) คือการเลือกฮิวที่มุมคงที่บนวงล้อสี: ห่างกัน 180° สำหรับสีคู่ตรงข้าม ห่างกัน 30° สำหรับสีข้างเคียง ห่างกัน 120° สำหรับสีสามเส้า ถ้าหมุนฮิวใน OKLCH แทน HSL ทุกสีจะสว่างเท่ากัน จึงไม่มีสีไหนเด่นขึ้นมาโดยไม่ตั้งใจ
อ่าน 2 นาที
การจับคู่สีคืออะไร
การจับคู่สีคือกฎสำหรับเลือกสีที่เข้ากัน เริ่มจากสีหลักหนึ่งสี คงความสว่างและความสดของสีไว้ แล้วหมุนเฉพาะฮิว (hue หรือมุมของสี) ตามมุมที่กำหนดบนวงล้อสี
มุมเป็นส่วนที่ง่าย ส่วนที่สำคัญไม่แพ้กันคือคุณหมุนบนวงล้อไหน เพราะวงล้อ HSL แบบดั้งเดิมกับวงล้อที่อิงการรับรู้ของตาอย่าง OKLCH ให้ผลต่างกันอย่างเห็นได้ชัดแม้ใช้มุมเดียวกัน ตัวอย่างทั้งหมดด้านล่างเริ่มจาก #2a7fbf ซึ่งเป็นสีฟ้าโทนกลาง
| รูปแบบ | ค่า |
|---|---|
| HEX | |
| HSL | |
| OKLCH |
สีคู่ตรงข้าม คู่ตรงข้ามแยก ข้างเคียง สามเส้า สี่เหลี่ยมผืนผ้า และสี่เหลี่ยมจัตุรัส
ทุกแถวคงความสว่าง OKLCH ของสีหลักไว้ที่ 0.577 และความสด (chroma) ไว้ที่ 0.127 มีแค่ฮิวที่หมุนตามมุมในตาราง เมื่อสีที่หมุนแล้วหลุดออกนอก sRGB ระบบจะลดความสดลงเล็กน้อยให้พอดี สีบางตัวจึงสดน้อยกว่าเล็กน้อย ยกเว้นแบบโทนสีเดียว ซึ่งคงฮิวไว้และขยับความสว่างทีละ 0.12
| การจับคู่สี | มุมของฮิว | สีที่ 2 | สีที่ 3 | สีที่ 4 | สีที่ 5 |
|---|---|---|---|---|---|
| สีคู่ตรงข้าม | 0°, 180° | #ab6708 | |||
| สีคู่ตรงข้ามแยก | 0°, 150°, 210° | #b85a42 | #907800 | ||
| สีข้างเคียง | 0°, −30°, +30° | #008aa7 | #6571c3 | ||
| สีสามเส้า | 0°, 120°, 240° | #b6566e | #678626 | ||
| สี่เหลี่ยมผืนผ้า | 0°, 60°, 180°, 240° | #8c64b4 | #ab6708 | #678626 | |
| สี่เหลี่ยมจัตุรัส | 0°, 90°, 180°, 270° | #a75a96 | #ab6708 | #258f58 | |
| โทนสีเดียว | ฮิวเดิม, L ±0.12, ±0.24 | #00396f | #005b98 | #53a4e7 | #7dcbff |
- สีคู่ตรงข้าม: ตัดกันแรงที่สุด ใช้สีที่สองเป็นจุดเน้นเล็ก ๆ เท่านั้น เช่น ปุ่ม Call to Action
- สีคู่ตรงข้ามแยก: พลังเท่ากับสีคู่ตรงข้ามแต่คุมสมดุลง่ายกว่า เพราะจุดเน้นแยกเป็นสองสีที่อยู่ข้าง ๆ ฮิวฝั่งตรงข้าม
- สีข้างเคียง: สงบและกลมกลืน เหมาะกับภาพประกอบและพื้นหลัง แต่ไม่ดีเมื่อต้องการให้องค์ประกอบใดเด่นออกมา
- สีสามเส้า สี่เหลี่ยมผืนผ้า และสี่เหลี่ยมจัตุรัส: มีชีวิตชีวาแต่ควบคุมยาก ให้สีหนึ่งเป็นตัวนำและใช้สีอื่นในพื้นที่เล็ก ๆ
- โทนสีเดียว: ฮิวเดียวในหลายระดับความสว่าง เป็นตัวเลือกที่ปลอดภัยที่สุดสำหรับอินเทอร์เฟซ เพราะคอนทราสต์มาจากความสว่างอยู่แล้ว
ทำไมวงล้อสี HSL ถึงให้การจับคู่สีที่ไม่สมดุล
วงล้อสีในเครื่องมือออกแบบส่วนใหญ่เป็น HSL: หมุนฮิวแล้วคงค่าความอิ่มตัวและความสว่างของ HSL ไว้ แต่ความสว่างของ HSL เป็นแค่สูตรคำนวณ ไม่ใช่สิ่งที่ตาเห็น ลองหมุนสีเหลืองทองไป 180° ใน HSL คุณจะได้สีน้ำเงินเข้มที่ดูมืดกว่าสีเหลืองมาก
การหมุนใน OKLCH ทำให้ความสว่างที่ตารับรู้เท่ากัน นี่คือ #f4b400 ที่หมุนทั้งสองแบบ พร้อมความสว่าง OKLCH ของทุกผลลัพธ์
| บทบาท | หมุนใน HSL | OKLCH L | หมุนใน OKLCH | OKLCH L |
|---|---|---|---|---|
| สีหลัก | #f4b400 | 0.808 | #f4b400 | 0.808 |
| สีคู่ตรงข้าม | #0040f4 | 0.489 | #97c0ff | 0.802 |
| สีสามเส้า, +120° | #00f4b4 | 0.857 | #00dcec | 0.817 |
| สีสามเส้า, +240° | #b400f4 | 0.586 | #f299fe | 0.808 |
ชุดสี HSL มีความสว่างตั้งแต่ 0.489 ถึง 0.857 สีน้ำเงินและสีม่วงจึงจมลง ขณะที่สีเขียวมิ้นต์สว่างจ้า ส่วนชุด OKLCH อยู่ระหว่าง 0.802 ถึง 0.817 เรื่องเดียวกันเกิดกับแม่สี RGB แท้ ๆ ด้วย: #ff0000, #00ff00 และ #0000ff เป็นสีสามเส้าที่สมบูรณ์แบบใน HSL แต่ความสว่าง OKLCH ของมันคือ 0.628, 0.866 และ 0.452
แต่ก็มีสิ่งที่ต้องแลก สีน้ำเงินที่สว่างเท่าสีเหลืองนี้จะสดมากไม่ได้บนจอ sRGB สีคู่ตรงข้ามแบบ OKLCH อย่าง #97c0ff จึงมีความสด 0.10 แทนที่จะเป็น 0.166 คุณต้องเลือกระหว่างความสว่างเท่ากันกับความสดเท่ากัน สำหรับสีเหลืองกับสีน้ำเงินจะได้ทั้งสองอย่างพร้อมกันไม่ได้
วงล้อสี RYB ของศิลปิน กับวงล้อสี RGB ของหน้าจอ
วงล้อสีที่เรียนในวิชาศิลปะคือ RYB: มีแดง เหลือง น้ำเงินเป็นแม่สี เหมือนการผสมสีน้ำหรือสีโปสเตอร์ บนวงล้อนี้ สีคู่ตรงข้ามของแดงคือเขียว และของน้ำเงินคือส้ม แต่หน้าจอผสมแสง เครื่องมือดิจิทัลจึงใช้วงล้อ RGB ซึ่งสีคู่ตรงข้ามของแดงคือฟ้าไซแอน และของน้ำเงินคือเหลือง
ไม่มีแบบไหนผิด แต่ละแบบตอบคำถามต่างกัน RYB อิงธรรมเนียมการวาดภาพ ส่วน RGB และ OKLCH อิงการทำงานของหน้าจอและดวงตา ถ้าเครื่องมือออกแบบให้สีฟ้าไซแอนในตอนที่คุณคาดว่าจะได้สีเขียว แปลว่ามันใช้วงล้อ RGB
| สีหลัก | คู่ตรงข้ามแบบ RYB | คู่ตรงข้ามแบบ RGB (HSL) | คู่ตรงข้ามแบบ OKLCH |
|---|---|---|---|
| #ff0000 | เขียว | #00ffff | #009cb2 |
| #0000ff | ส้ม | #ffff00 | #734f00 |
| #ffff00 | ม่วง | #0000ff | #f3f1ff |
คอลัมน์ OKLCH แสดงให้เห็นว่าความสว่างที่เท่ากันส่งผลอย่างไรกับสีสุดขั้ว สีคู่ตรงข้ามของน้ำเงินแท้กลายเป็นสีเหลืองดินเข้มที่มีความสว่างเท่ากันคือ 0.45 และสีคู่ตรงข้ามของเหลืองแท้กลายเป็นสีลาเวนเดอร์เกือบขาวที่ 0.96
ใช้กฎ 60-30-10 กับชุดสีที่จับคู่แล้ว
การจับคู่สีบอกว่าควรใช้สีอะไร แต่ไม่ได้บอกว่าแต่ละสีควรใช้มากแค่ไหน กฎ 60-30-10 เติมช่องว่างนี้: พื้นที่ราว 60% เป็นสีหลักที่ครองพื้นที่ 30% เป็นสีรอง และ 10% เป็นสีเน้น ถ้าแบ่งเท่า ๆ กัน แม้ชุดสีที่ดีก็ดูรกได้
ในอินเทอร์เฟซ ส่วน 60% มักเป็นสีเกือบกลางที่แต้มฮิวของสีหลักไว้เล็กน้อย 30% คือสีหลัก และ 10% คือสีเน้นแบบคู่ตรงข้าม นี่คือชุดสีพร้อมคัดลอกที่สร้างจาก #2a7fbf
| บทบาท | สัดส่วน | สี | OKLCH | ใช้กับ |
|---|---|---|---|---|
| สีหลักของพื้นที่ | 60% | #eff6fd | L 0.97, C 0.012 | พื้นหลังหน้าเว็บ การ์ด |
| สีรอง | 30% | #2a7fbf | L 0.577, C 0.127 | ส่วนหัว ลิงก์ สถานะที่ถูกเลือก |
| สีเน้น | 10% | #ab6708 | L 0.577, C 0.127 | Call to Action หลัก ไฮไลต์ |
| ข้อความ | n/a | #15232f | L 0.25, C 0.03 | ข้อความเนื้อหาบนสีหลักของพื้นที่ |
CSS
:root {
--surface: #eff6fd;
--primary: #2a7fbf;
--accent: #ab6708;
--text: #15232f;
}วิธีตรวจคอนทราสต์ของชุดสีที่จับคู่
ฮิวที่ต่างกันไม่ได้ทำให้อ่านข้อความออก ความสว่างที่ต่างกันต่างหากที่ทำได้ คู่สีตรงข้ามด้านบนมีฮิวห่างกันมากที่สุดเท่าที่เป็นไปได้ แต่ #2a7fbf บน #ab6708 มีอัตราส่วน WCAG แค่ 1.05:1 และ APCA Lc เป็น 0 แทบมองไม่เห็นเมื่อเป็นข้อความ
ความสว่างที่เท่ากันก็มีข้อดี ข้อความสีขาวบนทุกสีของชุด OKLCH ด้านบนได้ค่าระหว่าง 4.04:1 ถึง 4.62:1 ส่วนชุดเดียวกันแบบ HSL แกว่งตั้งแต่ 2.15:1 ถึง 8.90:1 จึงแก้ครั้งเดียวได้ทั้งชุด OKLCH: ลดความสว่างลงเหลือ 0.52 แล้วข้อความสีขาวจะผ่าน 4.5:1 บนทุกฮิวที่ความสด 0.127 โดยได้ตั้งแต่ 5.00:1 ถึง 5.91:1
| ข้อความ | พื้นหลัง | อัตราส่วน WCAG | APCA Lc | ผลลัพธ์ |
|---|---|---|---|---|
| #2a7fbf | #ab6708 | 1.05:1 | 0 | อ่านไม่ออก ความสว่างเท่ากัน |
| #ffffff | #2a7fbf | 4.30:1 | -74.8 | ไม่ผ่าน AA สำหรับข้อความเนื้อหา |
| #ffffff | #106ead | 5.45:1 | -82.0 | ผ่าน สีหลักที่ L 0.52 |
| #ffffff | #995600 | 5.70:1 | -83.3 | ผ่าน สีเน้นที่ L 0.52 |
| #ab6708 | #eff6fd | 4.12:1 | 64.9 | เฉพาะข้อความใหญ่และไอคอน |
| #5c2d00 | #d8eafb | 9.42:1 | 82.5 | คู่สีตรงข้ามที่แยกเป็นสีเข้มกับสีอ่อน |
ถ้าจะใช้สองสีจากชุดที่จับคู่เป็นข้อความกับพื้นหลัง ให้แยกความสว่างให้ห่างกัน: คงฮิวไว้ แล้วดันสีหนึ่งไปทาง 0.35 อีกสีไปทาง 0.93 จากนั้นตรวจคู่สีจริงด้วยเครื่องมือตรวจคอนทราสต์ และถ้าสีเน้นมีความหมายสำคัญ ให้ลองชุดสีกับเครื่องจำลองภาวะตาบอดสีด้วย
คำถามที่พบบ่อย
การจับคู่สีหลัก ๆ มีกี่แบบ
แบบที่ใช้บ่อยคือ สีคู่ตรงข้าม (ฮิวห่างกัน 180°) สีคู่ตรงข้ามแยก (150° และ 210°) สีข้างเคียง (ข้างละ 30°) สีสามเส้า (สามฮิวห่างกัน 120°) สี่เหลี่ยมผืนผ้า (0°, 60°, 180°, 240°) สี่เหลี่ยมจัตุรัส (สี่ฮิวห่างกัน 90°) และโทนสีเดียว (ฮิวเดียวในหลายระดับความสว่าง)
สีคู่ตรงข้ามของสีแดงคือสีอะไร
ขึ้นอยู่กับวงล้อสี บนวงล้อ RYB ของจิตรกร สีคู่ตรงข้ามของแดงคือเขียว บนวงล้อ RGB ที่หน้าจอและเครื่องมือออกแบบใช้ จะเป็นสีฟ้าไซแอน คือ #00ffff สำหรับสีแดงแท้ และใน OKLCH ที่ความสว่างเท่ากัน จะเป็นสีเขียวอมฟ้าอย่าง #009cb2
ทำไมสีคู่ตรงข้ามของฉันดูไม่สมดุล
เครื่องมือส่วนใหญ่หมุนฮิวใน HSL ซึ่งความสว่างไม่ตรงกับการรับรู้ของตา สีคู่ตรงข้ามแบบ HSL ของสีเหลืองทองอย่าง #f4b400 คือ #0040f4 ที่มีความสว่าง OKLCH 0.489 เทียบกับ 0.808 ของสีเหลือง การหมุนฮิวใน OKLCH ทำให้ทั้งสองสีสว่างเท่ากัน
ใช้สีคู่ตรงข้ามเป็นข้อความกับพื้นหลังได้ไหม
ได้เฉพาะเมื่อความสว่างต่างกันมาก สีคู่ตรงข้ามที่สว่างเท่ากันอย่าง #2a7fbf กับ #ab6708 มีอัตราส่วนคอนทราสต์แค่ 1.05:1 ให้ทำสีหนึ่งเข้มอีกสีอ่อน เช่น #5c2d00 บน #d8eafb ได้ 9.42:1
กฎสี 60-30-10 คืออะไร
กฎ 60-30-10 แบ่งงานออกแบบเป็นสีหลักที่ครองพื้นที่ราว 60% สีรอง 30% และสีเน้น 10% เมื่อใช้กับการจับคู่สี สีหลักของพื้นที่มักเป็นสีกลางที่แต้มฮิวไว้ สีรองคือสีหลัก และสีเน้นคือสีคู่ตรงข้ามหรือสีสามเส้า