Color Converter — HEX, RGB & HSL
Pick any colour and get its HEX, RGB and HSL values instantly, with ready-made shades and tints you can copy in one click. Built for developers and designers who jump between CSS formats all day.
How to use this colour converter
Pick a colour with the picker, or type any HEX, RGB or HSL value and press Enter — every other format updates instantly. The CSS line gives you a ready-to-paste declaration for your stylesheet.
The shades strip mixes your colour toward black and the tints strip toward white — the fastest way to build a hover state, a border colour or a soft background that matches your main colour. Click any strip colour to load it into the converter.
Learning the web side of colour? Our JavaScript path and CSS-heavy tutorials show these values in real projects, and the tools page has more developer utilities.
Frequently Asked Questions
What is the difference between HEX, RGB and HSL?
HEX is a compact code (#0F766E) mixing red, green and blue. RGB spells the same mix out as numbers — rgb(15, 118, 110). HSL describes colour the human way: hue (the colour itself), saturation (how rich) and lightness (how bright) — much easier to adjust by hand.
Which format should I use in CSS?
All three work in modern browsers. HEX is shortest for solid colours, RGB is handy when you need transparency (rgba), and HSL is best when you want to lighten or darken a colour by changing one number.
How do shades and tints work?
A shade is the colour mixed with black; a tint is the colour mixed with white. Designers use them to build a whole palette from one brand colour.
Is anything uploaded?
No — every conversion happens in your browser.