Chuyển đổi màu 🔒 Dữ liệu của bạn không rời khỏi trình duyệt.
HEX ↔ RGB ↔ HSL, kèm xem trước và bộ chọn màu.
Kiểm tra tương phản
Đây là câu mẫu để xem độ tương phản.
Đây là câu mẫu để xem độ tương phản.
Sắc đậm & nhạt
Chọn một bậc để đặt làm màu hiện tại.
Về công cụ này
Dán màu ở bất kỳ định dạng CSS nào — hex (#1e90ff hay #19f), rgb(), hsl(), hoặc tên màu như dodgerblue — và nhận lại đủ mọi định dạng với nút copy một chạm, kèm ô màu xem trước. HEX là định dạng công cụ thiết kế xuất ra, RGB là thứ canvas và JS API cần, còn HSL là định dạng con người dễ suy luận (sắc độ, bão hòa, độ sáng).
Việc chuyển đổi dùng chính engine CSS của trình duyệt, nên mọi cú pháp hợp lệ trong stylesheet đều dùng được — kể cả cú pháp hiện đại. 100% phía client.
Câu hỏi thường gặp
Dữ liệu màu của tôi có được gửi đi đâu không?
Không. Mọi phép chuyển đổi, kiểm tra độ tương phản và bảng màu đều được tính toán ngay trong trình duyệt của bạn — những gì bạn nhập không bao giờ rời khỏi thiết bị.
HSL và HSV khác nhau ở điểm nào?
Cả hai đều mô tả sắc độ và độ bão hòa, nhưng giá trị thứ ba của HSL là độ sáng (gần đen hay gần trắng đến đâu), còn của HSV là giá trị (chỉ xét gần đen đến đâu, phần trên cùng luôn sáng tối đa). HSV thường khớp với bộ chọn màu trong công cụ thiết kế; HSL thường khớp với quy ước của CSS.
Vì sao mã hex của tôi có 8 chữ số thay vì 6?
Cặp số thêm vào biểu diễn alpha (độ trong suốt) dưới dạng #rrggbbaa. Nó chỉ xuất hiện khi màu đầu vào có kênh alpha nhỏ hơn 1 — màu hoàn toàn không trong suốt vẫn giữ 6 chữ số.
Nhãn AA và AAA dưới phần kiểm tra tương phản nghĩa là gì?
Đây là các ngưỡng tương phản theo WCAG 2: AA là mức tối thiểu hầu hết trang web nên đạt (4.5:1 với chữ thường, 3:1 với chữ lớn hoặc thành phần UI), AAA là mục tiêu nghiêm ngặt hơn (7:1 / 4.5:1). Nhãn xanh lá nghĩa là cặp màu chữ/nền của bạn đạt mức đó.
OKLCH là gì và vì sao nên dùng nó thay vì HSL?
OKLCH là không gian màu đồng nhất về mặt cảm nhận — các bước tăng bằng nhau về độ sáng hay độ bão hòa màu sẽ trông khác biệt bằng nhau với mắt người, điều mà HSL không đảm bảo. Nó ngày càng được dùng nhiều trong CSS hiện đại để tạo thang màu và gradient không có điểm tối hay đục bất ngờ.