Open menu

Color Converter

Paste any CSS color, whether HEX (including 8-digit with alpha), rgb(), hsl() or oklch(), and see it in every modern format at once. Fine-tune it with perceptual OKLCH sliders for lightness, chroma and hue; colors outside the sRGB range are brought back in by lowering chroma, so the hue stays true. The swatch shows whether white or black text reads better, and you can export CSS custom properties with a hex fallback, SCSS, Tailwind or JSON.

Preset gallery
AaWhite 6.29:1 · Black 3.34:1
HEX#4F46E5
RGBrgb(79 70 229)
HSLhsl(243.4 75.4% 58.6%)
HWBhwb(243.4 27.5% 10.2%)
OKLCHoklch(51.06% 0.2301 276.97)
OKLABoklab(51.06% 0.0279 -0.2284)

Accessibility checks

  • Pass White text on this color has 6.29:1 contrast, which meets WCAG AA.
  • Check Black text on this color has only 3.34:1 contrast, too low for normal text.
  • Pass Use white text on this color (6.29:1).
  • Pass Fully opaque: contrast results are exact.

Export code

:root {
  --brand: #4F46E5;
  --brand-rgb: rgb(79 70 229);
  --brand-hsl: hsl(243.4 75.4% 58.6%);
  --brand-oklch: oklch(51.06% 0.2301 276.97);
}

/* Modern browsers: prefer OKLCH, with a hex fallback first */
.example {
  color: #4F46E5;
  color: oklch(51.06% 0.2301 276.97);
}
Favourites on this device (0)

No favourites yet.

Color
Color
OKLCH sliders

OKLCH changes lightness evenly across hues. Colors outside the sRGB gamut are brought in by lowering chroma.

How to use the color converter

  1. Pick a color with the color picker or type a hex value.
  2. Paste any CSS color, such as rgb(79 70 229 / 50%), hsl(243 75% 59%) or oklch(51% 0.23 277), and press Convert.
  3. Adjust it with the OKLCH sliders: lightness from black to white, chroma from grey to vivid, and hue around the color wheel.
  4. Set the opacity if you need a translucent color, and name it for the export.
  5. Read the formats in the table, and check which text color works on top.
  6. Export CSS custom properties, SCSS, Tailwind or JSON.

The formats at a glance

  • HEX (#4F46E5) is compact and universal. 8-digit hex adds alpha.
  • RGB (rgb(79 70 229)) gives red, green and blue from 0 to 255.
  • HSL and HWB describe hue with saturation/lightness or whiteness/blackness. They’re easy to read but not perceptually even.
  • OKLab and OKLCH are perceptual: equal number changes look like equal visual changes.

Worked examples

Example 1: a lighter hover color

Load Indigo and increase OKLCH lightness by about 8%. The hue and colorfulness stay the same, unlike lightening in HSL, which can turn blues purple.

Example 2: converting a design handoff

A designer sends hsl(160 84% 39%). Paste it, then copy the hex for legacy CSS and the oklch() value for modern code. Both describe the same emerald.

Example 3: a translucent overlay

Load Translucent black (50% opacity). The 8-digit hex #00000080 and rgb(0 0 0 / 0.5) both work as an overlay behind modal dialogs.

Common mistakes

  • Judging contrast with alpha. Translucent colors blend with the background, so check contrast on the real page.
  • Copying HSL “lightness” between hues. 50% lightness yellow is far brighter than 50% blue; use OKLCH for even steps.
  • Rounding too much. Keep at least three decimals for OKLCH chroma.

Tips for working with color formats

Keep one source format in your design files, ideally hex or OKLCH, and convert from it rather than converting conversions. Each trip through rounded RGB values can shift a color slightly. When you share colors with developers, include the format name so nobody mistakes an HSL triplet for RGB.

Frequently asked questions

What is OKLCH and why use it?

OKLCH describes a color by lightness, chroma (colorfulness) and hue, in a space designed to match human perception. Changing lightness by the same amount looks like the same step for any hue, which plain HSL doesn't achieve. That makes OKLCH ideal for building palettes and adjusting colors predictably.

Do all browsers support oklch()?

All current major browsers support oklch(). The CSS export still writes a hex value first and the oklch() value second, so very old browsers fall back to the hex color.

What happens to colors outside the sRGB gamut?

OKLCH can describe colors most screens can't show. When the sliders reach such a color, the converter lowers chroma until it fits sRGB, keeping lightness and hue, and the result is always a displayable color.

How is the white/black text advice calculated?

It uses the WCAG 2.2 contrast formula against pure white and pure black, and recommends whichever has the higher ratio. 4.5:1 is the minimum for normal-size text.

Which format should I use in my CSS?

Hex and rgb() have the widest support, and OKLCH is best for building palettes and adjusting lightness evenly. All modern browsers understand all three, so pick the one your team finds easiest to read.

Sources