Color converter

HEX, RGB, HSL, OKLCH and shades

Color

HEX (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla() or oklch()

Formats

HEX: #3b82f6
RGB: rgb(59 130 246)
HSL: hsl(217.2 91.2% 59.8%)
OKLCH: oklch(62.31% 0.188 259.81)

Shades

Palette name

Value format

Shades computed in OKLCH: same hue, decreasing lightness, chroma reduced at both ends so every step stays in sRGB. The color you entered takes the closest step. Click a shade to copy its value.

CSS variables

:root {
  --brand-50: oklch(97.1% 0.014 259.815);
  --brand-100: oklch(93.6% 0.031 259.815);
  --brand-200: oklch(88.5% 0.056 259.815);
  --brand-300: oklch(80.8% 0.097 259.815);
  --brand-400: oklch(71.1% 0.151 259.815);
  --brand-500: oklch(62.3% 0.188 259.815);
  --brand-600: oklch(56.7% 0.184 259.815);
  --brand-700: oklch(49.6% 0.165 259.815);
  --brand-800: oklch(43.3% 0.139 259.815);
  --brand-900: oklch(37.9% 0.117 259.815);
  --brand-950: oklch(27.1% 0.083 259.815);
}

Tailwind v4 (@theme)

@theme {
  --color-brand-50: oklch(97.1% 0.014 259.815);
  --color-brand-100: oklch(93.6% 0.031 259.815);
  --color-brand-200: oklch(88.5% 0.056 259.815);
  --color-brand-300: oklch(80.8% 0.097 259.815);
  --color-brand-400: oklch(71.1% 0.151 259.815);
  --color-brand-500: oklch(62.3% 0.188 259.815);
  --color-brand-600: oklch(56.7% 0.184 259.815);
  --color-brand-700: oklch(49.6% 0.165 259.815);
  --color-brand-800: oklch(43.3% 0.139 259.815);
  --color-brand-900: oklch(37.9% 0.117 259.815);
  --color-brand-950: oklch(27.1% 0.083 259.815);
}

About this tool

This converter reads a CSS color and shows it as HEX, RGB, HSL and OKLCH, with a copy button for each format. It accepts 3, 4, 6 or 8-digit hex codes and the rgb(), rgba(), hsl(), hsla() and oklch() functions, with commas or spaces and optional alpha. When an OKLCH color falls outside the sRGB space, the tool flags it and gives the closest displayable color.

It also generates a scale of eleven shades, from 50 to 950, computed in OKLCH: same hue, decreasing lightness, and chroma reduced at both ends. The color you enter takes the step with the closest lightness. You name the palette, choose OKLCH or HEX values, and copy the result as CSS variables or as an @theme block for Tailwind CSS v4.

How to use it

Type a color into the Color field, or pick one with the color picker.
In Formats, copy the HEX, RGB, HSL or OKLCH value you need.
In Shades, enter the Palette name and choose the Value format, OKLCH or HEX.
Click a shade to copy its value, or use Copy variables or Copy @theme block.

Frequently asked questions

Why use OKLCH instead of HSL?

In OKLCH, lightness matches perceived brightness: two colors with the same L look equally light, which is not true in HSL. That makes it well suited to building even shade scales, and current browsers support oklch() in CSS.

What happens with a color outside the sRGB gamut?

An OKLCH color can go beyond what an sRGB screen can display. The tool warns you, keeps the exact OKLCH value, and computes the HEX, RGB and HSL versions by reducing chroma while keeping lightness and hue.

How do I use the shades with Tailwind CSS?

Copy the @theme block into your main CSS file with Tailwind v4. It defines --color-name-50 through --color-name-950, which makes classes such as bg-name-500 or text-name-900 available, where name is the palette name you entered.

Are color names like red or navy accepted?

No. The tool only reads hex codes and the rgb(), rgba(), hsl(), hsla() and oklch() functions. For a named CSS color, enter its hex equivalent instead, for example #000080 for navy.