Colour Converter

HEX, RGB, HSL and OKLCH.

Free. Runs in your browser: nothing you enter or open is uploaded.

Lighter and darker

Click a swatch to convert it.

Text on this colour

Reads HEX (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), oklch(), oklab(), cmyk() and the 148 CSS colour names. CMYK is a plain formula approximation: real print colours depend on the printer's colour profile, so ask your printer for exact values.

How to use it

  1. Type or paste a colour in any common format, or choose one with the picker.
  2. Adjust the opacity if you need a see-through colour; the formats that support it gain an alpha value.
  3. Press Copy next to the format you need, or click a lighter or darker swatch to convert that instead.

Questions

What is the difference between HEX, RGB and HSL?

They describe the same colours in different ways. HEX and RGB give the amounts of red, green and blue. HSL gives the hue as an angle on the colour wheel, then saturation and lightness, which makes it easier to make a colour lighter or duller by hand.

What is OKLCH and why use it?

OKLCH describes lightness, chroma (how colourful) and hue in a way that matches how people see colour. Two OKLCH colours with the same lightness look equally light, which makes it good for building consistent palettes. Modern browsers support it in CSS.

Why does a colour look different in print?

Screens mix light (RGB) and printers mix ink (CMYK), and many bright screen colours cannot be printed. The CMYK figures here are a simple conversion, useful as a starting point but not a substitute for your printer's profile.

What does the colour name mean when it says nearest?

Only 148 colours have CSS names. When yours is not one of them, the tool shows the named colour that looks closest, measured in the OKLab colour space.