Bộ chuyển đổi màu — bộ chuyển đổi HEX, RGB, HSL trực tuyến _

Chuyển đổi màu là gì?

Mọi màu mà trình duyệt của bạn hiển thị cuối cùng đều là một bộ ba sRGB — ba con số từ 0 đến 255 cho các kênh đỏ, xanh lục và xanh lam, cộng với một kênh alpha tùy chọn. Đặc tả CSS Color Level 4 định nghĩa một số định dạng văn bản chuyển qua chuyển lại về cùng một bộ ba, cộng với không gian màu đồng đều về mặt cảm thụ OKLCH. Công cụ này đọc bất kỳ định dạng nào trong số đó, chuyển đổi sang tất cả các định dạng còn lại và báo cáo tỷ lệ tương phản WCAG 2.1 so với một màu thứ hai để bạn có thể tự tin phát hành các giao diện có thể truy cập.

Chuyển đổi màu hoạt động như thế nào?

Việc chuyển đổi là một loạt các phép biến đổi tuyến tính và phi tuyến đã được định nghĩa rõ ràng. Mỗi bước đều chạy trong trình duyệt của bạn — không có đầu vào nào đến được máy chủ của chúng tôi:

1. Đầu vào của bạn được phân tích cú pháp. Công cụ tự động phát hiện HEX 3, 4, 6 hoặc 8 chữ số, các dạng hàm rgb()/rgba()/hsl()/hsla()/hsv()/hwb() ở cả cú pháp dấu phẩy cũ hoặc cú pháp dấu gạch chéo-alpha hiện đại, hoặc bất kỳ một trong 150 màu CSS có tên (bao gồm cả rebeccapurple).
2. Màu đã phân tích được chuẩn hóa thành sRGB chuẩn — bốn số thực {r, g, b, a} mỗi giá trị trong khoảng 0–1. Đây là nguồn sự thật duy nhất mà mọi định dạng đầu ra được suy ra.
3. HEX có được bằng cách làm tròn từng kênh thành giá trị byte 0–255 của nó và nối các chữ số hex lại. RGB / RGBA in cùng các byte đó. HSL và HSV áp dụng các thuật toán tọa độ trụ chuẩn của W3C; HWB suy ra hue từ HSV, whiteness từ min(r, g, b), và blackness từ 1 - max(r, g, b).
4. CMYK là một xấp xỉ thô — k = 1 - max(r, g, b), sau đó c, m, y từ các kênh còn lại. Phù hợp để xem trước trên màn hình nhưng không dành cho in ấn: đầu ra CMYK thực sự cần một hồ sơ ICC mà công cụ này có chủ ý không nhúng vào.
5. OKLCH tuân theo đường đi xuôi của css-color-4: sRGB được tuyến tính hóa, nhân qua ma trận LMS, lấy căn bậc ba, nhân qua ma trận LMS-sang-OKLab, và cuối cùng chuyển từ OKLab dạng chữ nhật sang OKLCH dạng cực. OKLCH đồng đều về mặt cảm thụ, điều đó khiến nó là không gian phù hợp để thiết kế các bảng màu trông cân bằng trong mắt con người.

Tại sao nên dùng bộ chuyển đổi màu này?

• Quyền riêng tư: mọi chuyển đổi đều chạy trong trình duyệt của bạn bằng JavaScript thuần. Màu bạn dán không bao giờ rời khỏi thiết bị của bạn, điều đó quan trọng đối với công việc thương hiệu chưa ra mắt, hệ thống thiết kế nội bộ và bản mockup của khách hàng theo NDA.
• Bàn giao từ nhà thiết kế sang nhà phát triển: dán HEX từ Figma và đọc lại chuỗi rgb() cho cấu hình Tailwind, chuỗi hsl() cho thuộc tính CSS tùy chỉnh, hoặc chuỗi oklch() cho bảng màu hiện đại — mọi định dạng tại một nơi, không cần sao chép-dán giữa các tab.
• Độ chính xác WCAG: trình kiểm tra độ tương phản dùng đúng công thức luminance tương đối WCAG 2.1 và các ngưỡng AA (4.5 / 3.0) và AAA (7.0 / 4.5) đã công bố cho văn bản thường và văn bản lớn. Tỷ lệ được báo cáo khớp với máy tính thủ công trong phạm vi 0.01.
• Suy ra chế độ tối và bảng màu: HSL và OKLCH bộc lộ độ sáng thành một kênh duy nhất, nên rất dễ dịch một màu thương hiệu lên hoặc xuống trục độ sáng để suy ra các token chế độ tối tương ứng hoặc tạo một bậc thang bảng màu 10 bước từ một hạt giống duy nhất.

Các ứng dụng phổ biến của chuyển đổi màu là gì?

Chuyển đổi màu xuất hiện trong phát triển web, thiết kế và công việc về khả năng tiếp cận:

• Hệ thống thiết kế: chuyển một HEX thương hiệu thành các token HSL và OKLCH tương ứng cho thang thuộc tính CSS tùy chỉnh, sau đó xác minh rằng mọi tổ hợp token đều vượt qua WCAG AA so với nền trang.
• Kiểm toán khả năng tiếp cận: dán một cặp tiền cảnh và nền từ một màn hình sản phẩm thực và đọc tỷ lệ tương phản cộng với các phán quyết AA/AAA cho cả văn bản trọng số thường và trọng số lớn chỉ trong một cái nhìn.
• Chuyển qua chuyển lại giữa các công cụ: lấy một màu từ trình chọn màu trên ảnh chụp màn hình (HEX), dán vào đây, và sao chép chuỗi hsl() hoặc oklch() thẳng vào Tailwind, token Figma, hoặc một chủ đề CSS-in-JS.

Ví dụ về chuyển đổi màu trông như thế nào?

Lấy rebeccapurple nổi tiếng. Tra cứu màu có tên phân giải nó thành #663399. Chuyển đổi RGB cho ra rgb(102, 51, 153). Chuyển đổi HSL cho ra hsl(270, 50%, 40%) — một sắc thái tím, bão hòa một nửa, sáng bốn phần mười. Kiểm tra màu đó so với màu trắng tinh bằng công cụ tương phản trả về tỷ lệ gần 7.39, vượt qua AAA (7.0) cho văn bản thường và AAA (4.5) cho văn bản lớn — một lựa chọn tiền cảnh mạnh và có thể truy cập. Chuyển #663399 qua RGB → HSL → RGB → HEX trả về đúng chuỗi ban đầu, từng byte một.

Hãy dùng bộ chuyển đổi này làm tài liệu tham khảo nhanh cho bất kỳ màu nào bạn gặp — trong code, trong tệp thiết kế, hoặc trong một ảnh chụp màn hình — và dùng trình kiểm tra độ tương phản như một bước kiểm tra trước khi phát hành. Mọi thứ chạy cục bộ, không có gì được ghi nhật ký, và phép toán chuyển đổi tuân theo các đặc tả W3C và WCAG đã công bố nên các con số khớp với những gì công cụ kiểm toán hoặc devtools trình duyệt của bạn sẽ báo cáo.