Color picker & converter
Pick any colour and instantly get its HEX, RGB and HSL codes, generate matching shades and tints, and copy with one click.
Shades & tints
Suggested palette
Click any swatch to copy its HEX.
HEX, RGB and HSL — what's the difference?
HEX (e.g. #4f46e5) is the compact form used in CSS and design tools. RGB describes a colour as red, green and blue values from 0–255. HSL (hue, saturation, lightness) is the most intuitive for creating shades — just change the lightness. This tool converts between all three live.
Building a palette
The shades row shows lighter and darker versions of your colour (great for hover states and backgrounds). The suggested palette offers complementary and analogous colours based on the colour wheel — a quick starting point for a cohesive design.
Is there an eyedropper to pick from my screen?
In supported browsers, the native colour input opens your system picker which often includes an eyedropper. Otherwise, paste a HEX code directly.
Is anything uploaded?
No — all colour maths runs in your browser.