วิธีสร้างจานสีสำหรับการออกแบบของคุณ
สีเป็นหนึ่งในสิ่งแรกที่คุณสังเกตเห็นบนเว็บไซต์ แอป หรือดีไซน์ จานสีที่เลือกอย่างดีสร้างการแสดงผลที่สม่ำเสมอและเป็นมืออาชีพ จานสีที่เลือกไม่ดีทำให้แม้แต่เนื้อหาที่ดีก็ดูทรงผิด
คุณไม่จำเป็นต้องเป็นนักออกแบบเพื่อเลือกสีที่ดี ทฤษฎีสีให้สูตรที่เชื่อถือได้
โหมดความกลมกลืนของสี
สิ่งเหล่านี้อิงตามความสัมพันธ์ระหว่างสีบนวงล้อสี:
สีตรงข้าม — สองสีที่ตรงข้ามกัน (เช่น สีน้ำเงินและสีส้ม) คอนทราสต์สูง มีพลัง เหมาะอย่างยิ่งสำหรับ call to action ที่ต้องโดดเด่น
สีคล้ายคลึง — สามสีที่อยู่ติดกันบนวงล้อ (เช่น สีน้ำเงิน สีน้ำเงิน-เขียว สีเขียว) กลมกลืนและสงบ เหมาะอย่างยิ่งสำหรับพื้นหลังและการแสดงผลที่เป็นธรรมชาติ
สีไตรแอด — สามสีที่ห่างกันเท่ากันบนวงล้อ (เช่น สีแดง สีเหลือง สีน้ำเงิน) สดใสและสมดุล เหมาะอย่างยิ่งสำหรับดีไซน์ที่สนุกสนานหรือสร้างสรรค์
สีตรงข้ามแบบแยก — สีหนึ่งบวกกับสองสีที่อยู่ใกล้ๆ ส่วนตรงข้าม คอนทราสต์คล้ายกับตรงข้ามแต่มีความตึงเครียดน้อยกว่า
สีโมโนโครม — เฉดสี โทนสี และความสว่างที่แตกต่างกันของสีเดียว กลมกลืนเสมอ แต่อาจขาดความน่าสนใจทางสายตาหากใช้มากเกินไป
วิธีสร้างจานสี
- เลือกโหมดความกลมกลืน — เลือกสุ่ม สีคล้ายคลึง สีตรงข้าม สีไตรแอด หรือโหมดอื่นเพื่อกำหนดความสัมพันธ์ระหว่างสี
- ล็อกสีที่คุณชอบ — เมื่อคุณพบสีที่ต้องการเก็บไว้ ล็อกและสร้างใหม่อันอื่นจนกว่าจานสีทั้งหมดจะเข้ากัน
- ส่งออก — คัดลอกรหัส HEX ตัวแปร CSS หรือบันทึกจานสีเป็นรูปภาพ
การสร้างจานสีที่ใช้งานได้
จานสีเป็นมากกว่าชุดของสีสวยๆ สำหรับโครงการจริง คุณต้องการ:
- สีหลัก — สีของแบรนด์ของคุณ ใช้สำหรับปุ่ม ลิงก์ และองค์ประกอบ UI ที่สำคัญ
- สีรอง — สนับสนุนสีหลัก ใช้สำหรับองค์ประกอบที่โต้ตอบได้ที่โดดเด่นน้อยกว่า
- สีกลาง — สีเทาหรือโทนเงียบสำหรับข้อความ พื้นหลัง และขอบ (ส่วนใหญ่ของอินเทอร์เฟซของคุณ)
- สีเน้น — ใช้อย่างประหยัดเพื่อไฮไลต์ แจ้งเตือน หรือส่งสัญญาณสถานะที่สำคัญ
- สีของข้อผิดพลาด/ความสำเร็จ — สีแดงสำหรับข้อผิดพลาด สีเขียวสำหรับความสำเร็จ (โดยทั่วไปแยกจากจานสี)
เคล็ดลับ
- เริ่มด้วยสีหนึ่ง — เลือกสีหลักที่คุณชอบ จากนั้นใช้โหมดความกลมกลืนเพื่อค้นหาสีที่เสริม ง่ายกว่าการพยายามเลือก 5 สีอย่างอิสระ
- ทดสอบบนเนื้อหาจริง — จานสีที่ดูดีในแถบสีอาจไม่ทำงานเมื่อใช้กับข้อความ ปุ่ม และพื้นหลังจริง ทดสอบกับอินเทอร์เฟซจริงเสมอ
- ตรวจสอบคอนทราสต์ — สีที่สวยงามไร้ประโยชน์หากอ่านข้อความไม่ออก ส่งการรวมข้อความ/พื้นหลังของคุณผ่านตัวตรวจสอบคอนทราสต์เพื่อปฏิบัติตาม WCAG (อัตราส่วน 4.5:1 สำหรับข้อความปกติ)
- น้อยคือดีกว่า — ดีไซน์ที่มี 3 สีที่เลือกอย่างดีดูเป็นมืออาชีพมากกว่าดีไซน์ที่มี 7 สี ใช้สีกลางสำหรับส่วนใหญ่ของอินเทอร์เฟซและสงวนสีสดสำหรับสิ่งสำคัญ
คำถามที่พบบ่อย
จานสีควรมีกี่สี?
ดีไซน์ส่วนใหญ่ทำงานได้ดีที่สุดด้วย 3 ถึง 5 สี — สีหลักหนึ่งสี สีรองหนึ่งสี สีกลางหนึ่งสี และสีเน้นหนึ่งหรือสองสี เกินกว่านี้ ดีไซน์อาจดูวุ่นวาย
ความกลมกลืนของสีคืออะไร?
ความกลมกลืนของสีหมายถึงการรวมสีที่ดูสบายตา อิงจากตำแหน่งของสีบนวงล้อสี ความกลมกลืนทั่วไปคือสีตรงข้าม (สีตรงข้ามกัน) สีคล้ายคลึง (สีที่อยู่ติดกัน) และสีไตรแอด (สามสีที่ห่างกันเท่ากัน)
ฉันจะตรวจสอบว่าสีของฉันเข้าถึงได้อย่างไร?
ใช้ตัวตรวจสอบคอนทราสต์เพื่อตรวจสอบว่าสีข้อความและพื้นหลังของคุณเป็นไปตามมาตรฐานการเข้าถึง WCAG อัตราส่วนขั้นต่ำสำหรับข้อความปกติคือ 4.5:1 (ระดับ AA)
ฉันสามารถส่งออกจานสีของฉันได้หรือไม่?
ได้ คุณสามารถคัดลอกสีในรหัส HEX ตัวแปร CSS หรือส่งออกจานสีเป็นรูปภาพเพื่อใช้ใน Figma, Canva, Sketch ฯลฯ