Trình chuyển đổi màu sắc và kiểm tra độ tương phản

Công cụ này chuyển đổi màu giữa HEX, RGB, HSL và CMYK theo thời gian thực. Chọn màu bằng bảng chọn màu hoặc nhập vào bất kỳ ô nào, ba ô còn lại sẽ cập nhật ngay, mỗi ô đều có nút sao chép. Ví dụ, màu hổ phách #F59E0B tương ứng với rgb(245, 158, 11), hsl(38, 92%, 50%) và cmyk(0%, 36%, 96%, 4%). Ô HEX cũng nhận dạng viết tắt ba chữ số như #F90 và tự mở rộng thành #FF9900.

Mỗi định dạng có công dụng riêng. HEX là chuẩn trong mã web và phần mềm thiết kế; RGB ứng với ánh sáng đỏ, xanh lá, xanh dương của màn hình; HSL mô tả sắc độ, độ bão hòa và độ sáng, nên muốn có tông sáng hơn hay tối hơn của cùng một màu chỉ cần đổi giá trị L, rất tiện khi viết CSS; CMYK là bốn màu mực in. Khi nhập RGB, HSL hoặc CMYK, hãy dùng số nguyên cách nhau bằng dấu phẩy như rgb(255, 153, 0), hsl(36, 100%, 50%) hoặc cmyk(0%, 40%, 100%, 0%). Công cụ chưa hỗ trợ độ trong suốt (alpha).

Lưu ý rằng CMYK ở đây được tính từ RGB bằng công thức đơn giản, không áp dụng hồ sơ màu ICC. Màu in thực tế phụ thuộc vào giấy, mực và máy in, nên trước khi in hãy dựa vào bảng màu hoặc thiết lập của nhà in. Ngoài ra, HSL được làm tròn thành số nguyên nên khi đổi ngược từ HSL sang HEX đôi khi một kênh lệch một bậc; đó là làm tròn bình thường chứ không phải lỗi.

Ở thẻ kiểm tra độ tương phản, bạn chọn màu chữ và màu nền. Công cụ tính tỉ lệ tương phản theo công thức WCAG 2.1 và cho biết có đạt chuẩn cho chữ thường (AA 4.5:1, AAA 7:1), chữ lớn (AA 3:1, AAA 4.5:1) và thành phần giao diện (3:1) hay không, kèm bản xem trước trực tiếp. Ví dụ, chữ xám #767676 trên nền trắng đạt 4.54:1, vừa qua chuẩn AA, còn #777777 chỉ 4.47:1 nên không đạt. Để phân tích kỹ hơn kèm gợi ý màu, hãy dùng công cụ Phân tích độ tương phản màu trên trang này.