Chuyển Đổi RGB Sang HSL

Công cụ chuyển RGB sang HSL biến các giá trị RGB như rgb(59, 130, 246) thành giá trị HSL như hsl(217, 91%, 60%). Cả hai cùng mô tả một màu, nhưng RGB làm điều đó qua ba kênh ánh sáng, còn HSL mô tả nó bằng Sắc độ, Độ bão hòa và Độ sáng — cách tinh chỉnh và biến đổi màu trực quan hơn nhiều.

Chuyển RGB sang HSL là bước đầu tiên khi bạn muốn làm sáng, làm tối hay giảm độ bão hòa của màu bằng lập trình — những thao tác này rất dễ trong HSL nhưng vụng về trong RGB thô.

Vì sao nên chuyển sang HSL

Điều chỉnh độ sáng

Chỉ đổi độ sáng để tạo các trạng thái hover, active và disabled nhất quán từ một màu gốc.

Kiểm soát độ rực rỡ

Chỉnh độ bão hòa để màu nổi bật hơn hoặc làm dịu lại cho các nền tinh tế.

Bảng màu hài hòa

Dịch chuyển sắc độ theo các bước đều nhau để tạo bảng màu tương phản hoặc tương đồng.

Cách chuyển RGB sang HSL

Nhập giá trị RGB

Gõ ba kênh của bạn — ví dụ 59, 130, 246. Dùng dấu phẩy hay dấu cách đều được, và bạn có thể bọc giá trị trong rgb(...) nếu muốn.

Xem kết quả HSL

Giá trị HSL được tính ngay khi bạn gõ, và ô màu trực tiếp cập nhật để bạn kiểm tra màu bằng mắt.

Hoặc chọn màu

Bấm vào ô màu để mở bộ chọn màu của trình duyệt và chọn màu bằng mắt — các ô RGB và HSL sẽ tự cập nhật.

Sao chép & dùng lại

Sao chép chuỗi hsl() thẳng vào CSS của bạn. Bảng bên dưới cũng hiển thị HEX, RGB, HSV và CMYK.

Tính năng

RGB và HSL

RGB

Ba kênh ánh sáng

Khớp với cách màn hình phát ra màu
Khó "làm sáng" mà không lệch sắc độ
Giá trị 0–255 mỗi kênh

HSL

Mô hình thân thiện với con người

Độ sáng và độ bão hòa là hai núm riêng
Dễ tạo màu nhạt, màu đậm và bảng màu
Sắc độ 0–360°, S và L 0–100%

Kết quả thời gian thực

Kết quả cập nhật ngay khi bạn gõ, hoàn toàn trong trình duyệt.

Tất cả định dạng cùng lúc

HEX, RGB, HSL, HSV và CMYK hiển thị cùng nhau cho mỗi màu.

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

RGB và HSL khác nhau thế nào?

RGB xác định màu bằng cách pha trộn ánh sáng đỏ, lục, lam. HSL xác định cùng màu đó qua sắc độ (loại màu), độ bão hòa (độ rực) và độ sáng (độ sáng) — một cách sắp xếp lại cùng dữ liệu theo những thuật ngữ trực quan hơn.

Khi nào nên dùng HSL?

Dùng HSL khi bạn cần tạo các biến thể màu — sắc sáng hơn hoặc tối hơn, hoặc phiên bản rực hơn hay dịu hơn — mà không đổi sắc độ gốc. Rất hợp cho chủ đề và các trạng thái giao diện.

Phép chuyển đổi có chính xác không?

Có. Phép toán chính xác; cùng một RGB luôn cho cùng một HSL. Giá trị HSL được làm tròn về số nguyên cho dễ đọc, nên khi chuyển qua lại có thể lệch một đơn vị nhưng nhìn vẫn giống hệt.

Giá trị RGB nào là hợp lệ?

Mỗi trong ba kênh phải là số nguyên từ 0 đến 255. Nhập chúng ngăn cách bằng dấu phẩy hoặc dấu cách, có hoặc không có vỏ bọc rgb().

Tôi có thể dán đầu ra HSL thẳng vào CSS không?

Có. Đầu ra dùng cú pháp chuẩn hsl(h, s%, l%) mà mọi trình duyệt hiện đại đều hỗ trợ, nên đưa thẳng vào tệp style được.