Chuyển đổi màu (HEX, RGB, HSL)

Quy trình thiết kế và phát triển kết hợp nhiều cách để mô tả cùng một màu trên màn hình. HEX (#RRGGBB) nhỏ gọn trong bảng kiểm tra CSS và Figma. RGB liệt kê các kênh màu đỏ, xanh lục và xanh lam từ 0–255 — ngôn ngữ gốc của màn hình và API canvas. HSL thể hiện màu sắc trên bánh xe 0–360°, độ bão hòa ở mức sống động 0–100% và độ sáng ở mức 0–100% độ sáng, điều mà nhiều nhà thiết kế thấy dễ dàng hơn khi điều chỉnh tông màu mà không làm trôi màu sắc.

Tất cả ba định dạng trong công cụ này đều ánh xạ tới cùng một gam màu sRGB khi được chuyển đổi chính xác. HEX và RGB là nghịch đảo chính xác ở độ chính xác 8 bit. HSL sử dụng toán học dấu phẩy động trong nội bộ; sau khi chuyển đổi khứ hồi, bạn có thể thấy các giá trị kênh khác nhau một bước — điều bình thường đối với quy trình chỉnh sửa HSL.

Chuyển đổi điều khiển phân đoạn Đầu vào giữa HEX và RGB tùy thuộc vào những gì bàn giao của bạn cung cấp. Ở chế độ HEX, nhập có hoặc không có hàm băm — #3B82F6 và 3B82F6 đều hoạt động, cũng như tốc ký ba chữ số #3BF được mở rộng thành #33BBFF. Ở chế độ RGB, nhập các kênh riêng biệt; công cụ này xuất ra chữ HEX viết hoa cộng với chuỗi CSS rgb() và phân tích HSL.

Ví dụ hoạt động với trường HEX mặc định #3B82F6: red = 0x3B = 59, green = 0x82 = 130, blue = 0xF6 = 246. Tóm tắt hiển thị RGB(59, 130, 246) — một màu xanh bão hòa phổ biến trong bảng màu giao diện người dùng Tailwind. HSL đạt gần 217° màu sắc, độ bão hòa 91%, độ sáng 60%. Chuyển sang chế độ RGB với các giá trị kênh đó và bạn sẽ nhận lại được HEX tương tự.

HSL rất hữu ích khi xây dựng mã thông báo thiết kế: tăng độ sáng để biến #3B82F6 thành trạng thái di chuột mà không cần chọn màu mới. Độ bão hòa thấp hơn cho nền bị tắt tiếng. Đối với các chủ đề có lập trình, nhiều nhóm lưu trữ HSL trong thuộc tính tùy chỉnh CSS vì cú pháp alpha `hsl(217 91% 60% / 0.5)` đọc rõ ràng.

Các lỗi phổ biến bao gồm giả định HEX bao gồm alpha (#RRGGBBAA tám chữ số không được hỗ trợ ở đây), trộn 0–1 RGB chuẩn hóa từ một số API đồ họa mà không nhân với 255 và so sánh các mẫu Pantone được in với hex sRGB trên màn hình chưa được hiệu chỉnh. Màu web là sRGB ánh sáng phát ra - Chuyển đổi in CMYK cần có cấu hình riêng.

Tốc ký HEX gồm ba chữ số trùng lặp với mỗi nibble - #ABC trở thành #AABBCC. Ký tự không hợp lệ hoặc độ dài sai sẽ trả về dòng tiêu đề gạch ngang yêu cầu màu hợp lệ như #3B82F6. Các màu CSS được đặt tên (rebeccapurple, cornflowerblue) không được phân tích cú pháp - trước tiên hãy chuyển đổi chúng thành HEX trong DevTools, sau đó dán vào đây.

Giới hạn: chỉ sRGB mờ — không có CMYK, Lab, Display-P3 hoặc hệ lục phân alpha gồm 8 chữ số. Mô phỏng mù màu và kiểm tra độ tương phản thuộc về máy tính tỷ lệ tương phản. Màn hình WCG có thể hiển thị màu xanh lam bão hòa khác với bản xem trước sRGB trên màn hình tiêu chuẩn.