Cách sử dụng Màu Hex trong CSS

Tìm hiểu cách sử dụng màu thập lục phân (còn được gọi là "màu hex" trong CSS.

Ký hiệu hệ thập lục phân (hoặc ký hiệu màu lục phân) là một cách thay thế để thể hiện màu RGB.

Ký hiệu màu hệ lục phân được chỉ định thành ba khối với hai giá trị trong mỗi khối:

Họ cùng nhau trở thành #RRGGBB.

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

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

Ví dụ:màu RGB 100% trắng bên dưới:

rgb(255,255,255);

Có thể được thể hiện bằng các màu hex như thế này:

#ffffff /* 100% white */

Bạn có thể thực hiện thêm một bước và viết tắt hai chữ số thành một nếu chúng bằng nhau (chẳng hạn như FF FF FF):

#fff /* shortcut for 100% white */

Hex với kênh Alpha

Giống như RGB có RGBa và HSL có HSLa, Hex cũng có kênh Alpha được thể hiện bằng cách thêm một khối hai chữ số bổ sung, để ký hiệu màu hệ lục phân #RRGGBB trở thành #RRGGBBAA (A cho Alpha).

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

#00000075 /* Black with 25% opacity */

Kết quả:

Màu hệ lục phân với một kênh Alpha

Btw:bạn có thể viết ký hiệu màu hex bằng cách sử dụng chữ hoa hoặc chữ thường. Không có sự khác biệt cho dù bạn viết #ffffff hay #FFFFFF.

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

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