กฎ 60-30-10
นี่คือกฎที่มีประโยชน์ที่สุดในการจัดสัดส่วนสี มีที่มาจากการออกแบบตกแต่งภายใน แต่ใช้ได้กับทุกโปรเจกต์
- 60 %: สีหลัก มักเป็นสีกลางหรือเฉดอ่อน ครอบคลุมพื้นหลังและพื้นที่ขนาดใหญ่
- 30 %: สีรอง เพิ่มบุคลิก ใช้กับบล็อก เมนู หรือเฟอร์นิเจอร์
- 10 %: สีเน้น สีที่โดดเด่นที่สุด ใช้กับปุ่ม ไอคอน หรือรายละเอียด
ตัวอย่างเช่น ขาวออฟไวต์ 60 % น้ำเงินกรมท่า 30 % และ ส้ม 10 %
ไม่จำเป็นต้องวัดให้แม่นยำ ประเด็นคือมีสีหนึ่งเป็นตัวนำ สีหนึ่งเป็นตัวเสริม และอีกสีหนึ่งโดดเด่น
บทบาทของสีกลาง
สีกลางได้แก่ ขาว ดำ เทา เบจ ครีม และน้ำตาลอ่อน ซึ่งเข้ากับเกือบทุกสี
สีกลางช่วยพักสายตา และทำให้สีสดโดดเด่นขึ้น พาเลตที่ไม่มีสีกลางมักดูเหนื่อยตา
- ขาวและขาวออฟไวต์: ความสะอาดและความโปร่งโล่ง
- เทา: ทันสมัยและเรียบร้อย เลือกเทาโทนอุ่นหรือโทนเย็นที่เข้ากับสีอื่นในพาเลต
- เบจและสีทราย: ความอบอุ่นและความเป็นธรรมชาติ
- ดำหรือเกือบดำ: ความสง่างามและคอนทราสต์ สำหรับข้อความ สีเทาเข้มมากมักสบายตากว่าสีดำสนิท
การจับคู่ตามอุณหภูมิสี
สีแบ่งเป็นโทนร้อน (แดง ส้ม เหลือง) และโทนเย็น (น้ำเงิน เขียว ม่วง) จับคู่ได้สามวิธีง่าย ๆ
- โทนร้อนล้วน: อบอุ่นและมีพลัง เหมาะกับร้านอาหารหรือแบรนด์ที่เป็นกันเอง
- โทนเย็นล้วน: สงบและเป็นมืออาชีพ เหมาะกับการแพทย์ เทคโนโลยี หรือการเงิน
- พื้นโทนเย็นกับสีเน้นโทนร้อน: ตัวเลือกที่ใช้ได้กว้างที่สุด สีเน้นโทนร้อนจะดึงสายตาบนพื้นหลังที่สงบ
สิ่งที่มักไม่ได้ผล คือการใช้สีโทนร้อนและโทนเย็นที่สดจัดหลายสีพร้อมกันโดยไม่มีสีหลัก
คอนทราสต์สำหรับข้อความ
สีสวยแค่ไหนก็ไร้ประโยชน์ถ้าข้อความอ่านไม่ออก คอนทราสต์ระหว่างข้อความกับพื้นหลังสำคัญมากต่อความง่ายในการอ่านและการเข้าถึง
- ใช้ข้อความสีเข้มบนพื้นอ่อน หรือข้อความสีอ่อนบนพื้นเข้ม
- หลีกเลี่ยงข้อความสีเหลือง เขียวอ่อน หรือเทาอ่อนบนพื้นขาว
- อย่าวางสีตรงข้ามที่สดจัดซ้อนกัน เช่น แดงบนเขียว เพราะจะดูกะพริบและทำให้ตาล้า
- แนวทาง WCAG กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4,5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่
ตรวจสอบคู่สีใดก็ได้ด้วย เครื่องมือตรวจคอนทราสต์ ของเรา
15 คู่สีที่ได้ผลเสมอ
คู่สีเหล่านี้เป็นจุดเริ่มต้นที่ปลอดภัย ใช้เป็นฐาน แล้วเพิ่มสีกลางหรือสีเน้นตามต้องการ
- น้ำเงินกรมท่าและครีม: คลาสสิก จริงจัง และอ่านง่าย
- ดำและทอง: หรูหราและสง่างาม
- น้ำเงินและส้ม: คู่สีตรงข้ามที่เต็มไปด้วยพลัง
- เขียวสนและเบจ: เป็นธรรมชาติและสงบ
- ชมพูและเทาชาร์โคล: ทันสมัยและสมดุล
- เหลืองและดำ: คอนทราสต์สูงสุด เหมาะกับป้ายเตือน
- เลือดหมูและสีทราย: อบอุ่นและประณีต
- เทอร์ควอยซ์และคอรัล: สดชื่นแบบฤดูร้อน
- ม่วงและไลแลคอ่อน: โทนสีเดียวที่สร้างสรรค์
- น้ำตาลและเขียวเสจ: โทนเอิร์ธ เหมาะกับแบรนด์ธรรมชาติ
- เทาและพีช: นุ่มนวลและเป็นมิตร
- น้ำเงินปิโตรเลียมและเหลืองอ่อน: สงบพร้อมความสว่างนิด ๆ
- เทอราคอตตาและขาวออฟไวต์: อบอุ่นแบบเมดิเตอร์เรเนียน
- ปิโตรเลียมเข้มและมัสตาร์ด: เรโทรและมีเอกลักษณ์
- ขาวและแดง: ตรงไปตรงมา มีพลัง และมองเห็นชัด
ดูไอเดียอีกมากมายพร้อมโค้ด HEX ได้ที่หน้า คู่สี ของเรา
สีไหนเข้ากับสีไหน
ถ้ามีสีหลักอยู่แล้ว รายการนี้จะเป็นจุดเริ่มต้นที่รวดเร็ว
- แดง: ขาว ดำ เทา น้ำเงินกรมท่า และเบจ หากต้องการความกล้า: ชมพูหรือส้ม
- ส้ม: น้ำเงินกรมท่า เทอร์ควอยซ์ ขาว ครีม และน้ำตาล
- เหลือง: เทา ดำ น้ำเงินกรมท่า และขาว สีมัสตาร์ดเข้ากับเขียวเข้มได้ดี
- เขียว: เบจ ขาว น้ำตาล ทอง และชมพูอ่อน
- น้ำเงิน: ขาว ส้ม เทา เหลือง และคอรัล สีน้ำเงินกรมท่าใช้ได้เกือบเหมือนสีกลาง
- ม่วง: เทา ไลแลค ทอง เขียวเสจ และขาว
- ชมพู: เทา น้ำเงินกรมท่า เขียวมะกอก ขาว และทอง
- น้ำตาล: ครีม เขียว น้ำเงินปิโตรเลียม ส้ม และขาวออฟไวต์
คุณคงสังเกตเห็นว่าสีกลางอยู่ในเกือบทุกรายการ สีกลางคือคู่หูที่ปลอดภัยที่สุดของสีที่โดดเด่น
วิธีสร้างคู่สีของคุณเอง
- เลือกสีหลักตามสิ่งที่ต้องการสื่อ
- หาสีรองบนวงล้อสี: สีข้างเคียงสำหรับความสงบ สีตรงข้ามสำหรับความโดดเด่น
- เพิ่มสีกลางหนึ่งหรือสองสี
- เลือกสีเน้นหนึ่งสีสำหรับสิ่งที่สำคัญที่สุด
- ทดสอบพาเลตกับตัวอย่างจริง เช่น หน้าเว็บ สไลด์พรีเซนเทชัน หรือรูปถ่ายห้อง
เมื่อลังเล ให้ใช้สีน้อยลง สามถึงห้าสีก็เพียงพอสำหรับเกือบทุกโปรเจกต์
ข้อผิดพลาดที่พบบ่อยในการใช้สี
- ใช้สีมากเกินไป ผลลัพธ์ดูรกและไม่มีอะไรโดดเด่น
- ให้น้ำหนักทุกสีเท่ากัน เมื่อไม่มีสีหลัก สายตาจะไม่รู้ว่าควรมองตรงไหน
- ลืมเรื่องคอนทราสต์ ข้อความที่อ่านไม่ออก หรือปุ่มที่ไม่มีใครมองเห็น
- ทุกอย่างสดจัดเกินไป สีที่สดมากทำให้ตาล้า ควรจับคู่กับเฉดที่นุ่มนวลกว่า
- มองข้ามบริบท สีดูต่างกันภายใต้แสงกลางวัน บนหน้าจอ และบนกระดาษ
- คัดลอกโดยไม่ปรับ พาเลตที่ใช้ได้กับแบรนด์หนึ่งอาจไม่เหมาะกับกลุ่มเป้าหมายของคุณ
- ผสมสีกลางต่างอุณหภูมิ สีเทาโทนเย็นข้างสีเบจโทนอุ่นอาจดูหม่นสกปรก ควรเลือกสีกลางจากตระกูลเดียวกัน
- ไม่ทดสอบบนหลายหน้าจอ สีอาจสวยบนคอมพิวเตอร์แต่ดูหม่นบนโทรศัพท์ ตรวจสอบบนอุปกรณ์มากกว่าหนึ่งเครื่องเสมอ