Chuyển đổi màu
Chuyển màu giữa HEX, RGB, HSL và OKLCH với xem trước trực tiếp
Về công cụ này
Nhập một màu theo bất kỳ ký pháp quen thuộc nào — #hex, rgb(), hsl(), hay tên màu CSS — và nhận lại mọi định dạng cùng lúc: HEX, RGB, HSL và OKLCH, bên cạnh một ô màu xem trực tiếp. Kênh alpha được giữ nguyên qua các định dạng, và phần kết quả dùng cú pháp CSS hiện đại (các kênh cách nhau bằng dấu cách) để dán thẳng vào stylesheet ngày nay là chạy.
OKLCH có mặt ở đây vì đó là hướng đi của màu sắc trong CSS: khác với HSL, trục độ sáng của nó đồng đều theo cảm nhận thị giác, nên hai màu có cùng giá trị L thật sự trông sáng ngang nhau, và việc chỉnh tông màu không vô tình làm đổi độ sáng cảm nhận. Chuyển một bảng màu sẵn có sang OKLCH là bước đầu tiên để dựng những thang màu nhất quán.
Phần tính toán chuyển đổi chạy cục bộ theo các phép biến đổi sRGB↔OKLab đã công bố, và giá trị đi vòng vẫn khớp: RGB bạn nhận lại từ một đầu vào HSL đúng bằng thứ trình duyệt sẽ tính ra.
Câu hỏi thường gặp
- Vì sao giá trị độ sáng của HSL và OKLCH lại không khớp nhau?
- Độ sáng trong HSL là một thuộc tính hình học của các giá trị RGB chứ không phải của thị giác con người — màu vàng hsl(60 100% 50%) trông sáng hơn hẳn màu lam hsl(240 100% 50%) dù L y hệt nhau. Trục L của OKLCH được thiết kế để bám theo cảm nhận, nên L bằng nhau nghĩa là độ sáng biểu kiến bằng nhau. Chính sự lệch pha đó là lý do OKLCH ra đời.
- Giá trị alpha nghĩa là gì và nó nằm ở đâu trong mỗi định dạng?
- Alpha là độ đục, từ 0 (trong suốt) tới 1 (đục hoàn toàn). Trong hex 8 chữ số, nó là byte cuối (#RRGGBBAA); trong cú pháp hàm hiện đại, nó đi sau dấu gạch chéo: rgb(76 141 255 / 0.5). Công cụ này tự động mang alpha qua mọi định dạng.
- Mọi màu OKLCH có hiển thị được trong sRGB không?
- Không — OKLCH bao phủ những gam màu rộng, và một số tổ hợp sắc độ/độ sáng không có tương đương trong sRGB. Chuyển từ sRGB đi (như công cụ này làm) thì luôn biểu diễn được; theo chiều ngược lại, những màu nằm ngoài gam phải bị cắt hoặc ánh xạ lại — đó là lý do một màu lục P3 rực rỡ trông xỉn hơn trên màn hình sRGB.
- Vì sao là rgb(76 141 255) cách nhau bằng dấu cách chứ không phải dấu phẩy?
- CSS Color Module Level 4 đã chuẩn hóa cách viết các kênh cách nhau bằng dấu cách kèm /alpha tùy chọn, và mọi trình duyệt hiện đại đều hỗ trợ. Dạng dùng dấu phẩy vẫn chạy, nhưng dạng dấu cách mới là thứ các đặc tả mới (và công cụ này) sử dụng.