99tools

Colour Converter & Picker

runs in your browser

Convert a colour between HEX, RGB, HSL, OKLCH, LAB and CMYK, check its contrast against white and black, and build shades and harmonies.

Formats

  • HEX#4f46e5
  • RGBrgb(79 70 229)
  • HSLhsl(243 75% 59%)
  • HWBhwb(243 27% 10%)
  • OKLCHoklch(51.1% 0.23 277)
  • OKLABoklab(51.1% 0.028 -0.228)
  • LABlab(39.4% 41.5 -81)
  • LCHlch(39.4% 91 297.2)
  • CMYKcmyk(66% 69% 0% 10%)

Contrast

  • on white6.29:1AA large passAA passAAA fail
  • on black3.34:1AA large passAA failAAA fail

AA needs 4.5 to 1 for body text, or 3 to 1 for large text. AAA needs 7 to 1.

Harmonies

  • Complementary
  • Analogous
  • Triadic
  • Split complementary
  • Tetradic

Shades

lightness varied in OKLCH, so the hue stays true

about this tool

One colour, every notation

Pick a colour or type one in any common form — HEX, RGB, HSL, HSB or a CSS colour name — and read it back in all of them, including CMYK. The picker and the text input stay in step, so you can nudge a value and copy the result in whichever notation your stylesheet or design tool wants.

Which notation to reach for

HEX is the default in CSS and in every design tool's export. Compact, universally understood, and impossible to reason about: nobody can tell you what #3b82f6 will look like, or how to make it slightly lighter.

RGB is the same information in decimal. Useful when you need an alpha channel, and when a value is arriving from code.

HSL is the one worth learning. Hue, saturation and lightness map onto how people actually describe colour, which makes it the only notation where adjusting a colour is intuitive: keep the hue, drop the lightness, and you have a darker version of the same colour rather than a guess.

CMYK is for print, and is included with a caveat below.

Each pair of hex digits is one byte, which the number base converter makes plain if the notation ever confuses you.

Shades and tints

The generated scale walks lightness while holding the hue, producing the kind of ramp a design system needs — a 50-to-950 set from a single brand colour. It is a mechanical scale rather than a hand-tuned one, so treat it as a starting point; perceptually even ramps usually need the middle steps adjusting by eye.

Harmonies

Complementary, analogous, triadic and tetradic sets are computed by rotating the hue by fixed amounts. They are a reliable way to find a starting palette, not a guarantee of a good one — a mathematically correct triad can still be ugly, and two colours at equal lightness will fight each other whatever their hue.

Contrast, and why it is the important number here

Each colour is checked against black and white for WCAG contrast, with pass and fail marked for the thresholds that matter: 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA.

This is the part of colour work that is not a matter of taste. Low-contrast text is the single most common accessibility failure on the web, it is trivially measurable, and it is the sort of thing that turns up in an audit. Light grey on white looks refined in a mockup and is unreadable on a phone in daylight.

About the CMYK values

The conversion is the standard arithmetic one, with no colour profile applied. It is fine for getting approximately the right ink values, and it is not a substitute for a proper profiled conversion if the work is going to a printer — screen colours outside the CMYK gamut, saturated blues especially, cannot be reproduced and will shift.

Local

Everything is computed in the page.

questions

Which colour notation should I use in CSS?
HEX is the common default and fine for fixed values. HSL is better whenever you need to adjust a colour, because holding the hue and changing the lightness gives you a genuinely darker or lighter version of the same colour rather than a guess.
What contrast ratio do I need for accessible text?
4.5:1 for normal body text to meet WCAG AA, 3:1 for large text, and 7:1 for AAA. Each colour here is checked against black and white with pass or fail marked, because low-contrast text is the most common accessibility failure on the web.
Are the CMYK values accurate for printing?
They are the standard arithmetic conversion with no colour profile applied, so they are approximately right and not a substitute for a profiled conversion. Saturated colours outside the CMYK gamut, blues especially, cannot be reproduced and will shift on press.
Can it generate a colour scale from one colour?
Yes, the shades scale walks lightness while holding the hue, which produces the kind of 50-to-950 ramp a design system needs. It is mechanical, so perceptually even results usually need the middle steps adjusting by eye.
Do the harmony colours guarantee a good palette?
No. Complementary, analogous, triadic and tetradic sets are hue rotations by fixed amounts — a reliable starting point, but a mathematically correct triad can still look bad, and two colours at the same lightness will fight each other.