Giá trị màu pháp lý CSS
Màu CSS
Màu sắc trong CSS có thể được chỉ định bằng các phương pháp sau:
- Màu thập lục phân
- Màu thập lục phân có độ trong suốt
- Màu RGB
- Màu RGBA
- Màu sắc HSL
- Màu sắc HSLA
- Tên màu được xác định trước/đa trình duyệt
- Với từ khóa
currentcolor
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 nằm trong khoảng 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.
Ví 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 */
Hãy tự mình thử »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 từ 00 đến FF.
Ví 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 */
Hãy tự mình thử »Màu 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à số nguyên trong khoảng từ 0 đến 255 hoặc giá trị phần trăm (từ 0% đến 100%).
Ví dụ: giá trị rgb(0,0,255) được hiển thị là màu xanh lam, vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các tham 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%).
Ví 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 */
Hãy tự mình thử » Màu RGBA
Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh alpha - kênh này 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ố nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
Ví 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 */
Hãy tự mình thử »Màu HSL
HSL là viết tắt của màu sắc, độ bão hòa và độ sáng - và thể hiện sự biểu diễ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à đỏ, 120 là xanh lá cây, 240 là xanh lam. Độ bão hòa là giá trị phần trăm; 0% có nghĩa là màu xám và 100% là màu đầy đủ. Độ nhẹ cũng là một tỷ lệ phần trăm; 0% là đen, 100% là trắng.
Ví 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 */
Hãy tự mình thử »Màu sắc HSLA
Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha - kênh này 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ố nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).
Ví 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 */
Hãy tự mình thử »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ụ: blue , red , coral , brown , v.v.:
Ví dụ
Xác định tên màu khác nhau:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;} Hãy tự mình thử »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 Tài liệu tham khảo tên màu của chúng tôi.
Từ khóa màu hiện tại
Từ khóa currentcolor đề cập đến giá trị thuộc tính màu của một phần tử.
Ví 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 */
} Hãy tự mình thử »