CSS color Property: Thiết lập màu sắc

Chúng ta có thể định nghĩa màu cho văn bản, border và background của các phần tử bằng CSS. Thuộc tính color được dùng để chỉ định màu văn bản cho một phần tử.

Cú pháp

selector {
    color: /* value */;
}

Ví dụ 1: Color + Background-color trên div lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
div {
    color: seashell;
    background-color: lightcoral;
    padding: 20px; margin: 20px auto;
    max-width: 500px;
}
p {
    font-size: 1.5em;
    color: blue;
    background-color: palegreen;
    box-shadow: 0 0 5px 1px rgb(0,0,0);
    padding: 10px;
}
</style>
</head>
<body>
<div>
    This is demo text.
    <p> Text added for reference. </p>
    This is demo text 2.
</div>
</body>
</html>

Ví dụ 2: Color trên heading và paragraph

<!DOCTYPE html>
<html>
<head>
<style>
* { text-align: center; }
h3 {
    color: red;
    border: 2px ridge rosybrown;
    padding: 1rem;
}
p {
    color: royalblue;
    background-color: cornsilk;
    box-shadow: 0 0 5px 1px deeppink;
    padding: 1rem;
}
</style>
</head>
<body>
<h3>Demo Demo Demo Demo</h3>
<p>Demo text here</p>
</body>
</html>

Các cách viết màu (Color Formats)

Format	Ví dụ	Hỗ trợ
Named color	`red`, `rebeccapurple`, `transparent`	Tất cả trình duyệt
Hex 6-digit	`#ff0000`, `#0066cc`	Tất cả
Hex 3-digit	`#f00`, `#06c`	Tất cả
Hex 8-digit (alpha)	`#ff000080` (50% opacity)	Modern browsers
RGB	`rgb(255, 0, 0)`	Tất cả
RGBA	`rgba(255, 0, 0, 0.5)`	Tất cả
HSL	`hsl(0, 100%, 50%)`	Modern
HSLA	`hsla(0, 100%, 50%, 0.5)`	Modern
Modern space-separated	`rgb(255 0 0 / 0.5)`, `hsl(0 100% 50% / 0.5)`	CSS Color 4
Lab/LCH/OKLab/OKLCH	`lab(50% 100 50)`, `oklch(0.6 0.2 260)`	CSS Color 4/5

color vs background-color vs border-color

color: Màu văn bản, cũng là giá trị mặc định cho border-color, outline-color, text-decoration-color, currentColor
background-color: Màu nền
border-color: Màu viền (mặc định = currentColor)

CSS Custom Properties cho Color System

:root {
    --color-primary: #0066cc;
    --color-primary-hover: #004499;
    --color-text: #1a1a1a;
    --color-text-muted: #666;
    --color-background: #ffffff;
    --color-surface: #f8f9fa;
    --color-border: #dee2e6;
    --color-error: #dc3545;
    --color-success: #28a745;
}

body { color: var(--color-text); background: var(--color-background); }
a { color: var(--color-primary); }
.btn-primary { background: var(--color-primary); color: white; }