Cách sử dụng
- Nhập một màu — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — hoặc chọn màu bằng bảng chọn màu.
- Sao chép định dạng bạn cần từ danh sách.
- Đặt màu nền để kiểm tra tỷ lệ tương phản và kết quả WCAG AA/AAA.
- Nhấn vào một sắc độ trong thang để dùng màu đó.
Giải thích tùy chọn
- HEX / RGB
- Màu trên màn hình gồm đỏ, lục và lam, mỗi kênh từ 0–255. #rrggbbaa và rgb(… / 50%) thêm độ trong suốt.
- HSL / HSV
- Sắc độ, độ bão hòa và độ sáng (hoặc giá trị). Tiện khi muốn chỉnh màu sáng hơn hoặc tối hơn bằng tay.
- OKLCH
- Không gian màu theo cảm nhận trong CSS Color 4. Khi đổi độ sáng, sắc độ và độ rực cảm nhận được vẫn giữ ổn định, rất phù hợp để làm bảng màu và giao diện tối.
- CMYK
- Phép chuyển đổi đơn giản, chỉ để tham khảo. Màu in thực tế phụ thuộc vào hồ sơ màu của máy in, nên hãy hỏi nhà in để có giá trị chính xác.
- Tỷ lệ tương phản
- WCAG 2.2 yêu cầu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (18pt, hoặc 14pt đậm) ở mức AA; 7:1 và 4,5:1 ở mức AAA.
Ví dụ
#0f766e là rgb(15 118 110), hsl(175 77% 26%) và oklch(51.1% 0.086 186.4). Trên nền trắng, tỷ lệ tương phản của nó khoảng 5,5:1, đạt WCAG AA cho mọi cỡ chữ.
Các màu phổ biến ở mọi định dạng
Các màu có tên trong CSS và giá trị của chúng. CMYK ở đây là phép chuyển đổi toán học đơn giản; với in ấn chuyên nghiệp, hãy dùng giá trị CMYK từ hồ sơ màu của máy in.
| Tên CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Nên dùng định dạng nào
HEX là cách ngắn nhất để viết một màu trong CSS và các công cụ thiết kế: hai chữ số hex cho mỗi màu đỏ, lục và lam.
RGB là cùng thông tin đó ở dạng thập phân, và rgb(255 0 0 / 50%) thêm độ trong suốt.
HSL mô tả sắc độ, độ bão hòa và độ sáng, giúp dễ tạo sắc độ sáng hơn hoặc tối hơn của cùng một màu chỉ bằng cách đổi con số cuối.
OKLCH là định dạng CSS mới hơn, trong đó các bước độ sáng bằng nhau trông khác nhau như nhau với mắt người — hữu ích cho bảng màu dễ tiếp cận.
Câu hỏi thường gặp
Tỷ lệ tương phản bao nhiêu là tốt cho chữ?
Tối thiểu 4,5:1 cho chữ nội dung (WCAG AA). Đen tuyền trên nền trắng là 21:1; màu xám #767676 phổ biến trên nền trắng là 4,54:1, vừa đủ đạt.
Vì sao giá trị CMYK khác với Photoshop?
Photoshop chuyển đổi qua hồ sơ màu ICC cho một loại máy in và giấy cụ thể. Công cụ này dùng công thức toán học đơn thuần, phù hợp để ước lượng nhưng không dùng để in thử.
HSL và OKLCH khác nhau thế nào?
HSL chỉ là cách sắp xếp lại RGB, nên màu vàng và màu xanh lam có cùng độ sáng trông vẫn chênh lệch độ sáng rất nhiều. OKLCH được thiết kế để các màu có cùng độ sáng trông sáng như nhau với mắt người.
Tôi có thể dùng OKLCH trong CSS ngay bây giờ không?
Có. oklch() hoạt động trên mọi trình duyệt lớn hiện nay.
Quyền riêng tư
Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.