Mã HEX và HSL: Tại sao trang chuyển đổi này tồn tại?
Trang chuyển đổi hex-to-hsl cho phép bạn nhập một mã màu hex – dạng sáu ký tự như #1E90FF hoặc dạng viết tắt ba ký tự như #abc – và trả về ngay giá trị HSL tương ứng (hue tính bằng độ, saturation và lightness tính bằng phần trăm). Đồng thời, trang hiển thị màu đó ở tất cả các định dạng được hỗ trợ khác (HEX, RGB, HSV, CMYK, LAB), giúp bạn sao chép bất kỳ định dạng nào cần.
Điểm khác biệt cốt lõi: HEX là ký hiệu RGB thô. Sáu chữ số thập lục phân (hoặc ba chữ số viết tắt) mã hóa trực tiếp ba thành phần đỏ, lục và lam. Nó gọn nhẹ và được dùng phổ biến trong CSS và công cụ thiết kế, nhưng không trực quan cho việc điều chỉnh màu sắc theo cách con người suy nghĩ. HSL được xây dựng để con người suy luận: hue đo bằng độ (0–360), saturation và lightness là phần trăm. Chỉ cần thay đổi lightness giữ nguyên hue, vì thế HSL là định dạng ưa chuộng để tạo bảng màu và hệ thống chủ đề.
Trang này không xử lý kênh alpha – HEX tiêu chuẩn (sáu hoặc ba chữ số) không mang thông tin độ trong suốt, và HSL cũng không có thành phần alpha. Chuyển đổi luôn làm việc với màu hoàn toàn đục. Tất cả chuyển đổi diễn ra trong trình duyệt của bạn – không có dữ liệu nào được tải lên hoặc lưu trữ.
Mã HEX: Cấu trúc và giới hạn của ký hiệu RGB thô
Mã màu HEX biểu diễn màu sắc trong hệ thập lục phân (cơ số 16). Dạng đầy đủ sáu ký tự, ví dụ #4f46e5, được chia làm ba cặp: 4f (đỏ), 46 (lục), e5 (lam). Mỗi cặp có giá trị từ 00 đến FF, tương ứng 0 đến 255 trong hệ thập phân. Dạng viết tắt ba ký tự như #abc được mở rộng thành #aabbcc – mỗi ký tự lặp lại. Vì vậy #abc tương đương #aabbcc.
Trang chỉ chấp nhận mã hex hợp lệ: sáu hoặc ba ký tự, có hoặc không có dấu # ở đầu. Nếu nhập giá trị không hợp lệ, trang hiển thị thông báo lỗi: “Nhập mã hex như #4f46e5 hoặc #abc.”
Hạn chế của HEX: không trực quan. #4f46e5 là màu gì? Mắt người không dễ suy ra sắc thái, độ bão hòa hay độ sáng từ các chữ số thập lục phân. Để điều chỉnh sáng hơn, bạn phải tăng cả ba thành phần RGB một cách thủ công, dễ sai lệch. Đó là lý do các nhà phát triển front‑end và UI/UX designer thường chuyển sang HSL.
HSL: Mô hình màu dành cho suy luận của con người
HSL là viết tắt của Hue (sắc thái), Saturation (độ bão hòa), Lightness (độ sáng).
- Hue (0–360°): vị trí trên vòng tròn màu. 0° là đỏ, 120° là xanh lục, 240° là xanh lam, 360° quay về đỏ.
- Saturation (0–100%): độ tinh khiết của màu. 0% là xám hoàn toàn, 100% là màu thuần khiết nhất.
- Lightness (0–100%): độ sáng từ đen (0%) đến trắng (100%). 50% là màu “chuẩn” không quá tối cũng không quá sáng.
Ví dụ: #4f46e5 chuyển thành hsl(243°, 75%, 58%). Con số 243° cho biết màu nằm giữa xanh lam (240°) và tím (270°). 75% saturation chỉ màu rất rực, và 58% lightness là hơi sáng hơn trung bình.
HSL cho phép bạn thay đổi lightness từ 58% lên 70% để tạo màu hover mà vẫn giữ nguyên hue và saturation. Với HEX, bạn phải tính lại các giá trị thập lục phân; với HSL, chỉ cần sửa một con số. Đây là lý do HSL được dùng làm nền tảng cho việc tạo bảng màu bổ sung, tương đồng hoặc đơn sắc.
Phép toán chuyển đổi HEX sang HSL
Bước 1: Giải mã HEX thành RGB thập phân. Với #4f46e5:
4f(hex) = 79 (thập phân)46= 70e5= 229
Vậy RGB = (79, 70, 229).
Bước 2: Chuẩn hóa các giá trị về tỷ lệ 0–1: R = 79/255 ≈ 0.3098, G = 70/255 ≈ 0.2745, B = 229/255 ≈ 0.8980.
Bước 3: Tìm giá trị lớn nhất (max) và nhỏ nhất (min) trong ba số. Ở đây max = B ≈ 0.8980, min = G ≈ 0.2745. Tính delta = max – min ≈ 0.6235.
Bước 4: Tính Lightness: L = (max + min) / 2 ≈ (0.8980 + 0.2745) / 2 ≈ 0.5863, tức 58.6%, làm tròn 58%.
Bước 5: Nếu delta = 0 (màu xám), saturation = 0. Nếu không:
- Saturation = delta / (1 – |2L – 1|) = 0.6235 / (1 – |2×0.5863 – 1|) = 0.6235 / (1 – 0.1726) = 0.6235 / 0.8274 ≈ 0.7535, tức 75.4%, làm tròn 75%.
Bước 6: Tính Hue (độ). Nếu max là B (như trường hợp này):
- Hue = 240 + ((R – G) / delta) × 60 = 240 + ((0.3098 – 0.2745) / 0.6235) × 60 = 240 + (0.0353 / 0.6235) × 60 ≈ 240 + 3.4 ≈ 243.4°, làm tròn 243°.
Kết quả: hsl(243°, 75%, 58%). Trang tính toán chính xác với độ chính xác thập phân đầy đủ, sau đó làm tròn đến phần nguyên.
Các trường hợp đặc biệt và xử lý lỗi
Mã hex không hợp lệ: Nếu bạn nhập #xyz hoặc #1234567, trang ngay lập tức hiển thị thông báo lỗi: “Nhập mã hex như #4f46e5 hoặc #abc.” Không có chuyển đổi nào được thực hiện. Trang chỉ chấp nhận đúng sáu hoặc ba ký tự hex (0–9, a–f, A–F), tùy chọn có dấu #.
Mã hex viết tắt: #abc tự động mở rộng thành #aabbcc trước khi chuyển đổi. Kết quả HSL và các định dạng khác đều hiển thị dựa trên giá trị mở rộng.
Không có kênh alpha: HEX tiêu chuẩn không chứa thông tin độ trong suốt. Trang không hỗ trợ mã hex 8 ký tự (dạng #RRGGBBAA). Nếu bạn cần màu có alpha, hãy dùng định dạng RGBA hoặc HSLA – nhưng trang này chỉ xử lý màu đục.
Chuyển đổi ngoài gam màu: Khi bạn nhập một giá trị màu ở không gian khác (ví dụ CMYK hoặc LAB) vượt quá gam màu hiển thị của màn hình, trang sẽ tự động điều chỉnh màu đó về màu hiển thị gần nhất. Khi chuyển đổi ngược lại về hex, giá trị có thể bị sai lệch nhẹ so với ban đầu. Đây là hành vi chuẩn của các công cụ chuyển đổi màu – không phải lỗi.
CMYK chỉ là ước tính trên màn hình: Các giá trị CMYK hiển thị trên trang không chính xác cho in ấn chuyên nghiệp. In offset có các yếu tố như loại giấy, mực, màn hình không thể hiện được. Chỉ dùng tham khảo.
Ứng dụng thực tế của HSL trong phát triển web và thiết kế
Tạo biến CSS: HSL dễ dùng trong hsl(hue, saturation, lightness) hoặc hsla(hue, saturation, lightness, alpha). Ví dụ:
:root {
--primary-h: 243;
--primary-s: 75%;
--primary-l: 58%;
}
.btn-primary { background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); }
.btn-primary:hover { background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%)); }
Chỉ cần thay đổi lightness 10% là có màu hover mà không ảnh hưởng sắc thái.
Kiểm tra độ tương phản WCAG: Các nhà kiểm tra khả năng tiếp cận web thích HSL vì lightness trực tiếp liên quan đến độ chói. Để đạt tỷ lệ tương phản 4.5:1 cho văn bản nhỏ, bạn có thể tăng lightness của nền sáng hoặc giảm lightness của chữ tối, giữ nguyên hue.
Tạo bảng màu động: Các thư viện như Tailwind, Material Design dùng HSL để sinh dải màu. Từ màu chính (ví dụ hsl(243, 75%, 58%)), bạn tạo 9 cấp độ lightness: 10%, 20%, …, 90%. Kết quả là một gradient màu đồng nhất.
Chuyển đổi qua lại giữa các định dạng: Khi nhận mã hex từ mockup, designer dùng trang này để lấy ngay giá trị HSV, LAB, CMYK để đồng bộ với phần mềm đồ họa. Tất cả hiển thị cùng lúc, không cần chuyển đổi thủ công.
So sánh HSL với các mô hình màu khác
| Mô hình | Thành phần | Ưu điểm chính | Hạn chế chính |
|---|---|---|---|
| HEX | R, G, B (hex) | Gọn, phổ biến trong CSS | Không trực quan, khó điều chỉnh |
| RGB | R, G, B (0–255) | Chuẩn kỹ thuật | Giống HEX, không phản ánh nhận thức |
| HSL | H, S, L (độ, %, %) | Trực quan cho con người | Không có kênh alpha, không dùng trong in |
| HSV | H, S, V (độ, %, %) | Hữu ích khi chọn màu trong phần mềm đồ họa | Lightness không cùng thang với HSL |
| CMYK | C, M, Y, K (%) | Dùng trong in ấn | Không hiển thị chính xác trên màn hình |
| LAB | L, a, b (thiết bị độc lập) | Đo lường màu chính xác | Ít dùng trong web, khó suy luận |
Điểm khác biệt giữa HSL và HSV: cả hai đều dùng hue, nhưng saturation và brightness (HSV) vs. lightness (HSL) được định nghĩa khác nhau. Trong HSV, V = max(R,G,B), trong HSL, L = (max+min)/2. Với màu thuần (saturation 100%, V=100%), HSL thường có lightness 50%, trong khi HSV có V=100%. Trang này hiển thị đầy đủ cả hai định dạng để bạn chọn phù hợp.
Câu hỏi thường gặp (FAQ)
1. Tại sao tôi nhập mã hex #fff nhưng kết quả HSL lại là hsl(0°, 0%, 100%)?
Đúng. #fff là màu trắng tinh – hue không xác định (quy ước 0°), saturation 0%, lightness 100%. Tất cả các màu xám đều có saturation = 0% và hue tùy ý (thường 0°).
2. Trang có hỗ trợ mã hex 8 ký tự với kênh alpha không?
Không. Trang chỉ xử lý mã hex sáu hoặc ba ký tự, không có alpha. Nếu nhập #4f46e580, trang sẽ báo lỗi vì không đúng định dạng.
3. Sự khác biệt giữa HSL và HSLA là gì?
HSLA thêm kênh alpha (trong suốt). Trang này không chuyển đổi sang HSLA vì HEX nguồn không có alpha – kết quả HSL luôn tương ứng với alpha = 1 (hoàn toàn đục). Bạn có thể tự thêm alpha khi dùng trong CSS.
4. Khi tôi nhập giá trị CMYK vượt quá gam màu, trang làm gì?
Trang tự động điều chỉnh màu về màu hiển thị gần nhất trong không gian RGB. Kết quả hex và HSL sẽ tương ứng với màu đã điều chỉnh đó, không phải CMYK gốc. Giá trị CMYK hiển thị là ước tính từ màu điều chỉnh.
5. Tôi có thể sao chép trực tiếp giá trị HSL từ trang này để dùng trong CSS không?
Có. Trang hiển thị giá trị HSL dưới dạng hsl(243°, 75%, 58%) – bạn chỉ cần copy và dán vào stylesheet. Đảm bảo không có khoảng trắng thừa.
6. Trang có lưu lại lịch sử chuyển đổi không?
Không. Tất cả tính toán diễn ra trong trình duyệt của bạn; không có dữ liệu nào được tải lên máy chủ. Mỗi lần tải trang hoặc đóng tab là mất hết thông tin.