Color Converter
Type any format — HEX, RGB, and HSL sync in real time.
Color input
Type any format to sync all three
HSL Sliders
Drag to mix
H
24°
S
95%
L
53%
Quick presets
Live preview
Swatch and contrast analysis
Color preview
Enter a color to preview
WCAG Contrast
AA / AAA
Aa
White text
Aa
Black text
Nearest CSS named color
—
—
Exact match
About Color Models
HEX is shorthand for RGB in hexadecimal — #FF6347 equals rgb(255,99,71). Each two-character pair encodes a channel from 0–255. Three-digit shorthand (#F00) expands to #FF0000.
HSL describes color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). For designers, adjusting lightness or saturation is more intuitive than editing raw RGB values.
WCAG contrast ratio uses the relative luminance formula. AA requires ≥ 4.5:1 for normal text; AAA requires ≥ 7:1. The nearest CSS name is found by Euclidean distance across 148 CSS Color Level 4 entries.
Quick guide
Use cases, answers, and nearby tools
Compact below-tool notes that help first-run users and repeated visitors move faster without changing the main interface.
Chinese search: 顏色轉換、HEX RGB 轉換、色彩代碼、WCAG 對比度、CSS 顏色名稱
How to use
Run a clean first pass
- Enter a color value in any field (HEX / RGB / HSL) or pick with the color wheel.
- The live swatch, WCAG contrast tiles, and nearest CSS name update instantly.
- Click ⎘ to copy any format, or tap a preset chip to load an example.
Examples
Real jobs this page helps with
- Design to CSSConvert a Figma HEX to HSL for easy lightness tweaks in code.
- Accessibility auditCheck text-background contrast ratios against WCAG AA and AAA thresholds.
FAQ
What people usually want to know
- Does it support alpha transparency?
- Not currently — only opaque RGB color space values.
- How is the nearest CSS name found?
- By Euclidean distance in RGB space across 148 standard CSS color names.