Color Converter
HEX, RGB, HSL and OKLCH with contrast checking.
Accepts any CSS colour: hex, rgb(), hsl(), oklch(), color() and all 148 named colours.
Contrast
| Against | Ratio | WCAG |
|---|
Tints and shades
Click any band to load it. Lightness steps in OKLCH, so the hue stays perceptually stable.
The colour formats, and when to use each
HEX — #0071e3 — is the most common notation on the web and the one design tools export. It is compact and universally understood, but the six digits tell you nothing about the colour: you cannot look at two hex codes and say which is lighter.
RGB — rgb(0 113 227) — is the same information as three channel values. It is what the screen actually does, which makes it the right format when you are computing colours in code rather than choosing them by eye.
HSL — hsl(211 100% 45%) — separates hue, saturation and lightness, so it is the first format you can reason about directly. Want a lighter version? Raise the lightness. Its flaw is that its lightness is not perceptual: hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim identical lightness while yellow looks dramatically brighter.
OKLCH — oklch(55.6% 0.196 253) — fixes exactly that. It is built on a perceptual colour space, so equal lightness numbers look equally light regardless of hue. That makes it the correct choice for generating colour ramps and accessible palettes, and it is supported in every current browser.
Contrast and accessibility
WCAG defines contrast as a ratio between 1:1 (identical) and 21:1 (black on white). The thresholds worth remembering:
- 4.5:1 — the AA minimum for normal body text. Treat this as the floor for anything a user has to read.
- 3:1 — AA for large text (18pt, or 14pt bold) and for user interface components such as input borders and icons.
- 7:1 — AAA for body text. Worth aiming for on long-form reading.
The table above checks your colour against both white and black so you can immediately see which one it can carry as text.
Frequently asked questions
What do the eight hex digits mean?
The last two are alpha — opacity — from 00 (fully transparent) to ff (fully opaque). #0071e380 is the same blue at roughly 50% opacity. It is supported everywhere and is often tidier than switching to rgba().
Why does converting to CMYK look wrong?
Because the conversion shown here is the naive arithmetic one, with no colour profile. Real print work uses ICC profiles specific to the press and paper, and bright RGB colours frequently have no CMYK equivalent at all. Treat the CMYK value as a starting point, never as a print-ready specification.
How do I build a colour scale from one colour?
Hold the hue and chroma steady and step the lightness — which is what the ramp above does in OKLCH. Doing the same in HSL produces steps that look uneven and often drift towards grey in the middle.
Can I paste a colour from Figma or Photoshop?
Yes. Paste the hex or RGB value straight in. Note that design tools may show colours in a wider gamut such as Display P3; a value copied from there will be clipped to sRGB here, which is what a browser does anyway for plain rgb() and hex.
Is any of this sent to a server?
No. Parsing uses the browser's own CSS engine and every conversion is arithmetic done in the page.