Giá trị màu hợp pháp CSS
Màu CSS
Màu trong CSS có thể được chỉ định bằng các phương pháp sau:
- Màu hệ thập lục phân
- Màu thập lục phân với độ trong suốt
- Màu sắc RGB
- Màu RGBA
- Màu HSL
- Màu HSLA
- Tên màu được xác định trước / trên nhiều trình duyệt
- Với
currentcolortừ khóa
Màu thập lục phân
Màu thập lục phân được chỉ định bằng: #RRGGBB, trong đó các số nguyên thập lục phân RR (đỏ), GG (xanh lục) và BB (xanh lam) chỉ định các thành phần của màu. Tất cả các giá trị phải từ 00 đến FF.
Ví dụ: giá trị # 0000ff được hiển thị là màu xanh lam, vì thành phần màu xanh lam được đặt thành giá trị cao nhất (ff) và các thành phần khác được đặt thành 00.
Thí dụ
Xác định các màu HEX khác nhau:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Màu thập lục phân với độ trong suốt
Màu thập lục phân được chỉ định bằng: #RRGGBB. Để thêm độ trong suốt, hãy thêm hai chữ số bổ sung giữa 00 và FF.
Thí dụ
Xác định các màu HEX khác nhau với độ trong suốt:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Màu sắc RGB
Giá trị màu RGB được chỉ định bằng hàm rgb () , có cú pháp sau:
rgb(red, green, blue)
Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu và có thể là một số nguyên từ 0 đến 255 hoặc một giá trị phần trăm (từ 0% đến 100%).
Ví dụ: giá trị rgb (0,0,255) được hiển thị dưới dạng màu xanh lam, vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các thông số khác được đặt thành 0.
Ngoài ra, các giá trị sau xác định màu bằng nhau: rgb (0,0,255) và rgb (0%, 0%, 100%).
Thí dụ
Xác định các màu RGB khác nhau:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Màu RGBA
Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ của đối tượng.
Màu RGBA được chỉ định bằng hàm rgba () , có cú pháp sau:
rgba(red, green, blue, alpha)
Tham số alpha là một số trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).
Thí dụ
Xác định các màu RGB khác nhau với độ mờ:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Màu HSL
HSL là viết tắt của màu sắc, độ bão hòa và độ đậm nhạt - và thể hiện sự thể hiện tọa độ hình trụ của màu sắc.
Giá trị màu HSL được chỉ định bằng hàm hsl () , có cú pháp sau:
hsl(hue, saturation, lightness)
Hue là một độ trên bánh xe màu (từ 0 đến 360) - 0 (hoặc 360) là màu đỏ, 120 là xanh lục, 240 là xanh lam. Độ bão hòa là một giá trị phần trăm; 0% có nghĩa là màu xám và 100% là màu đầy đủ. Độ sáng cũng là một tỷ lệ phần trăm; 0% là màu đen, 100% là màu trắng.
Thí dụ
Xác định các màu HSL khác nhau:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Màu HSLA
Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh alpha - chỉ định độ mờ của đối tượng.
Giá trị màu HSLA được chỉ định bằng hàm hsla () , có cú pháp sau:
hsla(hue, saturation, lightness, alpha)
Tham số alpha là một số trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).
Thí dụ
Xác định các màu HSL khác nhau với độ mờ:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Tên màu được xác định trước / trên nhiều trình duyệt
140 tên màu được xác định trước trong đặc tả màu HTML và CSS.
Ví dụ : ,,,, bluev.v .:redcoralbrown
Thí dụ
Xác định các tên màu khác nhau:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Bạn có thể tìm thấy danh sách tất cả các tên được xác định trước trong Tham khảo Tên Màu của chúng tôi .
Từ khóa màu hiện tại
Từ currentcolorkhóa đề cập đến giá trị thuộc tính màu của một phần tử.
Thí dụ
Màu đường viền của phần tử <div> sau sẽ là màu xanh lam vì màu văn bản của phần tử <div> là màu xanh lam:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}