Color Converter
Convert a colour between HEX, RGB and HSL, with a picker that stays in step with whatever you type. Each notation suits a different job — HEX for pasting into CSS, RGB for image work, HSL for adjusting a shade without disturbing its hue — and converting between them by hand is tedious arithmetic.
How to convert a colour between HEX, RGB and HSL
- Pick a colour with the picker, or type a hex code like #1d4ed8.
- Read the same colour as HEX, RGB and HSL below.
- Copy whichever format your CSS or design tool needs.
When you'd use this
- Web development — Copying a HEX value straight into a stylesheet.
- Design handoff — Translating a colour supplied in one notation into the one your tool wants.
- Building a palette — HSL makes producing lighter and darker variants of one colour straightforward.
- Matching a brand colour — Converting a value from a brand guide into the format you need today.
Good to know
- Three-digit HEX works — Shorthand such as #abc expands automatically to #aabbcc.
- HSL is the one to adjust with — Hue, saturation and lightness map to how people actually think about colour, so raising lightness alone gives you a proper tint.
- The picker and the field stay in sync — Type a value or drag the picker — both update together.
- No alpha channel here — The conversion covers solid colours. Transparency notations such as rgba are a separate thing.
Frequently asked questions
What's the difference between HEX, RGB and HSL?
They describe the same colour differently. HEX and RGB state the red/green/blue amounts (hex just writes them in base-16). HSL states hue (position on the colour wheel), saturation and lightness — usually the easiest to adjust by hand.
Does it accept 3-digit hex codes?
Yes — shorthand like #fa0 expands to #ffaa00, exactly as CSS treats it.
Why HSL for tweaking colours?
Making a colour lighter, darker or less saturated is a single-number change in HSL, while in RGB all three channels shift together. Designers often think in HSL and ship in HEX.
What is the difference between HEX and RGB?
They express exactly the same thing. HEX writes the red, green and blue values in hexadecimal as a single string; RGB lists them as three decimal numbers from 0 to 255. #ff0000 and rgb(255, 0, 0) are the same red.
Why would I use HSL instead?
Because it matches how people think about colour. To lighten a shade in HSL you raise the lightness and leave everything else alone. Doing the same in HEX or RGB means recalculating all three channels.
Does a three-character HEX code work?
Yes. It is shorthand in which each digit is doubled, so #f00 means #ff0000. The tool expands it for you.