NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Aspect ratioColoursContrastCSSCSS unitsPalette

Colour Converter

HEX, RGB, HSL and OKLCH.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Full page for #2a54c4: contrast, tints, harmonies and colour blindness views.

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.

About this tool

About the colour converter

Designers hand over HEX, developers want HSL or OKLCH, and the printer asks for CMYK. Type or paste a colour in any common format, or choose one with the picker, and every other format appears at once, ready to copy.

Formats it reads and writes

  • HEX with 3, 4, 6 or 8 digits, rgb() and hsl().
  • hwb(), oklch() and oklab(), the newer CSS colour functions.
  • cmyk(), as a plain formula approximation.
  • The 148 CSS colour names. When yours is not one of them, the nearest named colour is shown, measured in the OKLab colour space.

Adjust the opacity for a see-through colour and the formats that support alpha gain it. Click a lighter or darker swatch to convert that shade instead.

Why OKLCH?

OKLCH describes lightness, chroma and hue in a way that matches how people see colour. Two OKLCH colours with the same lightness really do look equally light, which makes it much easier to build consistent palettes and hover states than with HSL.

A word on CMYK

Screens mix light and printers mix ink, and many bright screen colours cannot be printed at all. The CMYK figures here are a starting point; real print colours depend on the printer's colour profile, so ask your printer for exact values.

All conversions happen in your browser.

Related tools