Làm thế nào để chỉ định màu trong CSS?

Question

Accepted Answer

CSS cung cấp nhiều định dạng màu. Chúng tạo ra cùng một màu — lựa chọn phụ thuộc vào tính dễ đọc và liệu bạn có cần độ trong suốt hay không.

```css
.a { color: red; }                      /* tên màu (~150 tên) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex kèm alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* với độ mờ 80% */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL kèm alpha */
```

## Tại sao HSL thường là hữu dụng nhất

HSL mô tả màu theo **H**ue (0–360° trên vòng tròn màu), **S**aturation (độ bão hòa), và **L**ightness (độ sáng) — ánh xạ với cách con người nghĩ về màu sắc, làm cho việc tạo biến thể trở nên trực quan:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* chỉ cần tăng lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* chỉ cần giảm nó */
```

Tạo một sắc độ sáng/tối hơn rất đơn giản — chỉ đổi một con số. Làm điều đó với hex hoặc rgb đòi hỏi phải tính lại toàn bộ các kênh màu.

## Alpha / độ trong suốt

```css
background: rgb(0 0 0 / 0.5); /* đen trong suốt 50% — dùng cho overlay */
```

Cú pháp `/ alpha` (0 = trong suốt, 1 = đục) là cách bạn tạo màu bán trong suốt, hữu ích cho overlay và shadow. (Lưu ý: `opacity` trên một phần tử làm mờ *toàn bộ* phần tử, kể cả phần con — màu alpha chỉ làm mờ riêng màu đó.)

## Các định dạng hiện đại

```css
color: oklch(70% 0.15 220); /* đồng đều về mặt cảm nhận; tốt hơn cho hệ thống màu */
```

## Tại sao điều này quan trọng

Biết các định dạng cho phép bạn chọn đúng công cụ: hex/rgb cho màu dùng một lần, **HSL/OKLCH cho design system** (biến thể sắc độ dễ và trực quan), và cú pháp `/ alpha` cho độ trong suốt.

HSL đặc biệt giúp việc xây dựng bảng màu nhất quán, có thể theme hóa dễ dàng hơn nhiều.