Chuyển đổi mã màu: HEX, RGB, HSL, HSV, HWB, CMYK, LAB và OKLCH
Chuyển màu giữa HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB và OKLCH, xem tên màu CSS và độ tương phản WCAG trên nền trắng, đen. Miễn phí, chạy trên trình duyệt.
Hỗ trợ HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch() và 148 tên màu CSS.
dodgerblue#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)hsv(209.6, 88.2%, 100%)hwb(209.6 11.8% 0%)cmyk(88.2%, 43.5%, 0%, 0%)lab(58.36% 0.89 -64.78)oklch(65.2% 0.1901 253.21)CIELAB dùng điểm trắng D50 như CSS Color 4. Giá trị chỉ được làm tròn khi hiển thị; phép chuyển đổi dùng độ chính xác đầy đủ. Kênh alpha bị bỏ qua với CMYK, HSV và độ tương phản.
Chuyển đổi mã màu là gì?
Dán một màu theo bất kỳ cách viết thông dụng nào và nhận ngay giá trị ở tám mô hình màu: HEX, RGB(A), HSL(A), HSV, HWB, CMYK, CIELAB và OKLCH. Công cụ cũng hiển thị tên màu CSS tương ứng (nếu có tên khớp chính xác) và tỷ lệ tương phản WCAG của màu đó trên nền trắng và nền đen.
Cách sử dụng Chuyển đổi mã màu
- Nhập hoặc dán màu vào ô Màu (định dạng bất kỳ), ví dụ
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(65% 0.19 253)hoặctomato, hoặc chọn màu bằng bộ chọn màu. - Đọc các giá trị đã chuyển đổi trong danh sách kết quả; mỗi dòng có nút Sao chép riêng.
- Xem Tên CSS để biết tên màu khớp chính xác và các thẻ Độ tương phản trên nền trắng / đen để biết kết quả WCAG AA và AAA.
- Nếu giá trị LAB hoặc OKLCH nằm ngoài sRGB, một cảnh báo sẽ cho biết màu đã được cắt về màu hiển thị được gần nhất.
Ví dụ
#ff0000
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red
Độ tương phản trên nền trắng là 3.99:1, nên màu đỏ thuần không đạt WCAG AA với chữ cỡ thường.
Khi nào nên dùng Chuyển đổi mã màu
Dùng khi chuyển màu giữa công cụ thiết kế và CSS, khi cần một mô hình cảm nhận như OKLCH để xây dựng bảng màu, hoặc để kiểm tra nhanh độ tương phản của chữ. Đừng dùng kết quả CMYK cho bản in thử chuyên nghiệp: in ấn thực tế cần hồ sơ màu ICC, điều mà công thức đơn giản này bỏ qua.
Chuyển đổi mã màu hoạt động như thế nào
Mọi đầu vào được phân tích thành các kênh sRGB đã mã hóa gamma cùng kênh alpha. HSL, HSV và HWB là các phép biến đổi hình trụ tiêu chuẩn của sRGB; CMYK dùng công thức đơn giản không phụ thuộc thiết bị K = 1 − max(R,G,B). Với LAB, giá trị sRGB được tuyến tính hóa, chuyển sang CIE XYZ (D65), thích nghi màu sang D50 bằng ma trận Bradford rồi đổi thành CIELAB, đúng như CSS Color 4. OKLCH dùng các ma trận OKLab của Björn Ottosson trên sRGB tuyến tính. Giá trị chỉ được làm tròn khi hiển thị (số nguyên cho RGB, một chữ số thập phân cho HSL/HSV/HWB/CMYK, hai chữ số cho LAB). Độ tương phản tuân theo độ chói tương đối của WCAG 2.x: (L1 + 0.05) / (L2 + 0.05).
Các Trường Hợp Sử Dụng Phổ Biến
- Đổi mã HEX thương hiệu trong bộ nhận diện sang
hsl()hoặcoklch()cho biến CSS - Chuyển giá trị
rgba()lấy từ DevTools thành HEX 8 chữ số có alpha - Kiểm tra màu chữ có đạt WCAG AA (4.5:1) trên nền trắng hay không
- Tìm từ khóa CSS cho một giá trị HEX như
#663399(rebeccapurple) - Lấy tỷ lệ phần trăm CMYK gần đúng cho bản in văn phòng
Câu Hỏi Thường Gặp
Vì sao giá trị LAB khác với Photoshop?
Công cụ này tuân theo CSS Color 4, dùng điểm trắng D50 với phép thích nghi Bradford. Một số ứng dụng hiển thị LAB theo D65 nên cho ra con số hơi khác.
"Nằm ngoài gam màu sRGB" nghĩa là gì?
LAB và OKLCH có thể mô tả những màu mà màn hình sRGB thông thường không hiển thị được. Các đầu vào như vậy được cắt theo từng kênh về màu hiển thị được gần nhất, và cảnh báo cho bạn biết giá trị HEX/RGB chỉ là gần đúng.
Tỷ lệ tương phản được làm tròn thế nào?
Nó được cắt bớt, không làm tròn lên, ở hai chữ số thập phân, để tỷ lệ 4.499 không bao giờ hiển thị là đạt 4.5:1.
Kênh alpha có được giữ ở mọi định dạng không?
Alpha được giữ ở HEX (8 chữ số), rgba(), hsla(), HWB, LAB và OKLCH. HSV và CMYK không có kênh alpha, còn độ tương phản được tính cho màu đục hoàn toàn.