About Color Converter
HEX, RGB, and HSL describe the same colours in different ways. HEX is compact and common in CSS, RGB maps directly to how screens emit light, and HSL separates hue from saturation and lightness, which makes it far easier to build a consistent palette by hand.
How to use
- Pick a colour or enter a value in any supported format.
- Read the equivalent HEX, RGB, and HSL values.
- Copy the format your stylesheet needs.
Frequently asked questions
What do the numbers in HSL mean?
Hue is an angle from 0 to 360 on the colour wheel, where 0 is red, 120 is green, and 240 is blue. Saturation is intensity from 0% grey to 100% vivid. Lightness runs from 0% black through 50% pure colour to 100% white.
Why do designers prefer HSL?
Adjusting one value changes one perceptual property. Building a tint or shade means changing only the lightness, whereas the same change in HEX or RGB requires recalculating all three channels.
What is the alpha channel?
Alpha sets opacity from 0 fully transparent to 1 fully opaque. It appears as a fourth value in rgba() and hsla(), or as two extra digits on an 8-digit HEX code.