Color Converter & Picker
Paste or pick any CSS color and get every format back: HEX, RGB, HSL, HWB, OKLCH, Lab, Display-P3. With honest alpha-aware contrast checking, gamut mapping, perceptual palettes and design-token exports. Everything runs locally.
Advanced spaces & developer export
Contrast checker
WCAG contrast applies to the final rendered colors. Transparent foregrounds and backgrounds are composited over the backdrop below, exactly like a browser renders them, before the ratio is calculated.
AA needs 4.5:1 for normal text, 3:1 for large (24px, or 18.5px bold). AAA needs 7:1 and 4.5:1.
Tints, shades & harmonies
Generated in OKLCH (perceptually even lightness steps, constant hue) and gamut-mapped to sRGB. Click any swatch to copy its hex.
One engine, no parallel math
Every number on this page comes from a single CSS Color 4 engine: parsing, format output, alpha compositing, WCAG contrast, gamut checks and mapping, perceptual scales and the accessibility suggestions. That matters because color tools usually rot at the seams, a hand-rolled luminance formula here, an HSL rotation there, until the preview, the badge and the copied value quietly disagree. Here the preview is rendered from the same composited colors the contrast math used, the suggestion is re-verified after hex rounding, and out-of-gamut conversions say so instead of clipping silently.
The practical workflow: paste anything, from a legacy rgba() to a wide-gamut color(display-p3 …), tweak in HSL or OKLCH sliders, check the pair against your background, let the tool nudge it to AA if needed, then export CSS variables, an @supports fallback pair, SCSS, a design token or a Tailwind v4 theme block.
Color converter FAQ
Which color formats can I convert between?
Everything in CSS Color 4: HEX (3/4/6/8 digit), RGB, HSL, HWB and all 148 named colors including transparent, plus the modern spaces OKLCH, OKLab, Lab, LCH, Display-P3 and XYZ. Both legacy comma syntax and modern space syntax parse, hue accepts deg, rad, grad and turn, and alpha works as a number or percentage. One tested engine handles every conversion.
How does the contrast checker handle transparent colors?
Correctly, which is rarer than it should be: a semi-transparent foreground is composited over the background, and the background over the backdrop, exactly the way a browser renders them, before the WCAG ratio is calculated. A fully transparent red over white therefore reads 1.00:1, not the 4:1 a naive checker computes from its ignored RGB channels. The preview shows those same composited colors, so what you see is what was measured.
What is OKLCH and why should I care?
OKLCH is the perceptually uniform color space CSS adopted for modern work: equal lightness steps look equally spaced to the human eye, and changing hue does not accidentally change perceived brightness the way HSL rotation does. That makes it the right space for design-system color scales, which is why this tool generates tints, shades and harmonies in OKLCH, and why the picker has an OKLCH editing mode.
What does "outside sRGB" mean on my color?
Your color, for example a vivid Display-P3 green or a high-chroma OKLCH value, cannot be represented exactly in the classic sRGB space that HEX and RGB encode. The tool tells you instead of silently clipping: the HEX output is produced by CSS-style OKLCH gamut mapping, the color difference introduced is reported as a delta-E value, and the original wide-gamut value stays available in the advanced formats.
How do the "find nearest AA / AAA" buttons work?
They walk the foreground color through OKLCH lightness, and reduce chroma only when lightness alone cannot get there, until the composited pair meets the target ratio. The suggestion is verified after rounding to the 8-bit hex you will actually copy, so the promised ratio survives into your stylesheet. The delta-E number tells you how far the suggestion moved from your original color.
What are CSS named colors?
CSS defines 148 color keywords (the classic 140 plus synonyms like grey spellings, plus rebeccapurple) that every browser maps to a fixed value, and the special keyword transparent. Type any of them into the converter to get every format back. The count here matches the parser exactly, because both come from the same engine.
Is anything uploaded or stored?
No. Parsing, conversion, contrast math, palettes and exports all run in your browser. The shareable link keeps the color in the URL fragment, which never reaches a server.
More free tools: HEX to RGB · RGB to HEX · HSL to HEX · Contrast Checker · OKLCH Picker · Favicon Generator · Image Converter