Công cụ chọn màu
Chọn bất kỳ màu nào và nhận mã màu ở mọi định dạng phổ biến, sẵn sàng để sao chép. Tạo bảng màu phối hợp, trích xuất các màu chủ đạo của ảnh mà không cần tải ảnh lên, và kiểm tra cặp màu chữ – nền có đạt chuẩn độ tương phản WCAG hay không.
Bảng chọn màu
Mã màu ở mọi định dạng
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (gần đúng)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
Bảng màu từ màu này
Bổ túc
Tương đồng
Bộ ba
Sắc nhạt (pha với trắng)
Sắc đậm (pha với đen)
Bảng màu từ hình ảnh
Hình ảnh của bạn được chính trình duyệt của bạn đọc và không bao giờ được tải lên: các điểm ảnh được lấy mẫu trên canvas ngay trên thiết bị này và không có gì được gửi đi.
Thả ảnh chụp, ảnh chụp màn hình hoặc logo vào đây
Sáu màu chủ đạo của hình ảnh sẽ hiện ở đây. Nhấp vào một ô màu để nạp màu đó vào bảng chọn.
Kiểm tra độ tương phản (WCAG 2.1)
Mẫu chữ lớn
Chú cáo nâu nhanh nhẹn nhảy qua con chó lười. 0123456789
- AA · chữ thườngĐạt
- AAA · chữ thườngĐạt
- AA · chữ lớnĐạt
- AAA · chữ lớnĐạt
Chữ lớn nghĩa là chữ thường từ 18 pt (24 px) trở lên hoặc chữ đậm từ 14 pt (khoảng 18,7 px) trở lên. AA yêu cầu 4,5:1 cho chữ thường và 3:1 cho chữ lớn; AAA yêu cầu 7:1 và 4,5:1.
Các tên màu CSS phổ biến
Hai mươi từ khóa mà mọi trình duyệt đều hiểu, kèm giá trị HEX, RGB và HSL chính xác.
| Tên | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL và HSB thực chất mô tả điều gì
Mọi màu trên trang này đều nằm trong sRGB, không gian màu mặc định của web kể từ khi các trình duyệt áp dụng nó vào cuối thập niên 1990. Màn hình trộn ánh sáng đỏ, lục và lam, mỗi kênh có 256 mức (0–255), tạo ra 16.777.216 màu có thể có. RGB ghi trực tiếp ba số đó; HEX ghi cùng ba số ấy ở hệ cơ số 16, mỗi số hai chữ số, nên #FF6600 là đỏ 255, lục 102, lam 0. Dạng viết tắt ba chữ số nhân đôi từng chữ số: #F60 chính là #FF6600.
HSL và HSB (còn gọi là HSV) mô tả cùng những màu đó theo cách dễ chỉnh bằng tay hơn. Hue (sắc độ) là một góc trên vòng màu: 0° là đỏ, 120° là lục, 240° là lam. Điểm khác nhau nằm ở số cuối cùng. Trong HSL, độ sáng 100% luôn là màu trắng và 50% là phiên bản thuần nhất của sắc độ; trong HSB, độ sáng 100% là sắc độ thuần, còn muốn ra màu trắng thì độ bão hòa phải bằng 0%. Các ứng dụng thiết kế như Photoshop và Figma dùng HSB trong bộ chọn màu, còn CSS hiểu trực tiếp hsl(), vì vậy cả hai đều được liệt kê ở trên.
Vì sao giá trị CMYK chỉ là gần đúng
Màn hình cộng thêm ánh sáng; máy in thì trừ bớt ánh sáng bằng mực cyan, magenta, vàng và đen. Hai hệ này bao phủ các dải màu khác nhau, gọi là gam màu. Những màu màn hình có độ bão hòa rất cao, như xanh lục RGB rực, xanh dương điện hay cam neon, nằm ngoài khả năng tái tạo của mực in thông thường, nên khi in chúng xỉn hơn so với trên màn hình.
Các số CMYK ở đây dùng phép chuyển đổi toán học thuần túy, không có hồ sơ ICC, phù hợp để tham khảo sơ bộ nhưng không dùng cho in ấn chính thức. Nhà in sẽ chuyển đổi bằng hồ sơ riêng cho giấy và máy in của họ, chẳng hạn FOGRA39 ở châu Âu hay GRACoL ở Hoa Kỳ, và cùng một màu RGB có thể cho ra tỉ lệ mực khác nhau ở mỗi hồ sơ. Với công việc in ấn, hãy gửi giá trị RGB hoặc HEX kèm hồ sơ mà nhà in yêu cầu.
Cách tính tỉ lệ tương phản
WCAG 2.1 so sánh độ chói tương đối của hai màu: màu sáng hơn cộng 0,05, chia cho màu tối hơn cộng 0,05. Kết quả nằm trong khoảng từ 1:1 (hai màu giống hệt) đến 21:1 (chữ đen trên nền trắng). Mức 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 cỡ 18 point hoặc 14 point in đậm; mức AAA nâng lên 7:1 và 4,5:1. Các thành phần giao diện như viền ô nhập và biểu tượng cần 3:1 so với nền xung quanh theo tiêu chí 1.4.11.
Độ chói tính màu lục nặng hơn nhiều so với màu lam, vì mắt người nhạy nhất với màu này. Đó là lý do chữ vàng trên nền trắng trượt rất nặng còn xanh dương đậm trên nền trắng đạt dễ dàng, dù cả hai màu trông đều bão hòa hoàn toàn. Logo và chữ thuần trang trí được miễn trừ quy tắc này.
Lấy bảng màu từ ảnh chụp hoặc logo
Bảng màu từ ảnh đọc tệp của bạn bằng canvas của trình duyệt, thu nhỏ còn tối đa 200 pixel ở cạnh dài rồi gom các điểm ảnh tương tự bằng phương pháp median-cut do Paul Heckbert mô tả năm 1982: dải màu được chia đi chia lại theo kênh rộng nhất cho đến khi còn sáu nhóm, và màu trung bình của mỗi nhóm trở thành một ô màu. Điểm ảnh trong suốt bị bỏ qua, nên logo trên nền trong suốt sẽ cho ra đúng các màu của logo.
Khi đã có các màu, logo phẳng thường dùng tốt hơn ở dạng vector. Công cụ chuyển ảnh sang SVG vẽ lại logo thành các hình khối giữ đúng những màu này, và nếu bạn đang thiết kế ảnh bìa kênh, công cụ đổi kích thước ảnh bìa YouTube sẽ đưa hình về 2560 × 1440 có tính đến vùng an toàn.
Câu hỏi thường gặp
- Vì sao màu "green" trong CSS tối hơn màu xanh lá trong bộ chọn RGB?
- Từ khóa green là #008000, một màu xanh lục vừa kế thừa từ bảng 16 màu HTML cũ. Màu bão hòa hoàn toàn #00FF00 được gọi là lime. Danh sách CSS đầy đủ còn nhiều điều bất ngờ tương tự: gray (#808080) lại tối hơn darkgray (#A9A9A9).
- Ảnh của tôi có bị tải lên khi trích xuất bảng màu không?
- Không. Tệp được trình duyệt của bạn mở, vẽ lên canvas trong bộ nhớ và phân tích ngay tại đó. Không có yêu cầu nào gửi kèm ảnh, và đóng tab là ảnh bị hủy.
- Văn bản nội dung cần tỉ lệ tương phản bao nhiêu?
- Tối thiểu 4,5:1 để đạt WCAG 2.1 mức AA và 7:1 cho mức AAA. Tiêu đề từ 18 point trở lên, hoặc 14 point in đậm, có thể dùng 3:1 cho mức AA. Nhiều hệ thống thiết kế nhắm đến 4,5:1 ở mọi nơi để chữ vẫn dễ đọc trên màn hình tối và dưới ánh nắng.
- Tôi có thể dùng mã HEX 8 chữ số có độ trong suốt không?
- Có, trong CSS. Hai chữ số cuối là kênh alpha, nên #2F6FED80 là cùng màu xanh dương đó ở độ mờ khoảng 50%. Bộ chọn màu này làm việc với màu đục nên hiển thị sáu chữ số; hãy tự thêm cặp alpha khi cần.
- CSS có bao nhiêu màu được đặt tên?
- CSS Color Module Level 4 định nghĩa 148 từ khóa màu, tính cả các cách viết trùng như gray và grey. Mới nhất là rebeccapurple (#663399), được thêm năm 2014 để tưởng nhớ Rebecca Meyer, con gái của Eric Meyer, tác giả CSS.