Chuyển đổi màu giữa HEX, RGB và HSL
Đăng ngày · Cập nhật ngày 2 phút đọc
HEX, RGB và HSL mô tả cùng một màu theo ba cách. Công cụ hiển thị cả ba cùng lúc và chấp nhận các cách viết thông dụng; HSL làm tròn thành số nguyên giải thích độ lệch một mức bạn thấy khi chuyển ngược về HEX.
Ba cách viết của cùng một màu
Khám phá và chuyển đổi màu sắc mặc định hiển thị cả ba dạng, kèm bản xem trước màu. Với màu xanh lá #2F4A3F:
| Dạng | Kết quả |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Ba nút HEX, RGB và HSL của bảng điều khiển thu gọn kết quả về một dạng duy nhất, tiện để sao chép nguyên trạng.
Các cách viết được chấp nhận
| Cách viết | Ví dụ | Kết quả HEX |
|---|---|---|
| HEX rút gọn | #fff | #ffffff |
| HEX có độ trong suốt | #2F4A3F80 | #2f4a3f80 |
| RGB có dấu phẩy | rgb(47, 74, 63) | #2f4a3f |
| RGB có khoảng trắng | rgb(47 74 63) | #2f4a3f |
| RGB theo phần trăm | rgb(100%, 0%, 0%) | #ff0000 |
| HSL có khoảng trắng | hsl(156 22% 24%) | #304b40 |
Tên màu như “rouge” và các kênh ngoài khoảng 0 đến 255 như rgb(300, 0, 0) bị từ chối kèm thông báo liệt kê các cách viết được chấp nhận.
Độ trong suốt
Độ trong suốt được viết trong HEX bằng tám chữ số, hoặc sau dấu gạch chéo có khoảng trắng. Màu rgb(47 74 63 / 50%) cho #2f4a3f80 trong HEX và rgba(47, 74, 63, 0.5) trong RGB. Ngược lại, #2F4A3F80 cho độ mờ đục 0,502, vì 80 trong hệ thập lục phân là 128 trên 255.
Vì sao đi một vòng lại lệch một mức
HSL được hiển thị bằng số nguyên: sắc độ tính bằng độ, độ bão hòa và độ sáng tính bằng phần trăm. Vì vậy khi chuyển từ HSL về HEX, bạn rơi vào một màu lân cận chứ không phải màu ban đầu.
| Ban đầu | HSL hiển thị | Trở lại HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Độ lệch là một mức trên mỗi kênh, mắt thường không thấy. Với design token hoặc thương hiệu, hãy giữ HEX gốc làm tham chiếu và đừng đi qua HSL nữa.
Màu xám
Màu xám có độ bão hòa bằng không và sắc độ không có tác dụng: #808080 cho rgb(128, 128, 128) và hsl(0, 0%, 50%).
Điều công cụ không đo
Chuyển đổi định dạng không nói gì về khả năng đọc. Công cụ không tính độ tương phản giữa chữ và nền: hãy kiểm tra riêng trước khi đăng. Trường hợp mã QR, nơi độ tương phản quyết định khả năng quét, được trình bày trong Tạo mã QR quét được ngay lần đầu.
Kiểm tra một phép chuyển đổi
- Dán màu vào ô: bản xem trước phải khớp với điều bạn mong đợi.
- Sao chép dạng mà hệ thống của bạn yêu cầu.
- Để giữ đúng màu, hãy giữ HEX hoặc RGB thay vì HSL.