Color Converter
Convert a color between HEX, RGB and HSL with a preview.
How to use the Color Converter
- Enter a color as HEX (#137256) or RGB (rgb(19,114,86)).
- Copy the format you need.
About the Color Converter
CSS accepts the same colour in several notations, and each has a job. rgb(19, 114, 86) spells out the three channels in decimal, 0 to 255. #137256 is those exact numbers in base 16, two hex digits per channel — which is why the two are interchangeable, and why #abc expands to #aabbcc. Both are additive: they describe light a screen emits, the opposite of CMYK printing, where every added ink subtracts light from the page.
hsl() is the notation worth converting to. Hue is an angle on the colour wheel, saturation is how vivid the colour is, lightness how bright — three numbers you can reason about separately. A hover state is the same hue with lightness pulled down. A tint ramp is one hue at several lightness steps. Try either by eye in RGB and you are solving three coupled equations at once. If you want a ramp built for you, the shades generator does it, and the contrast checker will tell you whether text stays legible on the result.
Paste HEX (three or six digits, # optional) or an rgb() value and get all three formats back with a live swatch, updating as you type. rgba() is accepted but its alpha is discarded. HSL input, eight-digit hex and named colours are not parsed. Nothing is uploaded.
Frequently asked questions
Which formats can I paste in?
HEX with three or six digits, where the # is optional, plus rgb() and rgba() values. You always get HEX, RGB and HSL back.
Can I paste an HSL value?
Not as input. HSL is an output format here, so start from a HEX or RGB value and read the HSL off the result.
What happens to the alpha in an rgba() colour?
It is ignored. The tool converts the three colour channels and returns opaque HEX, RGB and HSL values.
Why convert to HSL at all?
Because it separates hue from saturation and lightness. Nudging the lightness gives you a hover state or a tint that stays in the same colour family, which is far easier than guessing at new RGB numbers.
Is #ABC the same colour as #AABBCC?
Yes. Three-digit hex is pure shorthand — each digit is doubled to produce the six-digit form.