Colour converter
HEX, RGB, HSL — plus the tints and shades you actually need to build a palette.
Your colour
Type any format, or use the picker.
Preview
Which format for what
| Format | Looks like | Use it when |
|---|---|---|
| HEX | #FF5123 | Everyday CSS, design handoff |
| RGB | rgb(255 81 35) | You need transparency, or JavaScript |
| HSL | hsl(12 100% 57%) | Building a palette from one colour |
Why HSL is worth learning
HEX is unreadable to humans. Nothing about #FF5123 tells you it is orange, or how to
make a slightly darker version of it.
HSL splits colour into three things you can reason about: hue (which colour, 0 to 360 around the wheel), saturation (how intense), and lightness (how close to white or black).
That makes building a palette trivial — keep hue and saturation fixed, change only the lightness, and every shade automatically belongs to the same family. That is exactly what the swatch row above does.
The contrast numbers matter
Every colour here is checked against black and white text. The thresholds are not opinions, they are the accessibility standard:
- 4.5:1 for normal body text
- 3:1 for large text (24px, or 19px bold) and for UI elements like borders
Brand colours very often fail this. That is fine — it just means the colour belongs on buttons and accents rather than behind paragraphs of text.
Building a palette from one brand colour
- Start with your brand colour.
- Take the lightness ramp above for tints and shades.
- Use the darkest shades for text, the lightest for backgrounds, and the original for accents.
- Check every text-on-background pair for contrast before you commit.
Common questions
What is the difference between HSL and HSB?
They are similar but not the same. HSL runs from black through the colour to white, so 50% lightness is the pure colour. HSB runs from black to the pure colour at 100%. CSS uses HSL.
Why does my brand colour fail contrast?
Most brand colours are chosen to stand out, not to be readable behind text. That is not a problem — use it for buttons and accents, and use a much darker or lighter version for text.
Can I use eight-digit HEX for transparency?
Yes, in CSS. The last two digits are the alpha channel. This tool works with the solid colour, since transparency depends on whatever sits behind it.
How do I make a colour lighter without it looking washed out?
Raise the lightness and drop the saturation slightly. Raising lightness alone often makes a colour look chalky, especially with oranges and reds.
Want this checked on your real account?
A tool can only work with the numbers you give it. If you want someone to look at what is actually happening in your ad account, the first conversation is free.
Book a free consultation