Designers and developers constantly juggle colour formats — HEX for CSS and design tools, RGB for image editors, HSL for adjusting shades. The Color Converter translates a colour between all three at once and shows a live preview swatch, so you can grab whichever format your current tool expects without doing the maths.
How to use the Color Converter
- Enter a colour in HEX, RGB or HSL, or use the colour picker.
- See the other formats update instantly.
- Copy whichever value you need.
Why three formats exist
Each format describes the same colour differently. HEX is a compact code perfect for stylesheets. RGB spells out the red, green and blue components, matching how screens and editors think. HSL — hue, saturation, lightness — is the most human-friendly, because it lets you take a colour and make it lighter, darker or more muted simply by adjusting one number. Being able to move freely between them means you can pick the format that makes your current task easiest.
Tips for working with colour
- Use HSL to create variants: change the lightness for tints and shades of the same hue.
- HEX is best for sharing a colour as a single short code.
- RGB maps directly to most image-editor colour pickers.
- Keep brand colours noted in all three formats for convenience.
All conversion is done in your browser instantly, with nothing uploaded.
Quick reference
| Format | Example (orange) |
|---|---|
| HEX | #ff7a00 |
| RGB | rgb(255, 122, 0) |
| HSL | hsl(29, 100%, 50%) |
| Preview | Live swatch |
| Processing | Local |