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
How to use this colour converter
- Pick a colour, or type a value in any format.
- Read the HEX, RGB and HSL values.
- Copy the format you need, and use the tints and shades to build a palette.
Who it is for
For designers and developers moving a brand colour between design tools and CSS.
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
How do I convert HEX to RGB?
Split the code into three pairs and convert each pair from base 16 to base 10. #FF5123 becomes FF = 255, 51 = 81 and 23 = 35, which is rgb(255, 81, 35).
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.
Need more customers as well?
This tool is free and always will be. If you also want ads, search and follow-up that bring in customers, I offer a free 45-minute consultation for businesses in the USA, UK, UAE, Australia and India.
Book a free consultationBuilt and maintained by Premkumar Ragav, an independent performance marketing specialist. Updated November 2026.