UtilitySansar
Tất cả công cụ
Danh mục
Lập trình viênToánVăn bảnThiết kếMã hóaBảo mậtTiếp thịDữ liệuTài chínhĐám mây
Thiết kế

Color Converter

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

Tóm tắt công cụ

Công cụ này nhận đầu vào có cấu trúc và trả về đầu ra xác định ngay trong trình duyệt, không tải lên máy chủ.

Tên công cụ
Color Converter
Mục đích đầu vào
Cung cấp nội dung nguồn để biến đổi, xác thực hoặc phân tích.
Mục đích đầu ra
Nhận đầu ra chuẩn hóa thuận tiện để sao chép, tái sử dụng hoặc gỡ lỗi.
Đầu vào ví dụ
#3b82f6
Đầu ra ví dụ
rgb(59, 130, 246) · hsl(217, 91%, 60%)
#3b82f6
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Contrast on white: 3.68:1 · on black: 5.71:1

Palette

Giới thiệu công cụ

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

Tổng quan công cụ

HEX is compact, RGB is intuitive for mixing, and HSL is best for describing tints, shades, and hue shifts. This converter keeps all three in sync as you edit any one. The palette row shows five lightness-shifted variants of your base color, handy for picking hover, focus, or background tints. All computation is pure client-side — nothing is uploaded.

Trường hợp sử dụng

  • Use Color Converter when you need fast convert hex, rgb, and hsl color formats instantly with a visual picker, palette suggestions, and copyable outputs.
  • Handle design workflows directly in the browser with no install required.
  • Support SEO long-tail intent by covering quick checks, troubleshooting, and one-off conversions.

Ví dụ đầu vào/đầu ra

Mục đích đầu vào
#3b82f6
Mục đích đầu ra
rgb(59, 130, 246) · hsl(217, 91%, 60%)
Mục đích đầu vào
#fff
Mục đích đầu ra
#ffffff · rgb(255, 255, 255) · hsl(0, 0%, 100%)

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

Why is my 3-digit HEX auto-expanded?+
3-digit HEX is shorthand for the 6-digit version (#abc → #aabbcc). The tool normalizes to 6 digits so the value matches what CSS actually parses.
What does the contrast ratio mean?+
It is the WCAG luminance contrast ratio between your color and pure white or black. 4.5:1 is the AA threshold for normal text; 7:1 is AAA.
How is the palette generated?+
It takes the base color's HSL value and shifts lightness in ±20% and ±40% steps, keeping hue and saturation constant.

Share this tool

Khám phá thêm công cụ

Khám phá các tiện ích liên quan trong danh mục Thiết kế bên dưới.

Xem tất cả Thiết kế

Công cụ liên quan

Tiện ích được tuyển chọn có thể hữu ích cho bạn