Why use an online color converter
When writing CSS or matching a design file you often need to:
- Turn
#3B82F6intorgb(59, 130, 246)for a component library - Lighten a brand color—HSL is easier than tweaking three RGB channels
- Check whether button text passes accessibility contrast
The Color Converter keeps HEX, RGB, HSL, HSV and CMYK in sync, shows WCAG ratios and a small palette—all locally in the browser.
Supported formats
| Format | Example | Typical use |
|---|---|---|
| HEX | #3b82f6 |
CSS, design handoff |
| RGB / RGBA | rgb(59, 130, 246) |
Alpha, canvas |
| HSL | hsl(217, 91%, 60%) |
Lightness/saturation tweaks |
| HSV | hsv(217, 76%, 96%) |
Some design tools |
| CMYK | print approximation | Pre-press reference |
Paste tomato, #fff or rgba(0,0,0,0.5) into smart parse and press Enter.
Typical workflow
- Copy HEX from Figma into the color converter.
- Copy
rgb()orhsl()into styles or design tokens. - Check white/black contrast—aim for AA ≥ 4.5:1 for body text.
- Pick tints from the palette row for hover states.
Related developer tools
| Need | Tool |
|---|---|
| API colors in query strings | URL params parser |
| Token debugging | JWT decoder |
FAQ
3-digit vs 6-digit HEX? Both expand and sync to RGB/HSL.
8-digit HEX? #RRGGBBAA—alpha is shown in the RGB alpha field.
Eyedropper disabled? Requires EyeDropper API (Chrome/Edge); use the color input otherwise.
Privacy
Color values are not uploaded—safe for client palettes on restricted networks.