Extract the dominant colors from any image, with HEX, RGB and export to CSS and JSON.
A photo can contain tens of thousands of distinct colors, but the eye perceives just a few "dominant" ones that define the image's mood. Extracting a palette is exactly reducing that sea of colors to a small representative set. This tool uses median-cut quantization to group similar colors and then, inside each group, returns the most frequent tone (the mode) rather than the average, because the average of a group that still mixes tones is a grey that appears nowhere in the image. Every color comes with the share of the image it covers, so you can see what actually dominates. On top of the palette the tool derives roles (vibrant, muted, light, dark) and lets you click the image to grab a pixel's exact color. Export as CSS variables, JSON, a Tailwind config block or an SVG strip. Everything runs in the browser; the image is not sent to any server.
Simply counting which color appears most does not make a good palette: a sky photo would return several near-identical blues and ignore the sunset. Median cut solves this by thinking in color volume. It places all the pixels in a three-dimensional "box" (the red, green and blue axes) and repeatedly cuts it along the axis of greatest variation, splitting into smaller boxes.
Once there are enough boxes (one per requested color), the tool looks inside each box and picks its most frequent tone, not its average. That matters: the average of a box that still mixes sky blue and sunset orange is a muddy grey that appears nowhere in the photo. The mode is a color the image really has. Each color also carries how many pixels it represents, and the list comes out sorted by that dominance.
The most common use is creative: pulling a palette from a reference photo (a landscape, a product, an artwork) to build a moodboard or guide a design with that mood. From there, you can pick an accent color and support colors consistent with the image.
For development, the CSS export is direct: the colors come out as variables (:root { --color-1: … }) ready to become a site theme. And the JSON makes it easy to carry the palette into a script, a design token or a build tool. One click copies a specific color's HEX when you only need one.
The color count changes the palette's character: few (2–4) give a broad, contrasting set, good for a lean identity; many (8–12) capture nuance, useful for illustration. Images with little variety may return fewer colors than requested, there simply are not enough distinct tones to fill them. Fully transparent pixels are ignored, so the palette reflects only what is visible.
An important reminder: the palette represents the image's colors but does not guarantee accessibility. Before using two extracted colors as text and background, check the contrast (the WCAG guidelines call for at least 4.5:1 for normal text). Colors that look good together do not always have enough contrast for reading.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/image-color-palette"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Image Color Palette Extractor"
></iframe>The tool uses the median-cut algorithm: it repeatedly splits the image's color space along the axes of greatest variation and then, inside each group, returns the most frequent tone (the mode) rather than the average. Averaging would produce washed-out greys that do not exist in the image. Each color comes with the share of the image it covers.
Color analysis happens entirely in your browser. No image is sent to any server.