Color Converter
Convert colors between HEX, RGB, HSL, OKLCH, and named CSS colors. Paste any format or use the color picker — get all formats and contrast preview instantly.
About this tool
A color on the web can be written in several formats, and this tool converts between all of them instantly. HEX (#4a7aef) packs the red, green, and blue channels into a short string — the most common form in CSS and design tools. RGB (rgb(74, 122, 239)) spells out the same channels as decimal numbers from 0–255. HSL (hsl(220, 84%, 61%)) describes color the way humans think about it — a hue around the wheel, saturation, and lightness — which makes it the go-to format for building palettes and creating tints and shades. The tool also converts to and from OKLCH, the newer perceptual space used by Tailwind v4; for a dedicated OKLCH picker with P3 gamut checks, see the OKLCH Color Converter & Picker.
Drag the native color picker or type into any field — every format updates live. The tool recognises all 148 named CSS colors (tomato, rebeccapurple, cornflowerblue), so you can paste a name and instantly see its hex and RGB equivalents. This is especially useful when inheriting a codebase that uses named colors and you need the actual values for a design system or gradient.
Below the format fields, the Contrast panel tests your color against a chosen background (white by default) for WCAG 2.1 compliance. It shows the exact contrast ratio plus AA / AAA / AA-large verdicts, with a live text-on-background preview and side-by-side rows for pure white and pure black — so you can immediately see which foreground color passes at each level.
Example: #4a7aef = rgb(74, 122, 239) = hsl(220, 84%, 61%). All three render the exact same blue on screen; the format is just a matter of where the color is being used.
FAQ
What is the difference between HEX, RGB, and HSL? ›
They all describe the same RGB color. HEX and RGB use the same red/green/blue values in different notations; HSL expresses the color as hue (0–360°), saturation, and lightness, which is more intuitive for creating tints and shades.
What do the AA and AAA contrast badges mean? ›
They reflect the WCAG 2.1 accessibility thresholds. AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large. Click a row to copy the ratio value.
When should I use 3-digit vs 6-digit HEX? ›
A 3-digit hex like #4af is shorthand for #44aaff, where each channel has both digits identical. Use it when the color happens to fit; otherwise the 6-digit form gives you the full range of 16 million colors.
Can this converter handle alpha (transparency)? ›
This tool focuses on the four core formats. For colors with transparency use 8-digit hex (#rrggbbaa) or the rgba()/hsla() notation in your CSS — both are supported natively by modern browsers.
How many named CSS colors are there? ›
There are 148 named colors in the CSS Color Module Level 4 specification, from basic names like "red" to specific ones like "rebeccapurple". Type any valid CSS color name into the input box to see its hex and RGB values instantly.
I need a full WCAG contrast report with pass/fail badges and fix suggestions. ›
Use the dedicated <a href="/contrast-checker">Color Contrast Checker</a> — it reports exact ratios, AA/AAA/large-text pass/fail badges for each WCAG level, a live text-on-background preview, and automatically suggests the nearest compliant color when a pair fails. The contrast preview here gives you a quick ratio at a glance; the Contrast Checker gives you the full compliance report.