Color Palette Generator
Extract a colour palette from an image and compare colour contrast.
A world of color. A few worth keeping.
One image · Approximate color extraction · HEX, RGB and CSS variables.
Every image has
its own language.
Drop a JPEG, PNG or WebP image here.
A palette in context.
Choose colors for the sample. Check body text and button labels as separate pairs.
Something worth
making.
A few considered colors can change the feeling of an everyday idea. Try yours here.
Explore the ideaWCAG 2.2 text contrast for solid, opaque sRGB pairs. Pass/fail uses the full ratio, not the rounded display. Large text means at least 18 pt regular or 14 pt bold; the sample body and button label are normal text. This checks two text pairs, not overall accessibility or button boundaries. Preview roles do not change the CSS export. About text contrast
Carry the feeling forward.
Build a starting palette from a photograph, illustration or reference image. Review the extracted shades, copy individual colors or bring the set into a stylesheet.
How to find your palette
- Start with an image.Load a JPEG, PNG or WebP reference.
- Consider the colors.Choose 3–10 colors to extract, then review the suggested shades.
- Take a shade with you.Pick a detail directly from the image, edit any swatch, then copy its HEX or RGB value.
- Bring the set into your design.Copy or download the CSS variables, then check contrast in context.
How are the colors selected?
Choose 3–10 colors to extract. The image is reduced to at most 256 pixels on its longest edge before ColorThief estimates a palette. Duplicate results are removed, so a simple image may return fewer colors. Changing the extraction size replaces edits and picked colors.
Which images can I use?
Load JPEG, PNG or WebP files under 50 MB. The shared image decoder limits either dimension to 10,000 pixels and the total to 25 million pixels. Transparent or near-white images may not yield a useful palette.
Can I copy HEX and RGB values?
Choose HEX or RGB, then select a swatch to copy. Use Edit to change a shade, or enable Pick from image and select an opaque point to add its original-image pixel color. Picking is pointer-based; Escape cancels it. Up to 10 colors are supported.
What does the CSS download contain?
A CSS file containing a :root block with neutral names such as --color-1. Edits and picked colors are included. The design preview lets you assign colors to text, background and button roles and check two text contrast pairs; those role choices do not alter the CSS export.
Where is my image processed?
Image decoding and color extraction run in your browser. ColorThief loads from an external CDN. Your image is not uploaded by this tool, and clearing the workspace removes the current preview and results.