Trình chuyển đổi màu

Chuyển đổi giữa HEX, RGB, HSL, HSV và CMYK. Xem trước trực tiếp. Trình kiểm tra tương phản WCAG cho khả năng tiếp cận. Không có gì rời khỏi trình duyệt.

Cách Trình chuyển đổi màu hoạt động

Công cụ chuyển đổi màu sắc dịch bất kỳ màu nào giữa các định dạng HEX, RGB, HSL, HSV và CMYK ngay khi bạn gõ. Nó cũng chạy kiểm tra tương phản WCAG giữa hai màu bất kỳ bạn chọn, hiển thị tỉ lệ tương phản và kết quả đạt/không đạt AA/AAA cho văn bản thông thường, văn bản lớn và thành phần UI. Tất cả tính toán diễn ra trong trình duyệt mà không có dữ liệu nào được gửi đi; không có gì bạn gõ rời thiết bị của bạn.

Hiểu cách màu giống nhau trông như thế nào trên các mô hình màu là hữu ích trong việc bàn giao thiết kế. Nhà thiết kế có thể chỉ định màu thương hiệu là HEX #1A4F8C; lập trình viên CSS cần tương đương HSL để tạo theme; nhóm in cần phân tích CMYK. Công cụ này thực hiện chuyển đổi theo tất cả hướng cùng lúc để bạn không phải chạy nhiều bộ chuyển đổi riêng lẻ.

Tác giả: Bastien Sulyan

Cách sử dụng Trình chuyển đổi màu, từng bước

Gõ giá trị HEX, nhấp ô màu, hoặc nhập giá trị RGB, HSL, HSV hoặc CMYK vào các trường tương ứng.
Tất cả biểu diễn định dạng khác cập nhật ngay lập tức để hiển thị màu tương đương.
Để chạy kiểm tra tương phản, chọn màu nền trước và màu nền sau bằng hai bộ chọn màu.
Đọc tỉ lệ tương phản WCAG và huy hiệu đạt/không đạt cho các mức tuân thủ AA và AAA.
Sao chép bất kỳ giá trị màu nào bằng biểu tượng sao chép bên cạnh mỗi trường.

Trường hợp sử dụng thường gặp

Nhà thiết kế UI chuyển đổi mã HEX thương hiệu sang HSL để viết thuộc tính tùy chỉnh CSS cho hệ thống theme.
Lập trình viên web kiểm tra tỉ lệ tương phản giữa màu văn bản và nền trước khi giao thành phần để xác nhận tuân thủ WCAG AA.
Nhà thiết kế in nhận màu HEX web và cần tương đương CMYK để khớp trong tờ rơi in.
Lập trình viên cần phân tích RGB của design token để truyền giá trị kênh riêng lẻ cho hàm vẽ canvas.

Câu hỏi thường gặp

Công cụ có hỗ trợ giá trị alpha (độ trong suốt) không?

Bộ chuyển đổi hiện tại hoạt động với màu hoàn toàn không trong suốt (alpha = 1). HEXA (hex 8 chữ số) và RGBA chưa trong phạm vi. Để đặt độ mờ, hãy thiết lập kênh alpha trong CSS của bạn riêng bằng ký hiệu rgba() hoặc oklch().

Các màu tôi nhập có được lưu trữ hoặc gửi đi đâu đó không?

Không. Chuyển đổi màu là số học thuần túy (ánh xạ lại kênh và thu phóng phạm vi) chạy hoàn toàn trong engine JavaScript của trình duyệt. Không có gì bạn gõ ở đây đến bất kỳ máy chủ hay dịch vụ bên ngoài nào.

Bộ kiểm tra hỗ trợ những mức tương phản WCAG nào?

Công cụ báo cáo theo tiêu chí thành công WCAG 2.1: AA yêu cầu tỉ lệ tương phản tối thiểu 4.5:1 cho văn bản thông thường (dưới 18pt hoặc 14pt đậm) và 3:1 cho văn bản lớn và thành phần UI. AAA yêu cầu 7:1 cho văn bản thông thường và 4.5:1 cho văn bản lớn.

Tại sao giá trị CMYK khác nhau giữa công cụ này và phần mềm thiết kế chuyên nghiệp?

Chuyển đổi RGB sang CMYK mà công cụ này thực hiện là công thức toán học không có profile màu. Các ứng dụng thiết kế chuyên nghiệp áp dụng profile màu ICC tính đến độ khuếch đại điểm mực và đặc tính nền. Các giá trị CMYK ở đây hữu ích để ước tính; để in sản xuất, luôn áp dụng profile máy in của bạn trong phần mềm chuyên dụng.

Tôi có thể chuyển đổi tên màu CSS như 'cornflowerblue' ở đây không?

Màu được đặt tên trong CSS không được gõ trực tiếp vào các trường bộ chuyển đổi. Để chuyển đổi màu được đặt tên, trước tiên hãy tìm giá trị HEX của nó trong tài liệu tham khảo CSS (cornflowerblue là #6495ED), rồi dán HEX đó vào trường HEX để xem tất cả các định dạng khác.

Công cụ có hoạt động ngoại tuyến sau khi trang tải không?

Có. Chuyển đổi màu là số học không có phụ thuộc bên ngoài. Sau khi trang ở trong cache trình duyệt, bạn có thể mở nó mà không cần kết nối mạng và tất cả chuyển đổi sẽ hoạt động bình thường.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ lập trình