Color Palette Generator
Image palette · harmonies · contrast · exports
Pull a colour palette out of any image, convert between hex / RGB / HSL, and build CSS gradients — all in your browser, nothing uploaded.
Palette from an image
Hex ↔ RGB ↔ HSL
Colour harmonies
From #22D3EE — tap any swatch to copy.
Shades & tints
A 50–950 ramp — handy as a Tailwind/Design-system colour scale.
WCAG contrast checker
Linear, radial, conic & mesh gradients with grain, animation and CSS / PNG / SVG export — in the full Gradient Generator.
Color FAQ
How do I get a colour palette from an image?
Drop an image into the extractor — it pulls the dominant colours right in your browser and shows each one's hex code. Tap a swatch to copy it. Nothing is uploaded.
How do I convert a hex colour to RGB or HSL?
Type or paste a hex code (or use the colour picker) and the RGB and HSL values appear instantly, each one tap-to-copy.
Can I export the palette to CSS or Tailwind?
Yes — export an extracted palette as CSS variables, a Tailwind config snippet, SCSS variables, JSON, or a PNG swatch sheet, all in one tap. Most palette tools paywall exports; they're free here.
What are colour harmonies?
Harmonies are colour combinations that look good together — complementary, analogous, triadic, tetradic and split-complementary. Enter any colour and this tool generates each set instantly, computed from the colour wheel.
Can I check colour contrast for accessibility?
Yes — the WCAG contrast checker shows the exact ratio between a text and background colour and whether it passes AA, AAA and AA-large, so your text stays readable.
Can I make a CSS gradient?
Yes — there's a quick gradient here, plus a full dedicated gradient generator with mesh gradients, presets and export.
Is my image uploaded?
No — palette extraction happens entirely in your browser using a canvas. Your image never leaves your device.
Free, no signup. See all free tools →