Color Converter
HEX, RGB and HSL — edit any field and the others follow. Pick from the swatch or type values, then copy in CSS format.
Runs locally in your browser
HEX
RGB
HSL
How to use Color Converter
- Type or paste a color in HEX, RGB or HSL.
- Or use the color picker to choose one visually.
- Copy the converted value in CSS-ready format.
Common use cases
- Translate a design-token HEX into HSL for theming.
- Move RGB values from a brand guide into your stylesheet.
- Watch the live swatch while tweaking a hue.
- Normalize colors copied from different design tools.
Good to know
- Alpha transparency is not part of the conversion output.
- Wide-gamut spaces like Display-P3 are out of scope here.
- The on-screen swatch depends on your browser and display profile.
What you can do next
FAQ
When should I use HSL over HEX?
HSL separates hue, saturation and lightness — adjusting a shade (e.g. making a hover state 10% lighter) is a one-number change instead of hex math.
Are the conversions exact?
HEX and RGB are 1:1. HSL is mathematically equivalent but rounds to whole degrees/percent — round-tripping can shift a color by at most 1/255 per channel.
Does the copy button give CSS-ready values?
Yes: #3B62F6, rgb(59, 98, 246) or hsl(228, 85%, 60%) — paste straight into your stylesheet.