color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính color trong CSS thiết lập giá trị màu sắc cho phần tử nền trước (foreground) bao gồm văn bản và trang trí văn bản, đồng thời thiết lập giá trị currentColor. currentColor có thể được dùng làm giá trị gián tiếp trên các thuộc tính khác và là giá trị mặc định cho các thuộc tính màu sắc khác, chẳng hạn như border-color.
Để có cái nhìn tổng quan về việc sử dụng màu sắc trong HTML, hãy xem Áp dụng màu sắc cho các phần tử HTML bằng CSS.
Try it
color: rebeccapurple;
color: #00a400;
color: rgb(214 122 127);
color: hsl(30deg 82% 43%);
color: hsl(237deg 74% 33% / 61%);
color: hwb(152deg 0% 58% / 70%);
<section id="default-example">
<div class="example-container">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather.
</p>
</div>
</section>
#example-element {
font-size: 1.5em;
}
.example-container {
background-color: white;
padding: 10px;
}
Cú pháp
/* Giá trị từ khóa */
color: currentColor;
/* Giá trị <named-color> */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* Giá trị <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* Giá trị <rgb()> và giá trị kế thừa <rgba()> */
color: rgb(34, 12, 64);
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);
/* Giá trị <hsl()> và giá trị kế thừa <hsla()> */
color: hsl(30, 100%, 50%);
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* Giá trị <hwb()> */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);
/* Giá trị toàn cục */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
Thuộc tính color được chỉ định dưới dạng một giá trị <color> duy nhất.
Lưu ý rằng giá trị phải là một màu đồng nhất. Không thể là một <gradient>, vốn thực ra là một loại <image>.
Giá trị
<color>-
Thiết lập màu sắc cho các phần văn bản và trang trí của phần tử.
currentColor-
Thiết lập màu sắc theo giá trị thuộc tính
colorcủa phần tử. Tuy nhiên, nếu được đặt làm giá trị củacolor,currentColorsẽ được xử lý nhưinherit.
Khả năng truy cập
Điều quan trọng là phải đảm bảo tỷ lệ tương phản giữa màu của văn bản và nền mà văn bản được đặt lên đủ cao để những người có thị lực kém có thể đọc được nội dung của trang.
Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng (luminosity) của các giá trị màu văn bản và màu nền. Để đáp ứng Hướng dẫn khả năng truy cập nội dung web (WCAG) hiện hành, cần có tỷ lệ 4.5:1 đối với nội dung văn bản và 3:1 đối với văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 18.66px và đậm trở lên, hoặc 24px trở lên.
Định nghĩa chính thức
| Initial value | canvastext |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | computed color |
| Animation type | by computed value type |
Cú pháp chính thức
color =
<color>
Ví dụ
Làm cho văn bản có màu đỏ
Dưới đây là tất cả các cách để làm cho văn bản của đoạn văn có màu đỏ:
p {
color: red;
}
p {
color: #f00;
}
p {
color: #ff0000;
}
p {
color: rgb(255 0 0);
}
p {
color: rgb(100% 0% 0%);
}
p {
color: hsl(0 100% 50%);
}
/* 50% trong suốt */
p {
color: #ff000080;
}
p {
color: rgb(255 0 0 / 50%);
}
p {
color: hsl(0 100% 50% / 50%);
}
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Color Module Level 4 # the-color-property |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |
Tương thích trình duyệt
Xem thêm
- Kiểu dữ liệu
<color> - Các thuộc tính liên quan đến màu sắc khác:
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-color, vàprint-color-adjust - Thuộc tính SVG
color - Hàm
color() - Áp dụng màu sắc cho các phần tử HTML bằng CSS
- WCAG: color contrast