Colour Converter
HEX, RGB and HSL side by side, plus a tint and shade ramp.
About Colour Converter
Colour Converter shows a colour in HEX, RGB, RGBA and HSL at once, plus a ready-made CSS variable block and a ten-step tint and shade ramp at the same hue. The ramp is the useful part: it gives you the hover states, borders and backgrounds that go with a brand colour, rather than making you guess.
How to use it
- Enter a hex value or use the colour picker.
- Copy whichever notation you need.
- Click any step on the ramp to copy that shade.
Questions
When should I use HSL instead of HEX?
HSL when you want to reason about a colour — lightening is just raising the L value, whereas in hex it means recalculating three channels. HEX is more compact for fixed values.
What is the ramp for?
Interfaces need a family, not a single colour: a light tint for backgrounds, the base for buttons, a dark shade for hover and text. Holding hue and saturation constant keeps them looking related.
Why does the same lightness look different across hues?
Because perceived brightness varies by hue — yellow at 50% lightness looks far brighter than blue at 50%. That is a limitation of HSL, and why OKLCH exists.
Colour Converter is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.