Extract dominant colors from images
Drag & drop or click to upload
PNG, JPEG, WebP, GIF
Higher resolution images produce more accurate color extraction
Use the extracted primary color as your brand's main color
Ensure text and background color combinations meet WCAG standards
Use complementary and analogous colors for harmonious designs
Export palettes in CSS, Tailwind, SCSS, and other formats
Click colors to select them and analyze contrast between two colors
A tool that automatically extracts dominant colors from images to create color palettes. Provides color harmony analysis, WCAG accessibility checking, and brand color suggestions based on extracted colors. Export colors in CSS/Tailwind/SCSS/JSON formats.
Upload an Image
Drag an image into the upload area or click to select the image whose colors you want to extract
Review the Palette
Review the automatically extracted dominant color and palette, and adjust the palette size if needed
Analyze the Colors
Review color harmony and accessibility analysis. Select two colors to analyze their contrast ratio
Export
Export or download the palette as CSS, Tailwind, SCSS, or JSON
You can use most image formats supported by your browser, including PNG, JPEG, WebP, and BMP.
It is the luminance contrast ratio between text and background colors defined by the WCAG 2.1 guidelines. AA conformance requires at least 4.5:1 for normal text and 3:1 for large text.
Yes. Use the palette size setting to control how many colors are extracted.
Color harmony is a method of combining colors based on their relationships on the color wheel. Examples include complementary colors (180° apart), analogous colors (adjacent), and triadic colors (120° apart), which help create balanced color combinations in a design.
Yes. You can export it as CSS variables, Tailwind configuration, SCSS variables, or JSON and use it in your project right away.