Categories CSS

Các cách khai báo màu sắc trong CSS

Mã hex là cách chủ yếu dùng để khai báo các giá trị màu trong CSS, ngoài ra định dạng rgba đang được sử dụng ngày càng rộng rãi – trong đó a nghĩa là alpha hay còn gọi là độ trong suốt nằm trong khoảng từ 0 đến 1.

Dưới đây là một số cách khai báo hợp lệ:

  • #RRGGBB (đây là cách tôi thường dùng nhất), viết hoa hay thường đều được, ví dụ:  
color:#FFFFFF;
color:#ffffff;

  • rgb(#R,#G,#B), các giá trị số từ 0 đến 255, ví dụ: 
color:rgb(69,00,00);

  • rgb(R%,G%,B%) – các giá trị phần trăm nằm trong khoảng từ 0 đến 100%, ví dụ, 
color:rgb(23%,15%,25%);

  • rgba(R,G,B,A), ví dụ:
color:rgb(69,00,00,0.3);

  • Theo tên tiếng Anh của màu (đây là cách ưa thích của tôi), ví dụ:
color:red; 

(xem thêm: Danh sách 17 tên màu tiêu chuẩn trong CSS)


Dưới đây là 2 hình vuông 200px với cùng mã màu #690000 với độ trong suốt là 0.3 ở bên trái, và 0.95 ở bên phải:

Code mẫu:

<div style="background-color: rgba(69,00,00,.3); float: left; height: 200px; width: 33%;">&nbsp;</div>

<div style="background-color: rgba(69,00,00,.95); float: right; height: 200px; width: 33%;">&nbsp;</div>
 
 
Back to Top