Công cụ chuyển đổi HEX sang HSL cho màu CSS | My-DevTools
Hãy dùng công cụ chuyển đổi HEX sang HSL này để xem giá trị HSL của màu ngay khi gõ, hoặc chỉnh sửa từng phía và xem phía còn lại cập nhật trực tiếp. Công cụ cũng chấp nhận dữ liệu nhập màu linh hoạt như #abc, rgb(1 2 3 / 50%) và tên màu. Hãy kiểm tra mẫu màu, sao chép dòng CSS dùng ngay được và xem cảnh báo ngoài dải màu cho các màu ngoài sRGB.
HEX sang HSL là công cụ chuyển đổi màu chạy trong trình duyệt dành cho lập trình viên cần chuyển đổi giữa giá trị thập lục phân và HSL. Hãy nhập màu HEX để xem giá trị HSL tương đương, hoặc chỉnh sửa từng phía và phía còn lại cập nhật trực tiếp. Công cụ cũng chấp nhận dữ liệu nhập linh hoạt như #abc, rgb(1 2 3 / 50%) và tên màu, đồng thời hiển thị mẫu màu, dòng CSS dùng ngay được và cảnh báo ngoài dải màu khi màu nằm ngoài sRGB.
Phép chuyển đổi trình bày cùng một màu bằng hai ký hiệu khác nhau. HEX biểu diễn màu bằng các thành phần thập lục phân, còn HSL mô tả màu theo sắc độ, độ bão hòa và độ sáng. Với chức năng chỉnh sửa trực tiếp hai chiều, bạn có thể thay đổi từng dạng biểu diễn và kiểm tra giá trị đã cập nhật ở phía còn lại. Mẫu màu giúp bạn kiểm tra màu trực quan, và dòng CSS sẵn sàng để sao chép vào mã nguồn.
Việc chuyển đổi giữa HEX và HSL hữu ích khi dự án, hệ thống hoặc tài liệu yêu cầu một định dạng thay vì định dạng còn lại. Ví dụ, bạn có thể biến giá trị thập lục phân thành HSL cho quy trình chấp nhận HSL, hoặc so sánh giá trị HSL với đối tác thập lục phân của nó. Công cụ cũng giúp bạn chuẩn bị giá trị màu cho tài liệu, ticket và code review.
HEX sang HSL chạy hoàn toàn trong trình duyệt của bạn: dữ liệu nhập được xử lý trên thiết bị của bạn và không bị tải lên, lưu trữ hay gửi tới máy chủ. Công cụ không yêu cầu đăng ký, và sau khi trang đã tải xong, quá trình chuyển đổi hoạt động ngoại tuyến. Nhờ đó công cụ hữu ích cho lập trình viên và kỹ sư DevOps muốn cách nhanh, riêng tư để kiểm tra hoặc chuyển đổi màu mà không phụ thuộc kết nối máy chủ.
Bước 1: Nhập hoặc dán màu vào ô nhập. Thập lục phân là định dạng mong đợi, và bộ phân tích cũng nhận ra các ví dụ như #abc, rgb(1 2 3 / 50%) và tên màu.
Bước 2: Chỉnh sửa giá trị HEX hoặc HSL. Phía còn lại cập nhật trực tiếp, nên bạn có thể so sánh hai dạng biểu diễn khi làm việc.
Bước 3: Xem lại mẫu màu để kiểm tra trực quan màu sắc. Nếu màu nằm ngoài sRGB, công cụ hiển thị cảnh báo ngoài dải màu.
Bước 4: Sao chép dòng CSS dùng ngay được khi bạn cần dùng màu đã chuyển đổi trong mã nguồn.
Bước 5: Điều chỉnh các tùy chọn hiện có nếu cần, rồi kiểm tra kết quả hiển thị trước khi sao chép.
Trường hợp sử dụng: Chuyển màu thập lục phân vào hệ thống chỉ chấp nhận HSL. Phép chuyển đổi trực tiếp cho bạn giá trị để sao chép mà không cần tự tính.
Trường hợp sử dụng: Kiểm tra xem giá trị HSL có khớp với bản gốc thập lục phân bạn nhận được không. Chỉnh sửa từng phía sẽ cập nhật phía còn lại, giúp bạn dễ so sánh.
Trường hợp sử dụng: Chuẩn bị đoạn mã màu thập lục phân hoặc HSL cho tài liệu, ticket hoặc thông điệp commit. Dòng CSS dùng ngay được giúp giá trị vẫn dùng được trong mã nguồn.
Trường hợp sử dụng: Kiểm tra nhanh phép chuyển đổi màu trước khi dán kết quả vào stylesheet. Mẫu màu giúp kiểm tra trực quan bên cạnh các giá trị màu.
Trường hợp sử dụng: Kiểm tra màu có thể nằm ngoài sRGB trước khi dùng giá trị đã chuyển đổi. Cảnh báo ngoài dải màu thu hút sự chú ý vào tình trạng đó.
Trường hợp sử dụng: Làm việc với dữ liệu nhập màu được sao chép ở dạng được hỗ trợ khác, ví dụ giá trị rgb() hoặc tên màu. Bộ phân tích linh hoạt giúp tiết kiệm thời gian khi dữ liệu nhập không viết ở dạng thập lục phân.