Chuyển đổi màu
Chuyển một màu giữa HEX, RGB, HSL và HSV, kèm độ tương phản so với màu đen và màu trắng.
Chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, ghi log hay lưu trữ.
Thập lục phân
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Độ chói tương đối
- 0,2830
- Tương phản trên nền trắng
- 3,15:1
- Tương phản trên nền đen
- 6,66:1
HEX, RGB, HSL và HSV là bốn cách viết cùng một màu sRGB. Cách nào tiện tùy vào việc bạn đang làm: thập lục phân để sao chép giá trị từ một bản thiết kế, HSL để làm sáng một màu một chút mà không đổi sắc độ.
Cách hoạt động
Dữ liệu nhập được đọc thành các kênh đỏ, lục, lam tám bit cộng một kênh alpha, và mọi đầu ra đều được tính từ các kênh đó. Không có gì được chuyển đổi từ một đầu ra khác, nên giá trị không thể trôi lệch dần qua một chuỗi các lần làm tròn.
Các con số tương phản theo WCAG 2.1: mỗi kênh được tuyến tính hóa, được gán trọng số theo mức đóng góp đối với mắt, và tỷ lệ là (màu sáng hơn + 0,05) chia cho (màu tối hơn + 0,05). Thang đo đi từ 1 với hai màu giống hệt nhau đến 21 với đen trên trắng.
Ví dụ
| Trường hợp | Dữ liệu nhập | Kết quả |
|---|---|---|
| Một giá trị hex từ tệp thiết kế | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| Dạng rút gọn, lặp lại từng chữ số | #39d | #3399DD, not #039D |
| Có độ trong suốt | rgb(52 152 219 / 0.5) | #3498DB80 |
Câu hỏi thường gặp
Độ tương phản 4,5 có nghĩa là chữ của tôi đạt chuẩn không?
Tùy vào chữ, và đó là lý do công cụ đưa ra con số chứ không đưa ra phán quyết. WCAG yêu cầu 4,5 cho chữ thường và 3 cho chữ lớn, trong đó lớn nghĩa là ít nhất 18 pt, hoặc 14 pt khi in đậm. Một công cụ chỉ thấy hai màu không thể biết quy tắc nào được áp dụng.
Sao khi chuyển sang HSL rồi chuyển ngược lại đôi khi một chữ số bị thay đổi?
Vì thập lục phân có 256 bậc cho mỗi kênh và HSL không chia đều chính xác theo các bậc đó. Lượt đi và về có thể lệch một bậc. Ở đây mọi ký hiệu đều được tính từ các kênh gốc, nên các giá trị hiển thị luôn là những giá trị gần nhất với thứ bạn đã nhập.
HSL và HSV khác nhau thế nào?
Chúng dùng chung sắc độ (hue) và khác nhau ở phần còn lại. Trong HSL, độ sáng 100% là màu trắng và 50% là màu thuần. Trong HSV, giá trị 100% là màu thuần và màu trắng chỉ xuất hiện khi độ bão hòa giảm về 0. Các công cụ thiết kế thường hiển thị HSV; CSS dùng HSL.
Có hỗ trợ màu có tên như “rebeccapurple” không?
Không. Danh sách từ khóa màu của CSS là một bảng khoảng 150 tên thuộc về đặc tả chứ không thuộc về phép tính, và công cụ này chuyển đổi giữa các ký hiệu chứ không tra cứu tên.
Cần biết
- Mọi thứ ở đây đều là sRGB, không gian màu mà web luôn mặc định. Các không gian rộng hơn mà CSS Color 4 bổ sung — lab, oklch, display-p3 — mô tả những màu sRGB không đạt tới, và chuyển sang chúng cần một quyết định về cách xử lý những màu nằm ngoài. Quyết định đó không được đưa ra ở đây.
- Các con số tương phản là con số, không phải phán quyết. Một cặp màu có đạt hay không tùy thuộc vào cỡ chữ và độ đậm của chữ, điều mà một màu tự nó không biết.