Chuyển đổi màu
Chuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK, và kiểm tra xem hai màu có đủ độ tương phản để chữ dễ đọc hay không.
Chạy hoàn toàn trong trình duyệt của bạn
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Tên CSS
Kiểm tra độ tương phản
Tỷ lệ tương phản –
| Dùng cho | Yêu cầu | Kết quả |
|---|---|---|
| Chữ thường, AA | 4,5:1 | |
| Chữ thường, AAA | 7:1 | |
| Chữ lớn, AA | 3:1 | |
| Chữ lớn, AAA | 4,5:1 | |
| Biểu tượng và thành phần giao diện, AA | 3:1 |
Đọc được HEX (3, 4, 6 hoặc 8 chữ số), rgb(), hsl(), hsv(), cmyk() và tên màu CSS; các cú pháp màu CSS khác được trình duyệt của bạn đọc nếu có thể. HSL, HSV và CMYK hiển thị đến một chữ số thập phân.
Cách chuyển đổi một màu
- Gõ hoặc dán một màu ở bất kỳ định dạng phổ biến nào, như
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)hoặcnavy, hoặc chọn bằng bảng chọn màu. - Sao chép định dạng bạn cần từ danh sách. Giá trị cập nhật khi bạn gõ.
- Trong phần Kiểm tra độ tương phản, nhập màu chữ và màu nền để xem tỷ lệ tương phản của chúng và chúng có đạt WCAG AA và AAA hay không.
Định dạng màu và độ tương phản
HEX và RGB mô tả một màu trên màn hình bằng lượng đỏ, xanh lá và xanh dương từ 0 đến 255; HEX chỉ đơn giản viết mỗi lượng thành hai chữ số thập lục phân, với cặp thứ ba tùy chọn cho độ mờ. HSL và HSV mô tả cùng những màu đó bằng sắc độ (một góc quanh vòng màu), độ bão hòa, và độ sáng hoặc giá trị, giúp dễ chọn phiên bản sáng hơn hay xỉn hơn của một màu. Đó là các hệ tọa độ khác nhau cho cùng các màu sRGB, nên việc chuyển đổi giữa chúng là chính xác trừ sai số làm tròn.
CMYK thì khác: nó mô tả mực in, và phép chuyển đổi đúng nghĩa phụ thuộc vào quy trình in. Con số hiển thị là công thức đơn giản (đen bằng 1 trừ kênh sáng nhất, và các mực còn lại bù phần còn lại), hữu ích cho công việc sơ bộ nhưng không thay thế được hồ sơ in.
Công cụ kiểm tra độ tương phản áp dụng công thức tương phản WCAG 2, công thức dùng trong các cuộc đánh giá khả năng tiếp cận và trong công cụ dành cho nhà phát triển của trình duyệt. Nó chỉ đo độ tương phản về độ chói, nên không cho bạn biết về các cặp màu khó phân biệt với người mù màu như đỏ trên xanh lá, và phông chữ rất mảnh hoặc rất nhỏ có thể cần độ tương phản cao hơn mức tối thiểu.
Mẹo
- Cần màu của một điểm ảnh trong ảnh hay ảnh chụp màn hình? Hãy dùng Lấy màu từ ảnh.
- Tạo mã QR theo màu thương hiệu? Tạo mã QR cảnh báo khi độ tương phản quá thấp để quét.
- Chuyển đổi các số thập lục phân không phải màu? Hãy thử Chuyển đổi hệ cơ số.
Câu hỏi thường gặp
Giá trị CMYK có đúng để in không?
Chỉ ở mức gần đúng. CMYK ở đây là công thức đơn giản chuyển RGB của màn hình mà không có hồ sơ màu, cũng là cách hầu hết công cụ chuyển đổi trực tuyến dùng. Máy in làm việc với loại mực và giấy cụ thể, được mô tả bằng hồ sơ ICC, vì vậy với việc in ấn hãy chuyển đổi trong phần mềm thiết kế bằng hồ sơ do nhà in cung cấp.
Tỷ lệ tương phản được tính như thế nào?
Bằng công thức WCAG 2: độ chói tương đối của mỗi màu được tính từ giá trị sRGB, và tỷ lệ là (sáng hơn + 0,05) chia cho (tối hơn + 0,05). Tỷ lệ nằm từ 1:1 (không tương phản) đến 21:1 (đen trên trắng). Văn bản WCAG hiện tại dùng ngưỡng 0,04045 trong công thức; các bản cũ ghi 0,03928, cho cùng kết quả với mọi màu 8 bit.
AA và AAA yêu cầu tỷ lệ bao nhiêu?
Chữ thường cần 4,5:1 cho AA và 7:1 cho AAA. Chữ lớn, tức ít nhất 24 px nét thường hoặc khoảng 18,7 px nét đậm, cần 3:1 cho AA và 4,5:1 cho AAA. Biểu tượng, viền ô nhập liệu và các thành phần giao diện khác cần 3:1 (WCAG 1.4.11). Tỷ lệ không được làm tròn lên: 4,49:1 không đạt AA cho chữ thường.
Màu trong suốt được xử lý ra sao?
Màu chữ trong suốt một phần được trộn với nền trước, theo cách màn hình hiển thị, rồi màu sau khi trộn mới được đo. Nền trong suốt một phần được giả định nằm trên nền trắng. Các kênh được làm tròn thành số nguyên sau khi trộn, như màn hình sẽ hiển thị.
Vì sao giá trị HSL thay đổi nhẹ sau khi chuyển ngược lại?
Màu trên màn hình có 256 mức mỗi kênh, nên hầu hết giá trị HSL và HSV không rơi đúng vào một trong các mức đó. Công cụ giữ nguyên độ chính xác đầy đủ bên trong và chỉ làm tròn khi hiển thị: HEX và RGB thành số nguyên, HSL, HSV và CMYK đến một chữ số thập phân.
Công cụ có biết tên màu CSS không?
Có, tất cả 148 màu có tên trong CSS, như rebeccapurple và cornflowerblue. Gõ một tên để chuyển đổi; khi một màu khớp chính xác với một tên, tên đó cũng được hiển thị. Một số màu có hai tên, như aqua và cyan.