เรียนรู้วิธีใช้ hexadecimal colors (เรียกว่า "hex colors" ใน CSS)
Hexadecimal notation (หรือ hex color notation) เป็นวิธีแสดง RGB colors แบบ alternative
Hex color notation ระบุใน 3 บล็อก แต่ละบล็อก 2 ค่า:
- RR (Red)
- GG (Green)
- BB (Blue)
รวมกันเป็น #RRGGBB
ในภาษากรีก Hexa หมายถึงเลข 6 และเห็นได้ว่า RRGGBB รวม 6 ตัวอักษร
สิ่งที่ทำให้ hex colors ต่างจาก RGB คือ hex colors แสดงค่า 0 ถึง 255 ด้วยแค่ 2 หลัก
ตัวอย่าง สีขาว 100% ใน RGB:
rgb(255,255,255);แสดงใน hex colors ได้ดังนี้:
#ffffff /* 100% white */คุณยังสามารถย่อ 2 หลักเป็น 1 หลักได้ หากค่าทั้งคู่เท่ากัน (เช่น FF FF FF):
#fff /* shortcut สำหรับ 100% white */Hex พร้อม Alpha Channel (ความโปร่งใส)
เหมือน RGB มี RGBa และ HSL มี HSLa, Hex ก็มี Alpha channel ซึ่งแสดงด้วยการเพิ่มอีก 2-digit block ทำให้ hex color notation #RRGGBB กลายเป็น #RRGGBBAA (A สำหรับ Alpha)
ตัวอย่าง hex color นี้คือ สีดำ 100% พร้อม opacity 25% (75 ใน hex):
#00000075 /* Black with 25% opacity */Result: Hex colors with an Alpha channel
Btw: คุณเขียน hex color notation ด้วย uppercase หรือ lowercase ก็ได้ ไม่มีความแตกต่างระหว่าง #ffffff หรือ #FFFFFF
Browser Support สำหรับ Hexadecimal Notation
- #RRGGBB hex color notation รองรับในทุก browsers รวมถึง legacy browsers
- #RRGGBBAA hex color notation ทำงานใน modern browsers ทั้งหมด แต่ไม่ทำงานใน IE11 (ถ้าคิดว่า IE11 modern)
