Bộ chuyển đổi màu (HEX, RGB, HSL)
Chuyển đổi màu giữa HEX (#RRGGBB), RGB (0–255) và HSL (màu sắc, độ bão hòa, độ sáng) trong thời gian thực. Điều chỉnh các giá trị bộ chọn hoặc loại để xem tất cả các định dạng được cập nhật cùng nhau — lý tưởng cho CSS, chuyển giao Figma và nguyên tắc thương hiệu. HSL thực hiện các chỉnh sửa trực quan (sáng hơn/tối hơn mà không bị dịch chuyển màu sắc) dễ dàng hơn so với chỉnh sửa chữ số thập lục phân.
Màu
Kết quả
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
Cách chuyển đổi màu sắc
1. Chọn màu một cách trực quan hoặc nhập các giá trị HEX, RGB hoặc HSL.
2. Xem các giá trị tương đương ở tất cả các định dạng được hỗ trợ ngay lập tức.
3. Tinh chỉnh độ sáng HSL cho trạng thái di chuột trong khi vẫn giữ được màu sắc thương hiệu.
4. Sao chép định dạng mà ngăn xếp của bạn cần (#hex cho CSS, rgb() cho các trình duyệt hiện đại).
Ví dụ chuyển đổi màu
Thương hiệu màu xanh #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Làm tối di chuột: hsl(217, 84%, 45%) mà không cần đoán hex.
CSS rgb sang HEX cho SVG
rgb(255, 87, 51) → #FF5733 dành cho tài nguyên màu tô SVG và Android XML.
Màu xám trung tính cho đường viền
hsl(220, 10%, 90%) → màu xám rất nhạt; tăng độ bão hòa một chút cho nền giao diện người dùng có màu.
Khi nào nên dùng công cụ này
• Khi bạn dịch các mã thông báo thiết kế giữa HEX trong Figma và HSL trong các biến CSS.
• Khi bạn xây dựng các chủ đề sáng/tối nhất quán bằng cách thay đổi độ sáng HSL.
• Khi bạn ghi lại bảng màu thương hiệu cho nhà phát triển và nhà tiếp thị.
Khi nào nên chọn công cụ khác
• Khi bạn phải xác minh độ tương phản WCAG — hãy dùng trình kiểm tra độ tương phản.
• Khi bạn cần CMYK hoặc Pantone để in — hãy dùng dành riêng cho in ấn tools.
• Khi bạn tạo độ dốc đầy đủ — hãy dùng trình tạo độ dốc CSS.
Lý thuyết màu sắc cho giao diện người dùng
Các màu bổ sung nằm đối diện nhau trên bánh xe màu sắc (cách nhau 180°) — độ tương phản cao, sử dụng tiết kiệm cho CTA. Màu sắc tương tự (±30°) tạo cảm giác hài hòa cho bảng điều khiển. Chrome UI trung tính thường sử dụng màu xanh lam hoặc xám có độ bão hòa thấp (hsl 220, 10%, 96%) thay vì #EEE thuần túy, có thể trông ấm/lạnh dưới các màn hình khác nhau. Giới hạn bảng màu thương hiệu ở một màu chính, 2–3 màu trung tính và màu xanh/đỏ theo ngữ nghĩa cho trạng thái.
Khả năng truy cập bắt đầu khi chuyển đổi
Màu tím #7C3AED đẹp trên nền trắng có thể không tương phản được với văn bản nhỏ. Sau khi chọn màu ở đây, hãy chạy các cặp tiền cảnh/nền sau thông qua trình kiểm tra độ tương phản. Ưu tiên các chỉnh sửa HSL để khắc phục lỗi: làm tối văn bản hoặc làm sáng nền trong khi vẫn giữ được màu sắc. Đừng chỉ dựa vào màu sắc để phát hiện lỗi — hãy ghép nối với các biểu tượng và nhãn (WCAG 1.4.1).
Câu hỏi thường gặp
HSL tốt cho việc gì?
Điều chỉnh độ sáng và độ bão hòa trong khi vẫn giữ màu sắc ổn định — ví dụ: chính, di chuột chính, tắt tiếng chính từ một giá trị màu sắc.
viết tắt HEX #RGB?
#F53 mở rộng thành #FF5533. Chúng tôi chấp nhận hệ thập lục phân 3 hoặc 6 chữ số (# tùy chọn).
sRGB so với display-P3?
Công cụ này sử dụng sRGB, tiêu chuẩn cho CSS web. Màn hình gam màu rộng có thể hiển thị hơi khác một chút.
Alpha / minh bạch?
HEX 8 chữ số (#RRGGBBAA) và rgba() có thể được hỗ trợ khi công cụ hiển thị alpha — kiểm tra các trường giao diện người dùng.
Tại sao tổng RGB của tôi trông sai ở dạng hex?
Mỗi kênh là 0–255 → hai chữ số hex. 255 = FF, không phải nối “255”.
Dữ liệu của tôi có bị gửi lên máy chủ không?
Không.
Công cụ này có miễn phí không?
Có.