กฎความกลมกลืนของสี: Complementary, Triadic, Tetradic และเมื่อใดที่ควรใช้แต่ละแบบ

ทฤษฎีสีดูเหมือนเป็นเรื่องวิชาการ แต่ในทางปฏิบัติมันคือชุดเครื่องมือเล็กน้อยของกฎต่าง ๆ ที่นักออกแบบที่ดีนำมาใช้โดยไม่คิด กฎความกลมกลืนของสีแบบคลาสสิก 7 แบบ ครอบคลุมงานจานสีไป 95% — การรู้แต่ละแบบและเมื่อใดที่ควรใช้คือความแตกต่างระหว่างจานสีที่รู้สึกว่ามีจุดประสงค์ชัดเจนและจานสีที่รู้สึกว่าเกิดขึ้นโดยบังเอิญ

วงล้ออยู่เหนือเข็มทิศ

กฎความกลมกลืนทุกข้อกำหนดตำแหน่งบนวงล้อสี 12 ส่วน คุณเลือกเฉดสีพื้นฐาน จากนั้นกฎจะบอกคุณว่าจะเอาเฉดสีที่เหลือมาจากตรงไหนบนวงล้อ กฎต่าง ๆ ไม่ได้ระบุความอิ่มตัวหรือความสว่าง — มิติเหล่านั้นเป็นของคุณที่ต้องปรับ

Complementary (เฉดสีตรงข้าม)

สองสีที่อยู่ตรงข้ามกันบนวงล้อ: แดงและสีฟ้า ส้มและสีน้ำเงิน ม่วงและสีเหลือง ความเปรียบต่างสูงสุด ใช้เมื่อคุณต้องการให้บางอย่างดูโดดเด่นจากพื้นหลัง — ปุ่ม CTA บนหน้าแรก ไฮไลต์บนแผนภูมิข้อมูล

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

Triadic (สามเฉดสีเรียงห่างเท่า ๆ กัน)

สามเฉดสีที่มีช่วง 120°: แดง-เหลือง-น้ำเงิน ส้ม-เขียว-ม่วง สมดุลและเต็มไปด้วยพลังงาน ได้รับความนิยมในการวาดภาพประกอบ ผลิตภัณฑ์เด็ก และแบรนด์ที่ต้องการรู้สึกสดชื่นโดยไม่ทำให้รู้สึกหนักใจ

ข้อควรระวัง: ทั้งสามเฉดสีที่มีความอิ่มตัวเท่ากันจะแย่งความสนใจกัน เลือกสีหนึ่งให้เป็นสีหลัก (60% ของการออกแบบของคุณ) สีหนึ่งเป็นสีเสริม (30%) และสีหนึ่งเป็นสีเน้น (10%)

Analogous (เพื่อนบ้านบนวงล้อ)

สามถึงห้าเฉดสีที่อยู่ติดกัน: เหลือง-เหลืองเขียว-เขียว หรือน้ำเงิน-น้ำเงินม่วง-ม่วง ความกลมกลืนที่शांต-สุดสมบูรณ์ — ไม่มีความขัดแย้งเพราะไม่มีสีใดทำให้สีอื่นรู้สึกยุ่งเหยิง ฉากธรรมชาติ (พระอาทิตย์ตก ป่าไม้) เกือบทั้งหมดเป็นแบบ analogous

ข้อควรระวัง: จานสี analogous สามารถรู้สึกแบน เพิ่มสีเน้น complementary (ปริมาณเล็กน้อยของสีตรงข้ามกับสีกลางของคุณ) เพื่อให้มีจุด対比

Split-Complementary (สองสีที่เกือบตรงข้าม)

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

Tetradic (สองคู่สีตรงข้าม)

สี่เฉดสีสร้างเป็นสี่เหลี่ยมผืนผ้าบนวงล้อ: เช่น แดง + เขียว + ส้ม + น้ำเงิน ความกลมกลืนที่อุดมสมบูรณ์ที่สุด — ความหลากหลายมาก — แต่ยากที่สุดในการสร้างสมดุล ดีที่สุดเมื่อสีหนึ่งเป็นสีหลักและสามสีอื่น ๆ มีบทบาทสนับสนุน

ข้อควรระวัง: จานสี tetradic อ่านได้ง่ายว่าสับสน ตัดสินใจว่าสีใดแทนตัวตนและลดสามสีอื่นให้มีบทบาทเล็กน้อย

Monochromatic (เฉดสีเดียว หลายค่า)

เฉดสีเดียวที่มีความอิ่มตัวและความสว่างต่างกัน ความสอดคล้องสูงสุด ไม่มีความเปรียบต่างของเฉดสี สมบูรณ์แบบสำหรับอินเตอร์เฟซที่คุณต้องการให้เนื้อหา (รูปภาพ การพิมพ์) ดำเนินการสนใจความสนใจของภาพ ไม่ใช่ UI chrome

เครื่องมือ SaaS ที่มีลักษณะน้อยที่สุดส่วนใหญ่มีแนวโน้ม monochromatic — แบรนด์คือน้ำเงินหนึ่งสี ส่วนที่เหลือทั้งหมดเป็นสีเทา

Trending (การทำลายกฎอย่างดี)

โหมดที่เจ็ดที่เรารวมไว้ใน Color Palette Generator: 177 จานสีที่คัดสรรด้วยมือจากชุมชน ColourLovers, Coolors และนักออกแบบอุตสาหกรรม จานสีเหล่านี้มักจะตั้งใจทำลายกฎคลาสสิก — พวกเขาทำงานเพราะนักออกแบบมีจุดประสงค์ทางศิลปะเฉพาะเจาะจง — และพวกเขาเป็นแหล่งที่มาของแรงบันดาลใจที่ดีเมื่อทฤษฎีบริสุทธิ์สร้างสิ่งที่ปลอดภัยเกินไป

เลือกแบบใด?

• บรรณาธิการ สงบ ธรรมชาติ → analogous
• ศักติบรรษม CTA พลังงาน → complementary หรือ split-complementary
• แบรนด์สดชื่น ภาพประกอบ → triadic
• บรรณาธิการอุดมสมบูรณ์ แคมเปญใจกล้า → tetradic
• UI ขั้นต่ำที่สุด หนัก ๆ ด้วยรูปภาพ → monochromatic
• รู้สึกติด → เรียกดู Trending

นอกเหนือกฎ

กฎทั้งเจ็ดแบบละเว้นสองมิติที่สำคัญ: contrast (สามารถอ่านข้อความบนพื้นหลังนี้ได้หรือไม่?) และ semantic color (แดงหมายถึงอันตรายใน UI ตะวันตกโดยไม่คำนึงถึงทฤษฎี) ควรรัน จานสีสุดท้ายของคุณผ่านการตรวจสอบความเปรียบต่าง WCAG — Color Palette Generator แสดง AA/AAA ratio ของทุกคู่ในคลิกเดียว — และอย่าเลือกสีอันตรายเพราะวงล้อบอกว่ามันดูดี

กฎเป็นจุดเริ่มต้น ไม่ใช่จุดสิ้นสุด สร้างจานสีห้าแบบ วิจารณ์พวกมัน ปรับเปลี่ยน จานสีที่ดีมาจากการทำซ้ำ ไม่ใช่จากการม้วนลูกเต๋าครั้งเดียว