Skip to content
TabBench

Color Converter

Convert colours between HEX, RGB, HSL, HWB, OKLCH, OKLab and CMYK, and build shade scales and harmonies.

Runs in your browser. Nothing you add is uploaded.

What the Color Converter does

The same colour is written differently depending on where it is used: HEX and RGB in CSS and design tools, HSL or OKLCH when you want to adjust lightness, and CMYK for print. This converter reads a colour in any CSS syntax — HEX, rgb(), hsl(), hwb(), oklch(), oklab() or a name like tomato — and shows it in all of these at once, transparency included. OKLCH, the perceptual colour space in modern CSS, is used to build an 11-step shade scale like Tailwind's 50–950 and harmonies that keep the same lightness, and the whole scale can be copied as CSS variables.

How to convert a colour

  1. Type or paste a colour in any CSS format, or pick one with the colour picker.
  2. Copy the format you need — HEX, RGB, HSL, OKLCH and more — with one click.
  3. Use the shade scale for lighter and darker versions, and copy it as CSS variables with your own name.
  4. Click a harmony or shade swatch to convert that colour as well.

The Color Converter runs entirely in your browser — nothing you enter is uploaded, stored, or logged.

When to use it

Handing designs to developers

A designer's HEX value can be turned into HSL for a stylesheet, which makes it easy to create lighter and darker shades by changing only the lightness value.

Preparing artwork for print

Screens mix light (RGB) and printers mix ink (CMYK). Converting a brand colour to CMYK gives the printer a starting value, although it should be checked against a printed proof, because some bright screen colours cannot be printed exactly.

Building a small palette

Complementary colours sit opposite each other on the colour wheel and make strong accents; analogous colours sit next to each other and feel calm. Using one of these as a starting point gives a palette that holds together.

Good to know

  • HEX and RGB describe exactly the same colours; HEX is just the three RGB values written in base 16.
  • Adjusting the L in HSL is the easiest way to make hover and pressed states for a button colour.
  • CMYK conversions here are device-independent approximations. For accurate print colour, use the ICC profile your printer provides.
  • Check text colours with a contrast checker as well: a pleasing palette is not automatically readable.

Frequently asked questions

What is the difference between RGB and CMYK?

RGB is an additive color model used for digital screens, while CMYK is a subtractive color model used for physical printing.

What is the difference between HEX and RGB?

None in the colour itself. rgb(255, 99, 71) and #FF6347 are the same tomato red: each pair of hex digits is one of the red, green and blue values from 0 to 255.

Why does my colour look different in print?

Screens can show bright, saturated colours that ink cannot reproduce, especially vivid blues and greens. When converted to CMYK they are brought into the printable range, so they look duller on paper.

What is HSL good for?

HSL describes colour as hue (the angle on the colour wheel), saturation and lightness, which matches how people think about colour. Changing one value gives a predictable result, unlike adjusting three RGB channels.

Related tools