Design bench

Color converter

Keep formats synchronized while choosing and fine-tuning a color.

Privacy built inYour work stays with you

Color valueEnter HEX, RGB(A), or HSL(A), for example #14B8A6 or rgb(20, 184, 166).

Converted values

Alpha transparency is preserved when it is present.

HEX

#14B8A6

RGB

rgb(20, 184, 166)

HSL

hsl(173, 80.4%, 40.0%)

HSV

hsv(173, 89.1%, 72.2%)

OKLCH

oklch(70.4% 0.1230 182.5)

CSS custom property

--color-brand: #14B8A6;

Your work stays private in your browser while you use this tool.

In short

What does color converter do?

Convert one CSS color among hexadecimal, RGB(A), and HSL(A) notation while preserving an alpha channel when one is supplied. The page also produces a ready-to-paste CSS custom-property declaration.

Input: A HEX value or interactive RGB controls.
Result: Copy-ready color values for design and development.
Price: Free
Account: Not required

A quick, useful guide

How to use color converter

Add your input

A HEX value or interactive RGB controls.

Choose your settings

Keep formats synchronized while choosing and fine-tuning a color.

Save or copy

Copy-ready color values for design and development.

Step-by-step guide

How to convert HEX to RGB (and back)

A practical tip

OKLCH is useful when you want perceived lightness changes to feel more even.

Practical uses

When to use color converter

Translate a HEX value from a design handoff into RGB or HSL for an existing stylesheet.

Inspect the hue, saturation, and lightness behind an RGB color before adjusting it.

Normalize a shorthand or alpha-bearing HEX value before storing it as a design token.

Worked example

A concrete color converter example

Input: rgba(20, 184, 166, 0.5)
Result: The converter returns #14B8A680, rgba(20, 184, 166, 0.50), hsla(173, 80.4%, 40.0%, 0.50), hsva(173, 89.1%, 72.2%, 0.50), and oklch(70.4% 0.1230 182.5 / 0.50), plus --color-brand: #14B8A680;.

What to expect

How it works

The parser accepts 3-, 4-, 6-, or 8-digit HEX plus numeric rgb()/rgba() and hsl()/hsla() input. It converts the parsed color through sRGB channel math, expands shorthand HEX, and rounds displayed RGB channels. HSL and HSV both come from the channel maximum and minimum, differing in whether saturation is measured against mid lightness or the channel maximum. OKLCH is derived by undoing the sRGB transfer function, converting linear light to OKLab, and reading chroma and hue as its polar form.

Know before using

Limits and edge cases

HSV and OKLCH are produced as output only. Pasted input is limited to HEX, rgb()/rgba(), and hsl()/hsla(), so named colors, lab(), lch(), oklab(), oklch(), color(), and percentage RGB channels are not accepted.
Conversions are rounded for display, so repeatedly copying a rounded value between formats can introduce small channel differences.

References

Standards and sources

W3C CSS Color Module Level 4

Common questions

Color converter FAQ

Is color converter free to use?

Yes. Color converter is free to use.

Does color converter keep my work private?

Yes. Your work stays private while you use the tool — nothing you enter is uploaded.

Does the color converter keep transparency?

Yes. Four- or eight-digit HEX, rgba(), and hsla() input keeps its alpha value in the generated HEX, RGB, and HSL forms. Fully opaque input is shown without an alpha component.

Why will a CSS color name such as rebeccapurple not parse?

This implementation deliberately recognizes only HEX, numeric RGB(A), and numeric HSL(A). Convert a named color to one of those forms before entering it.