HSL mô tả màu giống cách mọi người nói về màu: sắc nào, độ rực ra sao, độ sáng thế nào. Chuyển mã HEX sang HSL là cách nhanh nhất để có màu ở dạng bạn thực sự có thể điều chỉnh — làm sáng, làm mờ hay xây cả thang màu từ đó.
Cách chuyển HEX sang HSL hoạt động
- Chuyển mã HEX sang RGB và chia mỗi kênh cho 255, để cả ba nằm trong khoảng 0 đến 1.
- Tìm giá trị lớn nhất và nhỏ nhất trong ba giá trị đó. Trung bình của chúng là độ sáng L.
- Khoảng cách giữa chúng quyết định độ bão hòa S: chia nó cho (2 − max − min) với màu sáng, hoặc cho (max + min) với màu tối.
- Kênh giữ giá trị lớn nhất quyết định sắc H — đỏ ở 0°, xanh lá ở 120°, xanh dương ở 240° — và hai kênh còn lại xác định vị trí sắc trong đoạn đó.
Ví dụ minh hoạ
Toán học là chính xác, nhưng giá trị HSL thường được làm tròn về số độ và phần trăm nguyên. Việc chuyển ngược có thể lệch một hai bước RGB so với ban đầu — không thấy khác biệt trong thực tế, nhưng nên biết nếu bạn lặp đi lặp lại việc chuyển đổi màu.
HEX và HSL giải thích
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
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
Bảng tham chiếu HEX sang HSL
Các màu CSS phổ biến nhất, đã chuyển từ HEX sang HSL.
| Màu | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |