Chọn màu bằng HSL rất dễ chịu, nhưng stylesheet, bàn giao thiết kế và tài liệu thương hiệu vẫn chạy trên HEX. Bộ chuyển này lấp khoảng trống đó và cho bạn mã sáu chữ số tương ứng với bất kỳ kết hợp hue, saturation và lightness nào.
Cách chuyển HSL sang HEX hoạt động
- Chuyển phần trăm saturation và lightness thành số thập phân: 60% thành 0.6.
- Tính chroma C = (1 − |2L − 1|) × S — đó là khoảng cách của màu so với xám.
- Dùng hue để đặt chroma lên các kênh đỏ, xanh lá và xanh dương, rồi dịch cả ba kênh bởi L − C/2.
- Nhân mỗi kênh với 255, làm tròn và viết từng kênh dưới dạng hai chữ số thập lục phân.
Ví dụ minh hoạ
Làm tròn xảy ra một lần, ở bước cuối cùng, khi mỗi kênh bị chốt về giá trị nguyên 0–255. Kết quả là mã HEX gần nhất với đầu vào HSL của bạn và thường giống hệt thứ các công cụ thiết kế hiển thị.
HSL và HEX giải thích
HSL là gì?
HSL tách màu thành hue (0–360° trên vòng màu), saturation (mức độ màu, 0–100%) và lightness (độ sáng, 0–100%). Vì từng phần khớp với cách người ta mô tả màu, HSL là định dạng dễ nhất để tạo tints, shades và palette nhất quán — bằng tay hoặc trong code.
- Cú pháp:
- hsl(H, S%, L%)
- Phạm vi:
- 0–360°, 0–100%, 0–100%
- Phù hợp cho:
- palette, tints và shades, theming
HEX là gì?
Mã HEX là một số thập lục phân sáu chữ số lưu trữ kênh đỏ, xanh lá và xanh dương của một màu sau dấu # đứng trước. Mỗi cặp ký tự tương ứng một kênh, từ 00 (không) đến FF (đầy), cho cùng ~16.7 triệu màu như RGB nhưng ngắn gọn hơn. HEX là mặc định trong CSS, công cụ thiết kế và hướng dẫn thương hiệu.
- Cú pháp:
- #RRGGBB
- Phạm vi:
- 00–FF mỗi kênh
- Phù hợp cho:
- CSS, bàn giao thiết kế, hướng dẫn thương hiệu
Bảng tham chiếu HSL sang HEX
Các màu CSS phổ biến nhất, đã chuyển từ HSL sang HEX.
| Màu | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |