คู่สี: สร้างโทนสีที่เข้ากันจากสีที่คุณเลือก

เลือกสีหลักหนึ่งสี แล้วดูว่าสีไหนเข้ากันได้บ้าง เครื่องมือนี้สร้างคู่สี 6 แบบจากวงล้อสี ทั้งสีตรงข้าม สีข้างเคียง สามเหลี่ยม และโทนเดียว บอกค่าคอนทราสต์ของแต่ละสีให้รู้ว่าวางตัวหนังสือแล้วอ่านออกไหม ด้านล่างมีหลักจับคู่สีเสื้อผ้า สีห้อง และงานออกแบบ

คู่สี 6 แบบจากวงล้อสี

ลองวางคู่สีเป็นการ์ดจริง

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

เช็กคอนทราสต์ตัวหนังสือกับพื้นหลัง

คู่สีที่สวยอาจอ่านยาก ใส่สีตัวหนังสือกับสีพื้นหลังเพื่อดูค่าคอนทราสต์ตามสูตรของ WCAG 2 ซึ่งเป็นแนวทางการทำเว็บให้ทุกคนเข้าถึงได้ของ W3C ตัวเลขยิ่งสูงยิ่งอ่านง่าย ต่ำสุด 1:1 (สีเดียวกัน) สูงสุด 21:1 (ดำบนขาว)

ตัวหนังสือใหญ่ตามเกณฑ์นี้หมายถึงขนาดอย่างน้อย 18 พอยต์ หรือ 14 พอยต์ตัวหนา ซึ่งบนจอมักเท่ากับราว 24px และ 18.7px ตามลำดับ ถ้าเป็นข้อความยาวที่คนต้องอ่านจริง ควรเลือกคู่ที่ผ่าน 4.5:1 เสมอ

โทนสีร้อนและโทนสีเย็น เลือกใช้อย่างไร

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

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

หลัก 60-30-10: แบ่งสัดส่วนคู่สีให้ลงตัว

หลักง่ายๆ ที่นักแต่งบ้านกับนักออกแบบใช้กันมานาน คือแบ่งพื้นที่ 60% ให้สีหลัก 30% ให้สีรอง และ 10% ให้สีเน้น ตัวเลขนี้ไม่ใช่กฎตายตัว แต่ช่วยกันไม่ให้สีแย่งกันเด่น

ตัวอย่างการจับคู่สี: เสื้อผ้า ห้อง และงานออกแบบ

จับคู่สีเสื้อผ้า

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

จับคู่สีห้อง

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

จับคู่สีงานออกแบบ โลโก้ และโพสต์

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

คำถามที่พบบ่อย

คู่สีตรงข้ามคืออะไร

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

โทนสีร้อนกับโทนสีเย็นมีสีอะไรบ้าง

โทนร้อนคือฝั่งแดง ส้ม เหลือง ให้ความรู้สึกอบอุ่น ดูเหมือนเข้ามาใกล้ โทนเย็นคือฝั่งเขียว ฟ้า น้ำเงิน ม่วง ให้ความรู้สึกสงบ ดูเหมือนถอยห่างออกไป ม่วงกับเขียวอยู่ตรงรอยต่อ จึงเอียงไปทางร้อนหรือเย็นได้ตามสีที่ผสมอยู่

วงล้อสีแบบศิลปะกับแบบหน้าจอต่างกันอย่างไร

วงล้อแบบศิลปะใช้แม่สี แดง เหลือง น้ำเงิน แบบที่สอนในโรงเรียน สีตรงข้ามของแดงคือเขียว วงล้อแบบหน้าจอใช้แสง แดง เขียว น้ำเงิน สีตรงข้ามของแดงจะเป็นฟ้าอมเขียว (cyan) งานแต่งตัวหรือแต่งห้องใช้แบบศิลปะ งานเว็บหรือกราฟิกเลือกได้ทั้งสองแบบ

ตัวหนังสือกับพื้นหลังต้องต่างกันแค่ไหนถึงอ่านง่าย

เกณฑ์ WCAG 2 ระดับ AA กำหนดค่าคอนทราสต์อย่างน้อย 4.5:1 สำหรับตัวหนังสือขนาดปกติ และ 3:1 สำหรับตัวหนังสือขนาดใหญ่ ระดับ AAA ใช้ 7:1 เครื่องมือในหน้านี้คำนวณค่านี้ให้ทุกคู่สี

ที่มาของหลักการ

รูปแบบคู่สีอ้างอิงจาก Color scheme กับ Color wheel (Wikipedia) สูตรค่าคอนทราสต์กับเกณฑ์ 4.5:1, 3:1 และ 7:1 มาจาก WCAG 2.2: Contrast (Minimum) ของ W3C