Hunt
Skip to content

Colour Converter

Paste a colour in any CSS format, or pick one, to get it as HEX, RGB, HSL, HWB, OKLCH and OKLab, with its CSS name if it has one. Check its contrast against white, black or your own background, and copy it as a CSS variable or a Tailwind class.

Runs in your browser

Which format to use

  • HEX (#2563eb) and RGB (rgb(37 99 235)) give the red, green and blue channels. They're understood everywhere, but hard to adjust by eye.
  • HSL (hsl(221 83% 53%)) uses hue, saturation and lightness, which is easier to tweak, but its lightness isn't perceptual: yellow and blue at the same l look very different.
  • OKLCH (oklch(54.61% 0.21521 262.88)) uses perceptual lightness, chroma and hue. Colours with the same lightness look equally light, which makes palettes and accessible contrast predictable. It's supported in all current browsers and is the default in Tailwind CSS v4.
  • An optional alpha after / (or as a fourth value in the legacy rgba(…, 0.5) syntax, or the last two hex digits) sets transparency.

How to use the Colour Converter

  1. Type or paste a colour in any CSS format, or use the picker.
  2. Copy the format you need from the table.
  3. Check the contrast against white, black or your background.
  4. Copy it as a CSS variable or a Tailwind class.

Examples

HEX to RGB and OKLCH

Input
#2563eb
Output
#2563eb
rgb(37 99 235)
oklch(54.61% 0.21521 262.88)

This is Tailwind CSS's blue-600. As text on white, its contrast ratio is 5.17:1, which passes AA.

A translucent colour

Input
rgba(255, 99, 71, 0.5)
Output
#ff634780
rgb(255 99 71 / 0.5)
oklch(69.62% 0.19552 32.32 / 0.5)

In 8-digit hex, the last two digits are the alpha: 80 is 128/255, about 0.5.

An OKLCH colour outside sRGB

Input
oklch(70% 0.4 150)
Output
#00c248
rgb(0 194 72)
oklch(70% 0.4 150)

Chroma 0.4 is too vivid for sRGB, so the hex value is the closest green with the same lightness and hue.

Out-of-gamut colours

OKLCH can describe colours more vivid than an sRGB screen can show, such as oklch(70% 0.4 150). HEX, RGB and HSL can't express them, so the tool shows the nearest sRGB colour, found the way CSS Color 4 recommends: keep the lightness and hue, and reduce the chroma until the colour fits. Wide-gamut displays can show the original OKLCH value.

Contrast

WCAG 2 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 3:1 for large text (at least 24px, or 18.66px bold); AAA requires 7:1 and 4.5:1. The tool shows the ratio of the colour used as text on white, on black and on a background you choose. Translucent colours are blended over the background first.

Options

Picker
Choose a colour with your browser's colour picker. It works in sRGB, so it sets a hex value.
Background
A colour of your choice to check contrast against, in any format.

Limitations

  • lab(), lch() and color() with wide-gamut spaces such as display-p3 aren't accepted as input yet.
  • Out-of-gamut colours are mapped by reducing chroma; browsers may map them slightly differently.
  • Contrast uses WCAG 2. The proposed APCA method for WCAG 3 gives different numbers.

Frequently asked questions

How do I convert HEX to RGB?

Split the six hex digits into pairs and convert each from base 16: #2563eb is 25, 63, eb, which are 37, 99 and 235, so rgb(37 99 235). Paste any hex code above to do it instantly.

Why use OKLCH instead of HSL?

Because its lightness matches what people see. Changing the hue in HSL changes how light a colour looks; in OKLCH it doesn't, so you can build palettes with consistent contrast.

How do I use a custom colour in Tailwind?

For a one-off, use an arbitrary value such as bg-[#2563eb]. To reuse it, add it to your theme: in Tailwind v4, @theme { --color-brand: oklch(54.61% 0.21521 262.88); } in your CSS gives you bg-brand, text-brand and so on.

Is anything uploaded?

No. Every conversion happens in your browser.