AbraCalc

Công cụ Chuyển đổi Màu Hex sang HSL

Chuyển đổi mã màu hex CSS sang HSL (hue, saturation, lightness) chỉ trong một cú nhấp chuột.

Bởi · Kiểm tra bởi AbraCalc Methodology Review · 2 nguồn

Nhúng công cụ này vào trang của bạn
Trích dẫn công cụ này

APA

AbraCalc. (2026). Công cụ Chuyển đổi Màu Hex sang HSL [Online calculator]. Retrieved from https://abracalc.com/vi/doi-hex-sang-hsl/

BibTeX

@misc{abracalc-doi-hex-sang-hsl, author = {AbraCalc}, title = {Công cụ Chuyển đổi Màu Hex sang HSL}, year = {2026}, howpublished = {\url{https://abracalc.com/vi/doi-hex-sang-hsl/}} }

Công cụ này có trả lời được câu hỏi của bạn không?

Cách dùng công cụ này

  1. Nhập mã màu hex 6 chữ số (ví dụ #ff5733). Dấu # ở đầu là tùy chọn.
  2. Công cụ chuyển đổi nó sang HSL: sắc độ tính bằng độ, độ bão hòa và độ sáng tính bằng phần trăm.
  3. Sao chép chuỗi hsl() vào CSS hoặc stylesheet của bạn.

Dán mã màu hex và nhận giá trị HSL tương ứng để dùng trong hàm CSS hsl() hoặc công cụ thiết kế.

Công thức

Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.

Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.

Câu hỏi thường gặp

Tại sao nên chuyển đổi hex sang HSL?
HSL dễ suy luận hơn khi điều chỉnh độ sáng hoặc độ bão hòa. Bạn có thể giữ nguyên sắc độ và tinh chỉnh độ bão hòa/độ sáng để tạo tint và shade.
Công cụ này có hỗ trợ hex 3 chữ số không?
Có — #abc được xử lý như #aabbcc.

Tài liệu tham khảo và nguồn