Trả lời nhanh
Cùng một màu viết được nhiều cách: #336699 = rgb(51, 102, 153) = hsl(210, 50%, 40%). HEX là 3 cặp số hệ 16 cho đỏ, xanh lá, xanh dương; HSL mô tả theo sắc độ (0–360°), độ bão hoà và độ sáng nên dễ chỉnh màu sáng tối hơn. Chữ trên nền cần tương phản tối thiểu 4,5:1 để đạt chuẩn WCAG AA.
Mã màu HEX, RGB, HSL là gì?
Công cụ đổi qua lại giữa HEX (3, 4, 6, 8 chữ số), rgb()/rgba(), hsl()/hsla(), HSV, CMYK và 148 tên màu CSS; có bảng chọn màu, xem trước trên nền ô vuông khi màu trong suốt. Kèm theo là độ tương phản WCAG 2.2 khi đặt màu làm chữ trên nền trắng, nền đen hoặc một màu bạn chọn (đạt / chưa đạt AA, AAA cho chữ thường và chữ lớn), dải 9 mức pha sáng và 9 mức pha tối bấm là chép, và đoạn mã CSS sẵn dùng.
Cách chuyển đổi mã màu
- 1
Gõ hoặc dán mã màu ở bất kỳ dạng nào (#2448e0, rgb(36 72 224), hsl(229 75% 51%), tomato…), hoặc bấm ô màu bên cạnh để chọn bằng mắt.
- 2
Đọc các dạng HEX, RGB, HSL, HSV/HSB, CMYK và tên màu CSS (nếu trùng); bấm nút sao chép ở dòng cần dùng.
- 3
Xem phần “Độ tương phản”: màu làm chữ trên nền trắng, đen và trên màu nền bạn nhập, kèm kết luận đạt / chưa đạt từng mức WCAG.
- 4
Chọn một ô trong “Pha sáng” hoặc “Pha tối” để chép mã màu nhạt hơn / đậm hơn cùng tông, hoặc chép khối “Mã CSS”.
Các hệ màu thường gặp
| Hệ màu | Ví dụ (cùng một màu) | Dùng ở đâu |
|---|---|---|
| HEX | #336699 | CSS, Figma, nhận diện thương hiệu |
| RGB | rgb(51, 102, 153) | CSS, lập trình đồ hoạ, màn hình |
| HSL | hsl(210, 50%, 40%) | CSS; dễ làm màu sáng / tối, hover |
| HSV / HSB | hsv(210, 66.7%, 60%) | Bảng chọn màu Photoshop, Illustrator |
| CMYK | cmyk(66.7%, 33.3%, 0%, 40%) | In ấn (cần hồ sơ màu ICC của nhà in) |
Ngưỡng tương phản WCAG 2.2
Tỉ lệ từ 1:1 (cùng màu) tới 21:1 (đen trên trắng). Chữ lớn: từ 18pt (24 px) chữ thường, hoặc 14pt (khoảng 18,7 px) chữ đậm.
| Mức | Chữ thường | Chữ lớn | Ghi chú |
|---|---|---|---|
| AA | ≥ 4,5:1 | ≥ 3:1 | Mức tối thiểu hầu hết website cần đạt |
| AAA | ≥ 7:1 | ≥ 4,5:1 | Mức cao, nên dùng cho nội dung đọc nhiều |
| Thành phần giao diện | ≥ 3:1 | ≥ 3:1 | Viền ô nhập, biểu tượng, trạng thái focus (tiêu chí 1.4.11) |
Vuốt ngang để xem cả bảng →
Ví dụ: chữ xám #767676 trên nền trắng đạt 4,54:1, vừa đủ AA; #777777 chỉ đạt 4,48:1 và trượt AA.
Ví dụ thực tế
Đổi mã màu thương hiệu từ Figma sang CSS
Designer gửi #2448E0. Dán vào để có rgb(36, 72, 224) và hsl(229, 75.2%, 51%); dùng HSL để tạo màu hover đậm hơn bằng cách giảm độ sáng thay vì đoán mã HEX.
Kiểm tra chữ trên nút có đọc được không
Nút nền cam #f97316 với chữ trắng chỉ đạt khoảng 2,8:1, trượt AA cho chữ thường. Thử nền đậm hơn trong dải “Pha tối” tới khi tỉ lệ vượt 4,5:1.
Làm bảng màu sáng tối cho hệ thống thiết kế
Từ một màu chính, dải 9 mức pha trắng và 9 mức pha đen cho sẵn các sắc độ cho nền nhạt, viền, chữ đậm; bấm từng ô để chép mã.
Gửi màu cho nhà in
Dạng CMYK ở đây giúp ước lượng, nhưng mực in thực tế phụ thuộc giấy và máy. Gửi kèm mã HEX và nhờ nhà in đối chiếu bằng hồ sơ màu (ICC) hoặc mã Pantone.
Lỗi thường gặp và cách xử lý
- Mã HEX 8 chữ số bị hiểu sai độ trong suốt.
- Trong CSS, 2 chữ số cuối là alpha: #2448e080 là độ trong suốt khoảng 50%. Một số phần mềm (Android cũ) lại đặt alpha ở đầu (#AARRGGBB); kiểm tra lại thứ tự.
- Màu in ra khác màu trên màn hình.
- Màn hình dùng ánh sáng (RGB), máy in dùng mực (CMYK) với dải màu hẹp hơn; màu RGB quá rực như xanh lá neon không in được đúng. Cần hồ sơ màu ICC của nhà in để đổi chính xác.
- Chữ xám nhạt trên nền trắng khó đọc.
- Kiểm tra tỉ lệ: dưới 4,5:1 là trượt AA cho chữ thường. Xám #767676 là mức nhạt nhất còn đạt AA trên nền trắng.
- Báo không nhận ra mã màu.
- Kiểm tra số chữ số HEX (3, 4, 6 hoặc 8), dấu ngoặc của rgb()/hsl(), và tên màu phải là tiếng Anh như tomato, steelblue.
- Màu trong suốt cho tỉ lệ tương phản lạ.
- Màu có alpha được phủ lên màu nền trước khi tính, đúng như mắt người nhìn thấy; độ trong suốt càng cao tỉ lệ càng gần 1:1.
HEX, RGB và HSL liên quan thế nào
RGB mô tả màu bằng cường độ ba kênh đỏ, xanh lá, xanh dương, mỗi kênh 0–255. HEX chỉ là cách viết RGB ở hệ 16: 0x33 = 51, 0x66 = 102, 0x99 = 153 nên #336699 = rgb(51, 102, 153). HSL biểu diễn lại cùng màu đó bằng sắc độ (vị trí trên vòng màu), độ bão hoà và độ sáng, nên muốn màu nhạt hơn chỉ cần tăng L mà không đổi tông.
Độ tương phản được tính ra sao
WCAG tính độ chói tương đối của từng màu (sau khi bỏ hiệu chỉnh gamma của sRGB, kênh xanh lá có trọng số lớn nhất 0,7152), rồi lấy (sáng + 0,05) / (tối + 0,05). Vì vậy vàng và trắng gần như không phân biệt được dù khác sắc, còn xanh dương đậm trên trắng lại tương phản rất tốt.
Thuật ngữ
- Sắc độ (hue)
- Vị trí màu trên vòng màu, 0° đỏ, 120° xanh lá, 240° xanh dương.
- Độ bão hoà (saturation)
- Màu rực hay xám, 0% là xám hoàn toàn.
- Alpha
- Độ trong suốt, 0 là trong suốt hẳn, 1 là đặc.
- Pha sáng (tint)
- Màu trộn thêm trắng; pha tối (shade) là trộn thêm đen.
- WCAG
- Hướng dẫn tiếp cận nội dung web của W3C, phiên bản hiện hành 2.2.
- Hồ sơ màu ICC
- Tệp mô tả cách thiết bị tái hiện màu, cần để đổi RGB sang CMYK chính xác.
Câu hỏi thường gặp
Đổi HEX sang RGB thế nào?
Tách thành 3 cặp chữ số và đổi từng cặp từ hệ 16 sang hệ 10: #FF8800 → FF = 255, 88 = 136, 00 = 0, tức rgb(255, 136, 0). Công cụ làm việc này ngay khi bạn gõ.
Mã HEX 3 chữ số là gì?
Dạng rút gọn khi mỗi cặp có 2 chữ số giống nhau: #f80 = #ff8800.
CMYK ở đây có dùng để in được không?
Dùng để ước lượng. Đổi chính xác cần hồ sơ màu ICC của máy in và loại giấy, nên hãy gửi mã HEX kèm và nhờ nhà in đối chiếu.
Màu nào đạt chuẩn tương phản trên nền trắng?
Mọi màu cho tỉ lệ từ 4,5:1 với chữ thường. Công cụ hiện tỉ lệ và đánh dấu đạt / chưa đạt cho từng mức AA, AAA.
HSV và HSL khác nhau gì?
Cùng dùng sắc độ và độ bão hoà, nhưng HSL có độ sáng (L = 100% luôn là trắng), còn HSV có giá trị (V = 100% là màu rực nhất). Photoshop dùng HSB, chính là HSV.
Công cụ có gửi màu tôi chọn đi đâu không?
Không. Mọi phép đổi và tính tương phản chạy trên trình duyệt.
Đánh giá và bình luận
Đang tải…