Cách dùng màu Hex trong CSS

Tìm hiểu cách dùng màu thập lục phân (hexadecimal colors) (còn gọi "màu hex" trong CSS.

Ký pháp thập lục phân (hex color notation) là cách thay thế biểu diễn màu RGB.

Ký pháp màu hex được chỉ định trong ba khối với hai giá trị mỗi khối:

Cùng nhau thành #RRGGBB.

Trong tiếng Hy Lạp, Hexa nghĩa là số sáu (6), và như bạn thấy, tổng RRGGBB là sáu.

Điều làm màu hex khác RGB là màu hex biểu diễn giá trị 0 đến 255 chỉ với 2 chữ số.

Ví dụ, màu RGB trắng 100% dưới đây:

rgb(255,255,255);

Có thể biểu diễn trong màu hex như sau:

#ffffff /* 100% trắng */

Bạn có thể rút gọn hai chữ số thành một nếu chúng bằng nhau (như FF FF FF):

#fff /* rút gọn cho 100% trắng */

Hex với kênh Alpha

Giống như RGB có RGBa và HSL có HSLa, Hex cũng có kênh Alpha được biểu diễn bằng thêm khối hai chữ số, nên ký pháp màu hex #RRGGBB trở thành #RRGGBBAA (A cho Alpha).

Ví dụ, màu hex sau là đen 100%, với độ mờ 25% (75):

#00000075 /* Đen với 25% opacity */

Kết quả:

Màu Hex với kênh Alpha

Btw: bạn có thể viết ký pháp màu hex dùng chữ hoa hoặc thường. Không khác biệt giữa #ffffff hay #FFFFFF.

Hỗ trợ trình duyệt cho ký pháp thập lục phân

#RRGGBB ký pháp màu hex được hỗ trợ trong tất cả trình duyệt, kể cả trình duyệt cũ.
#RRGGBBAA ký pháp màu hex hoạt động trong tất cả trình duyệt hiện đại, nhưng không trong IE11 (nếu ai coi đó hiện đại).