Colour Converter
HEX, RGB and HSL converted both ways, with a colour picker and a ready-made scale of shades.
Tints and shades
Click a swatch to copy its HEX value.
How to use
- Choose a colour —— Use the picker, or paste a value straight into the HEX or RGB field.
- Read every format —— The panel shows the same colour as RGB and HSL, ready to copy.
- Generate a scale —— The lower panel produces a full run from dark to light — handy for hover states, borders and backgrounds.
About Colour Converter
The same colour can be written several ways: #0F6E56, rgb(15,110,86) and hsl(164,76%,24%) all describe one colour. HEX and RGB are convenient and compact, but they are awkward when you want to make something lighter or darker.
HSL is the format that makes palettes easy: the three numbers are hue (an angle from 0 to 360 on the colour wheel), saturation (0–100%, higher is more vivid) and lightness (0–100%, where 0 is black and 100 is white). Hold hue and saturation steady and step the lightness, and you get a set of colours that visibly belong together — which is how button hovers, borders and backgrounds are normally derived.
FAQ
What do the three HSL numbers mean?
Hue (0–360, the angle on the colour wheel), saturation (0–100%, higher is more vivid) and lightness (0–100%, where 0 is black and 100 is white).
Why is my pasted RGB value not accepted?
Include the rgb prefix, or just the three numbers — for example 15,110,86. The tool accepts rgb(15,110,86), 15,110,86 and #0f6e56.
How is the shade scale calculated?
Hue and saturation are held constant in HSL space while lightness is stepped at even intervals, so the resulting colours read as one family.