HEX, RGB, HSL: คู่มือรหัสสีฉบับสมบูรณ์ของนักออกแบบ

เหตุใดรูปแบบสีจึงมีความสำคัญ

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

HEX: มาตรฐานเว็บ

รหัสสีเลขฐานสิบหกเช่น#667eeเป็นรูปแบบที่พบบ่อยที่สุดในการพัฒนาเว็บ โดยเข้ารหัสค่าสีแดง เขียว และน้ำเงิน (0–255) เป็นเลขฐานสิบหกสองหลักที่ต่อกันเป็นสตริงหกอักขระ รูปแบบมีขนาดกะทัดรัด คัดลอกได้ง่าย และรองรับในระดับสากลใน CSS, HTML และเครื่องมือการออกแบบ

เมื่อทั้งสามคู่เป็นตัวเลขที่เหมือนกัน รหัสสามารถย่อให้สั้นลงได้:#ffffffกลายเป็น#ffff. ชวเลขนี้ใช้ได้กับเบราว์เซอร์หลักและตัวประมวลผลล่วงหน้าทั้งหมด

RGB: ความโปร่งใสและการควบคุมแบบเป็นโปรแกรม

RGB (และตัวแปร RGBA) จะกลายเป็นรูปแบบที่ต้องการเมื่อคุณต้องการความโปร่งใสหรือเมื่อคุณคำนวณสีโดยทางโปรแกรมRGBA(102, 126, 234, 0.5)ทำให้สีของคุณมีความทึบ 50% - ไม่สามารถแสดงโดยตรงในรูปแบบ HEX ได้ (แม้ว่า HEX จะรองรับรูปแบบ 8 อักขระเช่น#667eea80ที่นักพัฒนาน้อยคนนักจะรู้)

HSL: อาวุธลับของ Palette Builder

HSL (Hue, Saturation, Lightness) มีค่ามากที่สุดมนุษย์สามารถอ่านได้รูปแบบสี เว้คือมุม (0–360°) บนวงล้อสี ความอิ่มตัวของสีคือความสดใสของสี ความสว่างคือความสว่างหรือความมืด

ทำให้การสร้างจานสีเป็นเรื่องง่ายเล็กน้อย หากต้องการสร้างเฉดสีเดียวกัน 10 เฉดสำหรับระบบการออกแบบ:

• ให้ H และ S เหมือนเดิม
• ตั้งค่า L เป็น: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
• ตอนนี้คุณมีระดับสีครบ 10 ขั้นตอนแล้ว

การเข้าถึง: อัตราส่วนความคมชัด

มาตรฐานการเข้าถึง WCAG 2.1 AA ต้องใช้อัตราส่วนคอนทราสต์ 4.5:1 ระหว่างข้อความและพื้นหลังสำหรับข้อความขนาดปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ก่อนที่จะสรุปการผสมสีใน UI ของคุณ ให้ทดสอบอัตราส่วนคอนทราสต์ อัตราส่วนคอนทราสต์ที่ล้มเหลวถือเป็นหนึ่งในการละเมิดความสามารถในการเข้าถึงที่พบบ่อยที่สุดในการออกแบบเว็บ