ชื่อสีและรหัส HEX

รหัสสี HEX ทำงานอย่างไร

รหัส HEX คือตัวเลขสามชุดที่เขียนในฐาน 16 เท่านั้น ได้แก่ สีแดงเท่าไร สีเขียวเท่าไร และสีน้ำเงินเท่าไร แต่ละค่าอยู่ระหว่าง 00 ถึง FF ดังนั้น #FFD700 จึงหมายถึงแดงเต็มที่ เขียว 215 จาก 255 และไม่มีน้ำเงินเลย ซึ่งสายตาเรามองว่าเป็นสีทอง สิ่งที่มีความหมายคือคู่ตัวเลขสองหลักเท่านั้น จึงเป็นเหตุผลที่ #FFF และ #FFFFFF ต่างก็เป็นสีขาว

เปรียบเทียบ HEX, RGB และ HSL

ทั้งสามแบบอธิบายสีชุดเดียวกัน เพียงแต่ให้ข้อมูลต่างกัน HEX กระชับและเป็นตัวเลือกปกติใน CSS RGB คือตัวเลขชุดเดียวกันในฐานสิบ ซึ่งคำนวณง่ายกว่า ส่วน HSL แยกเนื้อสีออกจากความอิ่มตัวและความสว่าง จึงสร้างชุดสีด้วยมือได้ง่ายกว่ามาก เพียงคงเนื้อสีไว้แล้วเปลี่ยนความสว่าง ก็ได้เฉดที่เข้ากัน

ทำไมความต่างสีจึงสำคัญ

ตัวอักษรต้องเด่นจากพื้นหลังมากพอที่ผู้มีสายตาเลือนรางหรือผู้ที่ดูบนจอสลัวจะอ่านได้ แนวทางด้านการเข้าถึงกำหนดอัตราส่วน 4.5 ต่อ 1 สำหรับตัวอักษรทั่วไป (ระดับ AA) และ 7 ต่อ 1 สำหรับระดับ AAA ที่เข้มงวดกว่า ส่วนตัวอักษรขนาดใหญ่ยอมให้ 3 ต่อ 1 เครื่องมือนี้คำนวณอัตราส่วนเทียบทั้งขาวและดำ คุณจึงเห็นทันทีว่าควรวางสีใดไว้ด้านบน

ควรรู้ไว้

• CSS มีสีที่มีชื่อ 148 สี และหลายสีซ้ำกัน เช่น grey กับ gray และ aqua กับ cyan เหมือนกันทุกประการ
• รูปแบบย่อของ HEX ใช้ได้เมื่อแต่ละคู่ซ้ำกันเท่านั้น ดังนั้น #FFCC00 เขียนเป็น #FC0 ได้ แต่ #FFD700 ย่อไม่ได้
• การเติมเลขฐานสิบหกอีกสองหลักเป็นการกำหนดความโปร่งใส ดังนั้น #FFD70080 คือสีทองที่ความทึบราวครึ่งหนึ่ง
• ในการสร้างชุดสี ให้คงเนื้อสีใน HSL ไว้และเปลี่ยนเฉพาะความสว่าง สีที่ได้จะดูเข้าพวกกันเสมอ