Màu CSS

Hỗ trợ CSS 140 tên màu khác nhauvà giá trị hexa, giá trị RGB, giá trị RGBA, giá trị HSL, giá trị HSLA và độ trong suốt.

Màu RGBA

Giá trị màu RGBA là mở rộng của giá trị màu RGB, có kênh alpha - kênh này quy định độ trong suốt của màu.

Giá trị màu RGBA được quy định như sau: rgba(red, green, blue, alpha)。 alpha Các tham số là các số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Dưới đây là ví dụ về các màu RGBA khác nhau:

Mô hình

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Màu đỏ với độ mờ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Màu xanh lục với độ mờ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Màu xanh lam với độ mờ */

Thử trực tiếp

Màu HSL

HSL đại diện cho hue, saturation và lightness (Hue, Saturation và Lightness).

Giá trị màu HSL được quy định như sau: hsl(hue, saturation, lightness).

Hue là góc độ trên bánh màu (từ 0 đến 360):

  • 0 (hoặc 360) là màu đỏ
  • 120 là màu xanh lục
  • 240 là màu xanh lam

Độ bão hòa là một giá trị phần trăm: 100% là màu toàn phần.

Độ sáng cũng là một giá trị phần trăm: 0% là màu tối (màu đen), còn 100% là màu trắng.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Dưới đây là ví dụ về việc định nghĩa các màu HSL khác nhau:

Mô hình

#p1 {background-color: hsl(120, 100%, 50%);}  /* Màu xanh lá cây */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Màu xanh lá cây nhạt */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Màu xanh lá cây đậm */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Màu xanh lá cây nhạt */

Thử trực tiếp

Giá trị màu HSLA

Giá trị màu HSLA là mở rộng của giá trị màu HSL có Alpha channel - nó quy định độ trong suốt của màu.

Giá trị màu HSLA được quy định bởi các tham số sau: hsla(hue, saturation, lightness, alpha)，trong đó tham số alpha xác định độ trong suốt. Tham số alpha là số介于 từ 0.0 (hoàn toàn trong suốt) và 1.0 (không trong suốt hoàn toàn).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Dưới đây là ví dụ về việc định nghĩa các màu HSLA khác nhau:

Mô hình

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Màu xanh lá cây có độ trong suốt */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Màu xanh lá cây nhạt có độ trong suốt */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Màu xanh lá cây đậm có độ trong suốt */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Màu xanh lá cây nhạt có độ trong suốt */

Thử trực tiếp

Độ trong suốt

CSS opacity Cài đặt thuộc tính độ trong suốt của toàn bộ phần tử (màu nền và văn bản đều là trong suốt/đông).

opacity Giá trị thuộc tính phải là số介于 từ 0.0 (hoàn toàn trong suốt) và 1.0 (không trong suốt hoàn toàn).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); độ mờ:0.6;
rgb(255, 0, 0); độ mờ:0.8;

Lưu ý rằng văn bản trên cũng sẽ là trong suốt/không trong suốt!

Dưới đây là ví dụ về các yếu tố khác nhau với độ mờ:

Mô hình

#p1 {màu nền:rgb(255,0,0);độ mờ:0.6;}  /* Màu đỏ với độ mờ */
#p2 {màu nền:rgb(0,255,0);độ mờ:0.6;}  /* Màu xanh lá cây với độ mờ */
#p3 {màu nền:rgb(0,0,255);độ mờ:0.6;}  /* Màu xanh với độ mờ */

Thử trực tiếp