Thuộc tính CSS color được dùng để thay đổi màu văn bản của một phần tử. Chúng ta có thể chỉ định giá trị bằng tên màu chuẩn, rgb(), rgba(), hsl(), hsla() và giá trị hexadecimal.
Cú pháp
selector {
color: /* value */;
}
Ví dụ 1: Named color, hex, rgba, hsl
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px; width: 50px; float: right;
color: white; background-color: #2f5587;
}
p {
color: rgba(225, 5, 135, 0.7);
border: 2px solid #16c618;
box-shadow: 0 7px 0 5px hsl(90, 60%, 70%);
padding: 10px;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<div>This is it</div>
<p>Demo text is visible here.</p>
</body>
</html>
Ví dụ 2: nth-of-type(even) với dodgerblue
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(even) {
color: dodgerblue;
border: 6px groove #16c618;
padding: 4px;
box-shadow: inset -100px 0 5px red;
}
</style>
</head>
<body>
<h2>Learn Servlets</h2>
<ul>
<li>Java Servlets là chương trình chạy trên Web/Application server.</li>
<li>Java Servlets thường phục vụ cùng mục đích với CGI.</li>
<li>Servlets độc lập nền tảng vì viết bằng Java.</li>
</ul>
</body>
</html>
Tóm tắt các định dạng màu
/ * Tên màu */
color: red;
color: rebeccapurple;
color: transparent;
/ * Hex */
color: #ff0000;
color: #f00;
color: #ff000080; /* 8-digit với alpha */
/ * RGB / RGBA */
color: rgb(255, 0, 0);
color: rgb(255 0 0); /* Modern space-separated */
color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 0.5); /* Modern */
/ * HSL / HSLA */
color: hsl(0, 100%, 50%);
color: hsl(0 100% 50%); /* Modern */
color: hsla(0, 100%, 50%, 0.5);
color: hsl(0 100% 50% / 0.5);
/ * Modern Color Spaces (CSS Color 4/5) */
color: lab(50% 100 50);
color: lch(50% 100 50);
color: oklab(0.6 0.15 260);
color: oklch(0.6 0.2 260);
Kế thừa (Inheritance)
color được kế thừa — thiết lập trên body hoặc :root áp dụng cho toàn bộ trang trừ khi ghi đè.
currentColor
Từ khóa currentColor = giá trị color tính toán của phần tử. Dùng cho border, box-shadow, SVG fill:
.icon-button {
color: #0066cc;
border: 2px solid currentColor;
}
.icon-button svg { fill: currentColor; }
.icon-button:hover { color: #004499; } /* Tất cả đổi màu cùng lúc */
Accessibility: Contrast
Đảm bảo tỷ lệ đối比 (contrast ratio) giữa text và background:
- WCAG AA: ≥ 4.5:1 (text thường), ≥ 3:1 (large text ≥ 18pt hoặc 14pt bold)
- WCAG AAA: ≥ 7:1 (text thường), ≥ 4.5:1 (large text)
- Công cụ check: WebAIM Contrast Checker, DevTools Accessibility tab