สีคู่ตรงข้าม และวิธีจับคู่สีให้เข้ากัน

สีคู่ตรงข้ามในวงจรสี 12 สี มีคู่อะไรบ้าง

วงจรสี 12 สีมีสีคู่ตรงข้าม 6 คู่ สามคู่หลักคือ แดง–เขียว เหลือง–ม่วง และน้ำเงิน–ส้ม อีกสามคู่เป็นสีขั้นที่ 3 คือ ส้มแดง–เขียวน้ำเงิน ส้มเหลือง–ม่วงน้ำเงิน และม่วงแดง–เขียวเหลือง วิธีจำสามคู่หลักแบบง่ายๆ: แม่สีแต่ละตัวจะคู่กับสีขั้นที่ 2 ที่เกิดจากแม่สีอีกสองตัว เช่น เขียวเกิดจากเหลืองผสมน้ำเงิน เขียวจึงคู่กับแดง ซึ่งเป็นแม่สีตัวที่ไม่ได้ใช้ ตำแหน่งของแต่ละสีดูได้บนวงจรสี 12 สี

• แดง เขียว
  #E3171B #2EA44B
• เหลือง ม่วง
  #FCE300 #6A2C8F
• น้ำเงิน ส้ม
  #1F4FA3 #F7941D
• ส้มแดง เขียวน้ำเงิน
  #F15A24 #0E8A8A
• ส้มเหลือง ม่วงน้ำเงิน
  #FDB813 #3F3E99
• ม่วงแดง เขียวเหลือง
  #B5197A #A6CE39

ค่า HEX ของวงจรสีแบบแม่สีวัตถุธาตุคือค่าที่ ThaiGraph เลือกให้ดูใกล้สีโปสเตอร์บนจอ สีระบายไม่มีค่า HEX ในตัวเอง

สีคู่ตรงข้ามบนจอ (RGB และ HSL)

บนจอและในโปรแกรมออกแบบ สีคู่ตรงข้ามคือสีที่ค่าฮิวห่างกัน 180 องศา ได้แก่ แดง–ไซแอน ส้ม–ฟ้า เหลือง–น้ำเงิน เขียวเหลือง–ม่วง เขียว–แมเจนตา และเขียวมรกต–ชมพูเข้ม โปรแกรมอย่าง Figma และ Photoshop ระบุสีด้วยค่าฮิวแบบนี้ และเครื่องมือหาสีคู่หลายตัวหาสีคู่ด้วยการหมุนฮิว 180° ถ้าคุณใช้เครื่องมือแล้วได้ฟ้าเป็นสีคู่ของส้ม แทนที่จะเป็นน้ำเงินแบบในตำรา นั่นคือเหตุผล (เครื่องมือบางตัวคำนวณบนวงแบบแม่สีวัตถุธาตุ จึงให้ผลต่างกัน) ตารางนี้คำนวณจาก hsl(ฮิว, 100%, 50%)

ทำไมสีคู่ตรงข้ามถึงตัดกันแรง

สีคู่ตรงข้ามอยู่ห่างกันมากที่สุดบนวงจรสี คู่หลักแต่ละคู่ไม่มีแม่สีร่วมกันเลย เช่น แดงกับเขียวที่เกิดจากเหลืองผสมน้ำเงิน และเมื่อนำสองสีมาผสมกันจะหักล้างความสดของกันและกันจนได้สีกลางที่หม่นคล้ำ ถ้าเป็นแสงหรือสีในทางทฤษฎี ผลที่ได้คือสีเทา ส่วนสีระบายจริงมักออกมาเป็นน้ำตาลหรือเทาเข้ม คณะศิลปกรรมศาสตร์ มทร.ธัญบุรี ยกตัวอย่างว่าแดงผสมเขียวได้สีน้ำตาล ตำราการจับคู่สีจัดคู่นี้เป็นสีที่ตัดกันอย่างแท้จริง (true contrast) คนไทยจึงเรียกอีกชื่อว่าสีตัดกัน ความแรงนี้คือข้อดีเวลาต้องการให้คนมองเห็นอะไรบางอย่างทันที เช่น ปุ่มสั่งซื้อ ป้ายราคา หรือโลโก้บนพื้นสี และเป็นข้อเสียเวลาใช้สองสีในปริมาณเท่ากัน เพราะสายตาไม่รู้ว่าจะมองอะไรก่อน

สีตัดกันไม่ได้แปลว่าอ่านง่าย

สีคู่ตรงข้ามตัดกันที่เฉดสี แต่ความอ่านง่ายขึ้นกับความต่างของความสว่าง แดงสดบนเขียวสดจึงแสบตาแต่อ่านยาก มาตรฐาน WCAG ของ W3C กำหนดให้ข้อความทั่วไปมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 ตัวอย่างข้างล่างคำนวณอัตราส่วนจริงของสีในวงจรสีของเรา ทางแก้คือให้สีหนึ่งเข้มลงมากๆ ใช้ตัวหนังสือสีขาวหรือดำ แล้วเก็บสีคู่ไว้เป็นแถบเน้นเล็กๆ แทนการใช้เป็นสีตัวหนังสือ

วิธีจับคู่สีให้เข้ากัน

หลักของการจับคู่สีคือให้สีหนึ่งเป็นพระเอกที่กินพื้นที่มาก และให้สีคู่เป็นตัวเน้นที่ใช้น้อย คณะศิลปกรรมศาสตร์ มทร.ธัญบุรี แนะนำสัดส่วนประมาณ 80 ต่อ 20 และให้พื้นที่สีตัดกันไม่เกิน 10% ของภาพ ถ้าจำเป็นต้องใช้สองสีในพื้นที่ใกล้เคียงกัน ให้ลดความสดของสีใดสีหนึ่งหรือทั้งสองสีลง เทคนิคที่ใช้ได้กับงานเกือบทุกแบบ:

1. ใช้สีคู่เฉพาะจุดที่ต้องการให้คนกด เช่น ปุ่ม ลิงก์ หรือป้ายราคา เมื่อเห็นแล้วคนจะรู้ทันทีว่าตรงนั้นสำคัญ
2. ทำให้สีหลักอ่อนลงจนเป็นพื้นหลัง แล้วใช้สีเดิมแบบเข้มเป็นตัวหนังสือ วิธีทำอยู่ในหน้า เฉดสีและโทนสี
3. คั่นด้วยสีกลาง ขาว ครีม เทา หรือดำ ระหว่างสองสีที่ตัดกัน ช่วยลดอาการแสบตา
4. ถ้าคู่ตรงข้ามแรงเกินไป ใช้คู่ตรงข้ามแยก คือเลือกสีข้างๆ สีคู่แทน ยังตัดกันแต่นุ่มกว่า
5. เลือกโทนให้ตรงกับอารมณ์งาน ถ้าอยากให้อบอุ่นให้สีหลักมาจากฝั่งโทนร้อน ดูรายชื่อสีที่หน้า สีโทนร้อน โทนเย็น

ตัวอย่างพาเล็ตต์จับคู่สี

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

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