Skip to content
PocketDesk
Your files are processed on your device, never uploaded

Color converter

  • On device

Result

Working

How to convert a colour

  1. Type or paste a colour in the box, in any supported format. For example #2b55e0, rgb(43 85 224), hsl(226 74% 52%) or oklch(55% 0.2 265).
  2. Read the same colour in HEX, RGB, HSL and OKLCH below the box.
  3. Check the contrast rows to see whether the colour works for text on a white or a black background. Use Copy to take all four formats.

The address bar keeps your colour, so a link to the page shows the same result.

The colour formats

HEX writes the red, green and blue values as base 16 digits, like #2B55E0. RGB gives them as numbers from 0 to 255. HSL describes a colour by hue (the angle on the colour wheel), saturation and lightness, which is easier to adjust by hand. OKLCH is the newest, supported in current browsers by CSS oklch(). Its lightness matches human perception better than HSL, so two colours with the same lightness really look equally bright.

Contrast and accessibility

Text has to stand out from its background. The Web Content Accessibility Guidelines (WCAG) measure this with a contrast ratio from 1:1 (no difference) to 21:1 (black on white). The tool shows the ratio for your colour on white and on black, with a pass or fail for each level:

  • AA normal text needs 4.5:1.
  • AA large text (about 24 px, or 19 px bold) needs 3:1.
  • AAA normal text needs 7:1, and AAA large text needs 4.5:1.

A colour can pass on white and fail on black, or the other way round, so check both if your site has a dark mode.

Tips

  • Pick text colours that reach at least AA. Many brand blues fail on dark backgrounds.
  • Use OKLCH when making a scale of shades: keep the hue, change the lightness.
  • Eight digit HEX values and rgba() carry transparency. Contrast is measured on the opaque colour.
  • Need a colour from a photo? Use color picker from image, then paste it here.
  • Colours in hex are base 16 numbers; the number base converter shows how.
  • Printing a QR code in brand colours? Keep the dark and light very different, as the QR code generator warns.

Your colours are processed locally and never sent anywhere.

Questions

Which colour formats can I enter?

HEX (3, 4, 6 or 8 digits), rgb() and rgba(), hsl() and hsla(), oklch() and a few common names such as navy or orange.

What is OKLCH?

A modern colour model based on how people see colour. Lightness, chroma (colourfulness) and hue change independently, which makes it good for building palettes and accessible themes.

What do AA and AAA mean?

They are WCAG contrast levels. AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.

Why does a colour change slightly when converted?

Values are rounded to whole numbers. Colours outside the sRGB range are clipped to the nearest value that screens can show.

Is anything uploaded?

No. All the maths runs in your browser.

More developer tools