Color Converter
Type any color — HEX, RGB, HSL or a name — and get every other format plus a live swatch.
The Color Converter turns any color value into every other format at once — HEX, HEX8, RGB, RGBA, HSL and HSLA — with a live swatch and a native color picker. Type a HEX code, an rgb() value or a CSS color name and copy the exact format your stylesheet or design tool needs.
- ✓HEX ↔ RGB ↔ HSL ↔ named colors
- ✓Full alpha / transparency support
- ✓Live swatch and native color picker
- ✓Pure math — nothing leaves your browser
Color Formats
| Format | Example | Notes |
|---|---|---|
| HEX | #3b82f6 | Most common in CSS and design tools |
| HEX8 | #3b82f6ff | Last two digits are the alpha channel |
| RGB | rgb(59, 130, 246) | 0–255 per channel |
| RGBA | rgba(59, 130, 246, 0.5) | RGB plus 0–1 alpha |
| HSL | hsl(217, 91%, 60%) | Hue 0–360, saturation & lightness % |
| Named | blue | CSS named colors |
Where Color Conversion Comes Up
- ▸Handing off a design to code — Convert a HEX value from a design tool into the rgba() or hsla() syntax a CSS-in-JS library or design token file expects.
- ▸Building a theme with HSL — HSL makes programmatic shade/tint generation easy — convert a brand HEX color to HSL, then adjust lightness for hover and disabled states.
- ▸Debugging a color in devtools — Paste a computed rgb(...) value copied from browser devtools to see its HEX equivalent for a design spec or Figma comparison.
- ▸Working with legacy CSS — Translate an old stylesheet's named colors (like cornflowerblue) into HEX so a linter or design system can standardize on one format.
Which Format Should You Actually Use?
Browsers convert losslessly between all three, so the right choice depends on what you're doing with the value, not which is "better":
- ▸Storing a brand color or pasting from Figma → HEX — Compact, universal, and what every design tool exports by default — the standard for design tokens and stylesheets.
- ▸Doing arithmetic on channels or animating in JS → RGB — Because RGB matches how screens actually work (three light channels), interpolating or blending colors in code is simplest in this format.
- ▸Hand-deriving a hover/active/disabled variant → HSL — HSL maps to how humans think about color — change one number (lightness) to get a lighter or darker variant without touching hue or saturation.
The HSL Lightness Trap
HSL is convenient for hand-tweaking a single color, but it has a well-known accessibility pitfall: HSL's lightness value is not the same as WCAG's relative luminance. Lightness is a simple linear function over the RGB channels, while the human eye perceives green as much brighter than blue at the same numeric value — so hsl(60, 70%, 50%) (yellow) and hsl(240, 70%, 50%) (blue) can look dramatically different in brightness despite sharing the same lightness number. A palette built by simply varying HSL lightness can end up with uneven, unpredictable contrast steps. Always verify a final color pairing against a real WCAG contrast ratio (minimum 4.5:1 for normal text, 3:1 for large text) rather than trusting the HSL lightness value alone.