Skip to main content
DailyBox

Color Palette Extractor

Extract the dominant colors of any image, edit and lock them, build color harmonies and export CSS, JSON, SVG, PNG or ASE.

Drop an image here

Drag and drop a picture, or browse your files. It is read in your browser and never uploaded.

PNG, JPG, WebP, GIF, AVIF, BMP and SVG, as far as your browser supports them.

Your image is processed in your browser and never uploaded. The optional AI consultant sends only the hex codes of your palette.

Extract the colors of an image and turn them into a palette

This tool reads an image in your browser and finds its dominant colors. It groups similar pixels, ranks the groups by how much of the image they cover and gives you a palette of 5, 8, 10 or 12 colors with HEX, RGB, HSL and CMYK values. Your image is never uploaded.

From there you can edit or lock colors, pick extra colors straight from the image, build color harmonies and export the result. To check contrast or convert a single color, use the Color Converter & Contrast Checker.

How it works

  1. Drop an image on the page or choose a file.
  2. Pick the number of colors and adjust the variety slider: higher values merge similar shades, lower values keep subtle differences.
  3. Click a color to see its HEX, RGB, HSL and CMYK values, edit it, lock it or remove it. Click the image to add the color under the cursor.
  4. Open the harmony section to generate complementary, analogous, triadic, split-complementary, monochromatic, warm or cool colors from any palette color.
  5. Export the palette as CSS variables, JSON, SVG, PNG or an ASE swatch file.

When to use it

  • Building a UI or brand palette from a photo, a logo or a screenshot.
  • Creating CSS variables for a website from an existing image.
  • Finding text and background combinations and checking how readable they are.
  • Collecting colors for a mood board or a presentation.

Good to know

  • The palette is a statistical summary of the image. Small details can be merged into a nearby shade unless you lower the variety slider or choose more colors.
  • Colors are read as your browser shows them (sRGB). Embedded color profiles can make the same file look different in other software.
  • The percentage is the share of the image’s pixels grouped into a color. Transparent pixels, and white or black when you choose to ignore them, are not counted. Large images are shrunk for analysis.
  • CMYK values are a simple mathematical conversion from RGB. Printed colors depend on inks, paper and profiles.
  • Harmonies are calculated from color-wheel rules and are marked as generated. They do not come from your image.
  • The AI consultant is optional. It sends only your palette’s HEX codes and your short note to Google’s Gemini API, can be unavailable or over its quota, and its suggestions are ideas, not guarantees. DailyBox recalculates the contrast of any text and background pairs it proposes.
  • The ASE file contains your colors as RGB swatches. It has not been tested in Adobe software, so if an app rejects it, use the CSS or JSON export.

Frequently asked questions

Is my image uploaded anywhere?

No. The image is read and analysed in your browser. Only if you use the optional AI consultant, the HEX codes of your palette and your short note are sent to the AI service, never the image.

How many colors will I get?

You choose 5, 8, 10 or 12. If the image has fewer clearly different colors at your settings, you get fewer, and a message tells you so.

Do locked colors change when I regenerate the palette?

No. Locked colors stay in place and the other colors are found again. A new color is never a near-duplicate of a locked one.

How is the dominant color chosen?

It is the color group that covers the largest share of the image’s pixels. The percentage shown next to it is that share.

Which formats can I export?

CSS variables, JSON, SVG, a PNG image and an ASE swatch file. You can copy the CSS and JSON or download any of them.

Do I need the AI to use the tool?

No. Extraction, editing, locking, harmonies and exports all work without it, and keep working if the AI service is unavailable.

Guides

Related tools