Add your input
A HEX value or interactive RGB controls.
Design bench
Color converter
Keep formats synchronized while choosing and fine-tuning a color.
Privacy built inYour work stays with you
Converted values
Alpha transparency is preserved when it is present.
HEX
#14B8A6RGB
rgb(20, 184, 166)HSL
hsl(173, 80.4%, 40.0%)CSS custom property
--color-brand: #14B8A6;Your work stays private in your browser while you use this tool.
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
How to use color converter
Choose your settings
Keep formats synchronized while choosing and fine-tuning a color.
Save or copy
Copy-ready color values for design and development.
A practical tip
OKLCH is useful when you want perceived lightness changes to feel more even.
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), and hsla(173, 80.4%, 40.0%, 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, rounds displayed RGB channels, and derives HSL from the channel maximum, minimum, and lightness.
Know before using
Limits and edge cases
- It does not currently parse named colors, lab(), lch(), oklab(), oklch(), color(), or percentage RGB channels, despite those forms being part of the wider CSS color ecosystem.
- Conversions are rounded for display, so repeatedly copying a rounded value between formats can introduce small channel differences.
Standards and sources
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.