Chọn màu
Tìm mã chính xác cho mọi màu, ở mọi định dạng.
Kiểm tra độ tương phản
- AA
- AA cỡ lớn
- AAA
- AA
- AA cỡ lớn
- AAA
Chạy ngay trên trình duyệt. Không có gì bạn nhập vào bị gửi đi đâu cả.
- 5 định dạng màu
- Kiểm tra tương phản WCAG
- Hỗ trợ độ mờ
Cách chọn màu
- Kéo trong ô vuông để chỉnh độ bão hòa và độ sáng, rồi kéo thanh trượt sắc độ.
- Hoặc gõ mã ở bất kỳ định dạng nào: HEX, RGB, HSL, HSV hoặc CMYK.
- Sao chép mã bạn cần và kiểm tra độ tương phản bên dưới.
So sánh các định dạng màu
Mỗi dòng dưới đây mô tả cùng một màu cam. Chỉ có cách viết là khác nhau.
| Định dạng | Ví dụ | Dùng trong |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, công cụ thiết kế |
| RGB | rgb(240, 138, 60) | CSS, phần mềm chỉnh ảnh |
| HSL | hsl(24, 84%, 59%) | CSS, dễ chỉnh bằng mắt nhất |
| HSV/HSB | hsv(24, 75%, 94%) | Công cụ chọn màu trong app vẽ và thiết kế |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Thiết kế in ấn và pha mực |
Dùng HEX hoặc RGB cho web, HSL khi bạn muốn chỉnh độ sáng hoặc độ bão hòa của một màu mà không đổi sắc độ, và CMYK làm điểm khởi đầu cho in ấn.
Các mức tương phản WCAG
Bộ kiểm tra tương phản bên dưới so sánh màu của bạn với trắng và đen tuyệt đối, rồi chấm điểm cả hai theo các mức WCAG 2.
| Mức | Chữ thường | Chữ lớn |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Chữ lớn nghĩa là khoảng 24px, hoặc 19px đậm. Hầu hết trang web chỉ cần đạt mức AA. AAA là tiêu chuẩn khắt khe hơn, thường dùng cho trang chính phủ và các trang chú trọng khả năng tiếp cận.
Mẹo chọn màu dễ tiếp cận
- Giữ nguyên sắc độ và giảm độ sáng trong HSL để có sắc đậm hơn của cùng một màu, dùng cho trạng thái hover và active.
- Một màu đạt AA trên nền trắng có thể không đạt trên nền có màu, nên hãy kiểm tra tương phản với nền thật của trang, không chỉ trắng hoặc đen.
- Công cụ hút màu (eyedropper) chỉ hoạt động trên Chrome và Edge phiên bản máy tính. Firefox và Safari chưa thêm EyeDropper API.
- Hãy xin bản in thử từ xưởng in trước khi tin tưởng một giá trị CMYK cho cả lô in lớn. Cùng một con số có thể trông khác nhau trên giấy tráng phủ và giấy không tráng phủ.
Câu hỏi thường gặp về Chọn màu
Làm sao để lấy mã màu của một thứ trên màn hình?
Trên Chrome và Edge phiên bản máy tính, bấm Lấy màu từ màn hình, rồi bấm vào bất kỳ đâu trên màn hình. Các trình duyệt khác chưa hỗ trợ tính năng này, nên hãy chụp màn hình rồi mở bằng công cụ chọn màu trên ảnh.
HEX, RGB và HSL khác nhau thế nào?
Cả ba đều mô tả cùng một màu theo những cách khác nhau. HEX và RGB cho biết lượng đỏ, lục và lam (HEX viết chúng ở hệ cơ số 16), còn HSL cho biết sắc độ, độ bão hòa và độ sáng, dễ chỉnh tay hơn.
Văn bản dễ đọc cần tỷ lệ tương phản bao nhiêu?
Mức WCAG AA yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn, tức khoảng 24px, hoặc 19px đậm. Mức AAA nâng chữ thường lên 7:1.
Giá trị CMYK có chính xác tuyệt đối không?
Đó là kết quả quy đổi toán học trực tiếp từ RGB. Màu in thực tế còn phụ thuộc mực in, giấy và cấu hình máy in, nên hãy dùng nó làm điểm khởi đầu rồi kiểm tra bằng bản in thử.
Thanh trượt độ mờ thay đổi điều gì?
Nó chỉnh độ trong suốt từ 0 (vô hình) đến 100 (đặc màu). Dưới 100, mã HEX có thêm hai chữ số và RGB chuyển thành rgba(). Độ tương phản được tính theo màu thực tế hiển thị trên từng nền.
HSV hữu ích ở điểm nào mà RGB không có?
HSV tách sắc độ của một màu ra khỏi độ sáng và độ bão hòa của nó, đó là lý do các công cụ chọn màu vẽ và phần mềm chỉnh ảnh cho bạn một thanh trượt riêng cho sắc độ và một thanh riêng cho độ sáng, thay vì phải trộn đỏ, lục, lam bằng mắt.
Tôi có lấy được màu Pantone từ đây không?
Không. Pantone là hệ màu pha (spot-color) có bản quyền gắn với loại mực cụ thể, không phải phép quy đổi toán học đơn thuần từ RGB hay CMYK. Hãy dùng giá trị CMYK làm điểm khởi đầu rồi xác nhận độ khớp chính xác với xưởng in của bạn.