Images & Design
Get a color palette from an image
Drop a photo, logo or screenshot and get its 3 to 12 main colors with hex codes, a contrast check against white and black, and ready CSS or Tailwind code. It runs in your browser; the image is not uploaded.
or drop it here
#2c181016.86:1 on white#5c40339.39:1 on white#8b69145.09:1 on white#c08a4e6.99:1 on black#d4c5a912.36:1 on black#f5f0e818.51:1 on black
#8b6914 on white: 5.09:1 AA
Passes AA for body text (4.5:1), not AAA (7:1). The tool shows this for every color, on white and on black.
:root {
--primary: #2c1810;
--secondary: #5c4033;
--accent: #8b6914;
…
}In the tool: copy all hex codes, copy CSS or Tailwind, or download JSON.
One clear job, from image to palette
- 1
Drop your image
Drag a photo, logo, screenshot or design mockup onto the page. The image is drawn to a canvas in your browser and shrunk before the colors are counted.
- 2
Review and adjust the palette
See the main colors with their hex codes. Change the number of colors (3–12), pick a coarser or finer sampling width, and choose whether near-white and near-black pixels are skipped.
- 3
Check contrast and export
A table shows each color’s contrast on white and on black, with the AA or AAA level it reaches. Copy the palette as CSS custom properties, a Tailwind colors fragment or a plain hex list, or download it as JSON.
Pull a usable color palette from one image
What you drop in
You drop a photo, logo, screenshot or mockup as PNG, JPEG, WebP, GIF or SVG. Everything runs in your browser. The image is not uploaded, there is no job limit and you do not need an account. A typical use is a client's hero image or mood board that a website should match. The tool finds the colors that dominate the image rather than the ones you would pick by eye.
What you get and how to check it
You get between 3 and 12 main colors, 6 by default, each with its hex code. A contrast check shows whether each color meets WCAG AA or AAA as text on white or on black. For body text, AA asks for 4.5:1 and AAA for 7:1. A color that passes neither is fine for fills and borders but should not carry text. Look at the result in your real layout before you commit, because a color that dominates a photo may not suit a button.
Palette size, export and your design choices
The number of colors is the setting that matters most. Fewer colors give you a tight base, and more colors bring out accents and shadows. If a color you can clearly see is missing, raise the sampling width or the color count. You can copy the result as CSS custom properties, a Tailwind colors fragment or a plain hex list, or download it as JSON. The palette reflects the image only. Roles such as background, text and accent, and any colors the image lacks, remain your decision.
Questions before you run it
How many colors are extracted from an image?
6 by default. A slider sets anything from 3 to 12. The tool shrinks the image, sorts every pixel into one of 4,096 color boxes and averages the pixels in the busiest boxes. Near-duplicate colors are kept apart unless you allow similar colors.
How is contrast checked?
Each color is measured against white and against black, following WCAG 2.1. Normal body text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1. The table shows both ratios and whether the color works best as text on white, text on black, or only for fills and borders.
Which export formats are available?
CSS custom properties and a Tailwind colors fragment, each with its own copy button. You can also copy all hex codes at once or download the palette as a JSON file.
Which image formats can I use?
PNG, JPEG, WebP, GIF and SVG, plus any other image format your browser can open.
Are my images uploaded to a server?
No. The image is read and drawn to a canvas on the page. It is never sent to a server and is not stored after you close the tab.