Công cụ chuyển đổi màu
Dán một màu ở bất kỳ định dạng CSS nào và nhận tất cả định dạng khác, kèm độ tương phản.
Dán HEX, rgb(), hsl(), hwb() hoặc tên màu CSS, hoặc chọn một màu
Sắc độ sáng và tối
Giá trị
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Chỉ là giá trị gần đúng. Màu khi in phụ thuộc vào mực và giấy, nên hãy hỏi nhà in để có giá trị chính xác.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Tên CSS gần nhất
- royalblue
Độ tương phản (WCAG)
Chữ màu này trên từng nền. Chữ thường cần 4.5:1 để đạt AA và 7:1 để đạt AAA; chữ lớn (18pt, hoặc 14pt đậm) cần 3:1 và 4.5:1.
Trên nền trắng
Chữ lớn
Con cáo nâu nhanh nhẹn nhảy qua chú chó lười
5.71:1
- AA chữ thường đạt
- AAA chữ thường không đạt
- AA chữ lớn đạt
- AAA chữ lớn đạt
Trên nền đen
Chữ lớn
Con cáo nâu nhanh nhẹn nhảy qua chú chó lười
3.68:1
- AA chữ thường không đạt
- AAA chữ thường không đạt
- AA chữ lớn đạt
- AAA chữ lớn không đạt
Trên #ffffff
Chữ lớn
Con cáo nâu nhanh nhẹn nhảy qua chú chó lười
5.71:1
- AA chữ thường đạt
- AAA chữ thường không đạt
- AA chữ lớn đạt
- AAA chữ lớn đạt
Tiếp theo: Làm nền trong suốt · Tạo biểu đồ
Cách sử dụng Chuyển đổi màu
Nhập một màu
Dán mã HEX, rgb(), hsl(), hwb() hoặc một tên như tomato, hoặc chọn màu bằng bảng chọn màu.
Sao chép định dạng bạn cần
Mọi định dạng cập nhật ngay khi bạn gõ. Sao chép bất kỳ định dạng nào bằng nút của nó, hoặc chọn định dạng quen dùng cho nút Sao chép lớn.
Kiểm tra độ tương phản
Xem tỷ lệ tương phản WCAG trên nền trắng, nền đen và nền bạn chọn, với kết quả AA và AAA cho chữ thường và chữ lớn.
Tại sao nên dùng Utils365
Đọc mọi màu CSS
HEX 3, 4, 6 và 8 chữ số, rgb() và hsl() theo cú pháp dấu phẩy cũ hoặc dấu cách mới, hwb(), phần trăm, đơn vị sắc độ và đủ 148 tên màu.
Cả định dạng hiện đại
Nhận OKLCH cho design system và CSS gam màu rộng, HWB và HSV cho bảng chọn màu, và HEX có alpha cho màu trong suốt.
Tích hợp kiểm tra trợ năng
Tỷ lệ tương phản tuân theo đúng WCAG 2 và không bao giờ được làm tròn lên để đạt, nên 4.49:1 không được tính là 4.5:1.
Sắc độ sáng và tối
Năm bậc sáng hơn và năm bậc tối hơn nằm dưới ô màu. Nhấn vào một bậc để đặt làm màu hiện tại.
Các câu hỏi thường gặp
HEX và RGB khác nhau thế nào?
Bản thân màu không khác gì. Cả hai đều cho đỏ, lục và lam từ 0 đến 255. HEX viết mỗi giá trị bằng hai chữ số thập lục phân, nên rgb(58, 91, 217) là #3a5bd9. HEX ngắn hơn, còn rgb() dễ đọc và chỉnh tay hơn.
HSL là gì?
Sắc độ (hue), độ bão hòa (saturation) và độ sáng (lightness). Sắc độ là vị trí trên bánh xe màu tính bằng độ (0 là đỏ, 120 là lục, 240 là lam), độ bão hòa là mức rực rỡ, và độ sáng chạy từ đen ở 0% đến trắng ở 100%. Nhờ đó dễ viết các phiên bản sáng hơn, tối hơn hoặc dịu hơn của một màu.
Vì sao CMYK không khớp với màu khi in?
Màn hình trộn ánh sáng còn máy in trộn mực, và kết quả phụ thuộc vào mực, giấy và profile máy in. CMYK hiển thị dùng công thức chuẩn đơn giản, nên hãy coi đó là điểm khởi đầu và hỏi nhà in để có giá trị chính xác.
Tỷ lệ tương phản WCAG là gì?
Thước đo độ chênh lệch độ sáng giữa hai màu, từ 1:1 (giống nhau) đến 21:1 (đen trên trắng). WCAG AA yêu cầu ít nhất 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.
OKLCH là gì?
Một cách mới để viết màu trong CSS theo độ sáng, độ đậm màu (chroma) và sắc độ, dựa trên cách con người cảm nhận màu. Thay đổi độ sáng mà sắc độ trông vẫn như cũ, nên OKLCH được ưa dùng cho design system và thang màu.
Tên màu hoạt động thế nào?
Nếu màu khớp chính xác với một trong 148 tên màu CSS, tên đó được hiển thị. Nếu không, bạn nhận được tên gần nhất về mặt thị giác, rất tiện để mô tả màu bằng lời.