Bảng màu CSS3

CSS hỗ trợ bảng màu như: hexadecimal, RGB

Ngoài ra CSS3 hỗ trợ thêm bảng màu:

• Màu RGBA 
• Màu HSL 
• Màu HSLA 
• opacity

Màu RGBA
Các giá trị màu RGBA là một kế thừa của các giá trị màu RGB 
Giá trị màu RGBA là viết tắt của:Red, Green, Blue,alpha theo dạng sau: rgba (đỏ, xanh, xanh, alpha). Tham số alpha  xác định độ trong suốt của một màu và số tham số là một số từ 0.0 đến 1.0.
Ví dụ:

#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}

Xem ví dụ

Màu HSL

HSL là viết tắt của Hue, Saturation và Lightness.

1. Giá trị màu HSL được viết dưới dạng: hsl (màu sắc, độ bão hòa, độ sáng).Hue là độ màu(từ 0 đến 360):
   • 0 (hoặc 360) là màu đỏ
   • 120 xanh
   • 240 màu xanh lam
2. Saturation là một tỷ lệ phần trăm: 100% là màu đầy đủ.
3. Lightness cũng là một phần trăm; 0% là màu tối (đen) và 100% màu trắng.

Ví dụ:

#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}

Xem ví dụ

Màu HSLA

HSLA là viết tắt cho Hue, Saturation, Lightness và Alpha. Giá trị Alpha giống như trong RGBA. Một cú pháp mẫu của HSLA như sau:
Giá trị màu HSLA được định dạng: hsla Hue,Saturation, Lightness , alpha), trong đó tham số alpha  xác định độ trong suốt của một màu và số tham số là một số từ 0.0 đến 1.0.

Ví dụ:

#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}

Xem ví dụ

opacity

Opacity là một thuộc màu loãng cần được thêm vào để tăng độ trong suốt
Giá trị thuộc tính opacity  phải là số từ 0,0 (hoàn toàn trong suốt) và 1,0 (không rõ ràng).

Ví dụ:

#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}

Xem ví dụ

Trình duyệt hỗ trợ

Thuộc tính	Chrome	IE	Firefox	Safari	Opera
background-image (có nhiều backgrounds)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
RGBA, HSL, and HSLA	4.0	9.0	3.0	3.1	10.1
opacity	4.0	9.0	2.0	3.1	10.1