CodeKitHubCông Cụ Này Là Gì?
Màu sắc trên web được viết theo nhiều định dạng tương đương nhau. HEX (#4f46e5) là dạng gọn dùng khắp nơi trong CSS và khi bàn giao thiết kế. RGB (rgb(79, 70, 229)) nêu trực tiếp các thành phần đỏ, xanh lá, xanh dương mà mã nguồn thường cần. HSL (hsl(243, 75%, 59%)) mô tả sắc độ, độ bão hòa và độ sáng — định dạng trực quan nhất khi muốn chỉnh một màu, chẳng hạn làm tối hơn hoặc bớt bão hòa.
Cả ba đều mô tả cùng một màu; công cụ này chuyển đổi giữa chúng chính xác tuyệt đối và hiển thị xem trước để bạn xác nhận đó đúng là màu bạn muốn.
Tại Sao Nên Dùng?
- Nhận mọi định dạng đầu vào — HEX (3 hoặc 6 ký tự), RGB hoặc HSL — và cho ra tất cả các định dạng.
- Ô xem trước màu trực tiếp để bạn thấy màu thật, không chỉ những con số.
- Bảng chọn màu trực quan khi bạn muốn chọn bằng mắt.
- Sao chép một cú nhấp cho từng định dạng, sẵn sàng dùng cho CSS hoặc mã nguồn.
- Miễn phí, tức thì, không cần tải lên.
Cách Sử Dụng
- Gõ hoặc dán một mã màu: #4f46e5, rgb(79, 70, 229) hoặc hsl(243, 75%, 59%) đều được.
- Hoặc nhấp vào bảng chọn màu và chọn bằng mắt.
- Đọc cả ba định dạng trong kết quả và kiểm tra ô xem trước.
- Nhấp "Sao chép" bên cạnh định dạng bạn cần.
Ví dụ
Đầu vào
#4f46e5Đầu ra
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Ba cách viết, một màu duy nhất giống hệt nhau.
Nên dùng định dạng nào?
Cả ba đều mô tả chính xác cùng một màu — việc lựa chọn nằm ở việc định dạng nào dễ làm việc nhất cho tác vụ đang làm, không phải về độ chính xác.
| Định dạng | Phù hợp cho | Vì sao |
|---|---|---|
| HEX (#4f46e5) | CSS, bàn giao thiết kế, sao chép-dán nhanh | Ngắn nhất để gõ và dán; định dạng phổ biến trong các công cụ thiết kế như Figma. |
| RGB (rgb(79,70,229)) | Mã nguồn thao tác trực tiếp từng kênh màu, xử lý canvas/ảnh | Khớp với cách các API đồ họa và dữ liệu điểm ảnh lưu trữ màu thực tế. |
| HSL (hsl(243,75%,59%)) | Chỉnh màu — sáng hơn, tối hơn, bão hòa hơn/kém hơn | Độ sáng và độ bão hòa là hai con số riêng biệt có thể chỉnh trực tiếp, khác với HEX/RGB nơi mọi kênh đều thay đổi. |
Các tình huống sử dụng phổ biến
- Chọn một màu bằng mắt trong công cụ thiết kế, rồi chuyển sang giá trị HEX hoặc RGB chính xác cần dùng trong CSS hoặc mã nguồn.
- Tạo một bộ sắc thái liên quan (biến thể sáng hơn/tối hơn) bằng cách chuyển sang HSL, chỉnh độ sáng, rồi chuyển ngược lại.
- Khớp một màu thương hiệu giữa các công cụ khác nhau, mỗi công cụ lại cần một định dạng khác — file logo dùng RGB, style guide dùng HEX, biến CSS cần HSL để làm theme.
- Kiểm tra xem một màu lấy từ ảnh chụp màn hình hoặc file thiết kế (thường ở dạng RGB) có khớp với giá trị HEX trong stylesheet không.
Câu Hỏi Thường Gặp
Khi nào nên dùng HSL thay vì HEX hay RGB?
Khi bạn muốn suy luận về một màu. Làm một màu tối hơn 10% trong HSL nghĩa là giảm độ sáng đi 10 điểm; trong HEX hoặc RGB bạn phải tính lại toàn bộ các kênh màu. Các hệ thống thiết kế thường định nghĩa bảng màu bằng HSL chính vì lý do này.
Công cụ có hỗ trợ HEX 3 ký tự như #fff không?
Có. #fff là viết tắt của #ffffff — mỗi chữ số được nhân đôi. Cả hai dạng đều được nhận, và kết quả đầu ra luôn hiển thị dạng đầy đủ 6 ký tự.
Còn kênh alpha (độ trong suốt) thì sao?
Công cụ này chuyển đổi các màu đặc (giá trị RGB/HSL). Nếu bạn cần độ trong suốt, hãy tự thêm alpha: rgba(79, 70, 229, 0.5) hoặc #4f46e580 — phần màu vẫn giữ nguyên.
Vì sao giá trị HSL của tôi lệch 1 đơn vị so với công cụ khác?
Do làm tròn. Chuyển đổi HSL↔RGB tạo ra các giá trị thập phân, và mỗi công cụ làm tròn theo cách khác nhau. Chênh lệch ±1 ở sắc độ hoặc phần trăm là không thể nhận ra bằng mắt và hoàn toàn bình thường.
Có hỗ trợ tên màu như 'red' không?
Chưa có ở giai đoạn này — công cụ tập trung vào ba định dạng số mà lập trình viên chuyển đổi nhiều nhất. Hãy nhập giá trị HEX/RGB/HSL của màu, hoặc chọn bằng mắt qua bảng chọn màu.