All tools
Design & CSS
Colour Converter (HEX / RGB / HSL)
Pick a colour and see its HEX, RGB and HSL values instantly.
Everything runs in your browser. Your data is never sent to a server.
HEX
#4770FF
RGB
rgb(71, 112, 255)
HSL
hsl(227, 100%, 64%)
What does the Colour Converter tool do?
The same colour is written differently in different places: design tools usually use HEX, CSS values that need transparency use RGB, and tone adjustments use HSL. This tool shows all three at once.
What is it for?
- Using a HEX colour from a design file as a transparent rgba value in CSS
- Creating lighter or darker shades of a colour through HSL
Things to keep in mind
- Keep enough contrast between text and background; WCAG recommends at least 4.5:1 for normal text.
Related tools
Want to talk about a project with the person who built these tools?
Get in touch