Convert images between PNG, JPEG and WebP in bulk, with control over transparency.
Color Converter
Paste any CSS colour and get it in every format — HEX, RGB, HSL, HWB, OKLab and OKLCH — with a live preview and a WCAG contrast check against any background.
Runs in your browser — nothing you enter is sent to our servers
How it works
The colour is parsed into sRGB red, green, blue and alpha, then written out in each format:
- HSL and HWB are rearrangements of sRGB (hue plus saturation and lightness, or whiteness and blackness).
- OKLab and OKLCH use Björn Ottosson’s perceptual colour space: sRGB is linearised, mixed into cone responses and cube-rooted. OKLCH is the polar form (lightness, chroma, hue).
- CMYK uses the basic formula K = 1 − max(R,G,B). It’s useful for rough work, not for print matching.
- Contrast uses the WCAG 2.x relative-luminance formula and shows which AA and AAA levels pass.
Colours from OKLab/OKLCH that sRGB can’t display are clamped and flagged. Click any format to copy it.
Example
#ff0000 is rgb(255 0 0), hsl(0 100% 50%), hwb(0 0% 0%) and oklch(62.8% 0.2577 29.23).
Grey #777777 on white has a contrast ratio of 4.48:1, just short of AA for normal text. #767676 (4.54:1) passes. Small differences matter at the threshold.
Frequently asked questions
Which formats can I paste?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hwb(), oklab(), oklch() — in both the modern space-separated syntax (rgb(52 70 212 / 50%)) and the older comma syntax — plus all 148 CSS named colours such as rebeccapurple and transparent.
What is OKLCH and why use it?
OKLCH describes a colour by perceived lightness, chroma (colourfulness) and hue. Unlike HSL, equal lightness values look equally light across hues, which makes it easier to build consistent palettes and accessible colour scales. It’s supported in all major current browsers.
Why does it say “outside sRGB”?
OKLCH and OKLab can describe colours that ordinary sRGB screens can’t show. This tool converts in sRGB, so those colours are clamped to the nearest displayable value and flagged. Wide-gamut (Display P3) output isn’t calculated.
Is the CMYK value accurate for print?
No — it’s the simple mathematical conversion from RGB. Real print colours depend on the printer, ink and paper (ICC profiles). Ask your printer for a proof or use their profile.
How is contrast calculated?
With the WCAG 2.x formula (relative luminance). 4.5:1 passes AA for normal text and 3:1 for large text (about 24px, or 19px bold); 7:1 passes AAA. Semi-transparent colours are blended with the background first.
Related tools
Escape & < > and quotes for HTML, and optionally write non-ASCII characters as named or numeric entities.
Short, punchy thumbnail text options with a live 1280×720 preview you can download.
Generate random v4 or time-ordered v7 UUIDs in bulk, in the format you need.
Related guides
CSS colour formats explained: HEX, RGB, HSL, HWB and OKLCH
What each CSS colour format means, when to use it, why OKLCH is useful for palettes, and how to check colour contrast for accessibility.
· 7 min read
JWTs explained: structure, claims, decoding vs verifying, and common mistakes
How JSON Web Tokens work, what each part and claim means, why decoding isn't verifying, and the mistakes that cause real security bugs.
· 8 min read
How to evaluate an AI tool before you pay for it
A seven-point checklist for testing AI tools: accuracy, privacy, ownership of output, real costs and whether you even need a specialised tool.
· 7 min read