Click any value or swatch to copy
Color harmonies
Complementary
Analogous
Triadic
Tints & shades
Contrast & accessibility
Pick a color and get HEX, RGB, HSL, harmonies, tints and contrast — all in your browser.
The Color Picker lets you choose a colour and instantly see its HEX, RGB, and HSL values, then build a harmonious palette around it — everything a designer or developer needs to nail a colour in one place.
It bridges the gap between picking a shade and using it in CSS or a design file.
The tool converts your chosen colour between HEX, RGB, and HSL — the same colour expressed in different models — and derives complementary or analogous shades to form a palette. Seeing all formats at once removes the guesswork of matching a value across tools.
It runs locally, updating instantly as you adjust hue, saturation, or lightness.
Pick a brand green and the tool shows its HEX, RGB, and HSL codes plus a coordinated palette — ready to paste into CSS variables for a consistent theme.
HEX, RGB, and HSL, all for the same colour.
Yes — it generates coordinated colours around your pick.
No — everything runs in your browser.
Yes — HSL makes it easy to create lighter or darker variants by adjusting lightness.
Yes — 25 languages, free.