Color Palette Generator from Image
Pull the dominant colours out of any photo as HEX, RGB and HSL. Everything runs locally with zero file uploads.
- In
- PNG · JPEG · WebP · GIF · SVG
- Out
- HEX · RGB · HSL · CSS · JSON
Drop an image
A photo, a screenshot or a logo: PNG, JPEG, WebP, GIF or SVG. You can also paste an image.
Get a colour palette from any image
Drop a photo, a screenshot or a logo and this colour palette generator pulls out its dominant colours, ranked by how much of the picture each one covers. Choose between 3 and 12 swatches, copy any of them as HEX, RGB or HSL, click anywhere on the image to pick an exact pixel, and export the palette as CSS variables, SCSS, a Tailwind config, JSON or a PNG strip. The image is analysed on your own device and is never uploaded.
How to extract colours from an image
- Drop an image onto the page, choose one from your files or paste it straight from the clipboard. PNG, JPEG, WebP, GIF and SVG all work.
- Set Colours to the number of swatches you want. The strip above the list shows each colour at its share of the image.
- Click a value to copy it as HEX, RGB or HSL.
- Need a specific spot, like the colour of a button in a screenshot? Click that point on the image to sample it, then add it to the palette with the plus button.
- Pick an export format and copy the code, or download the palette as a PNG strip.
How the dominant colours are found
A photo can easily contain a hundred thousand distinct colours, most of them tiny variations of each other. To find the handful that matter, the image is scaled down and every pixel is grouped with the ones that look most similar to it, using a method called k-means clustering. Each group becomes one swatch: the average of its pixels, ranked by how many pixels it holds.
Two details make the result better than a naive picker. First, colours are compared in OKLab, a colour space designed so that equal distances look like equal differences to the eye. Clustering in plain RGB tends to split greens into many near-identical shades while lumping distinct blues together. Second, the starting points are chosen deterministically, favouring colours that are both common and far from the ones already chosen, so the same image always gives the same palette and a small but vivid accent, like a red logo on a grey wall, is not swallowed by the background.
Transparent pixels are ignored, so a logo on a transparent PNG gives you the logo's colours, not a swatch of black.
HEX, RGB and HSL: which one to copy
Need OKLCH, CMYK or HSV, or a lighter tint of one of the swatches? Paste the HEX value into the color converter, which shows every notation along with tints, shades and colour harmonies.
- HEX
- #2a9d8f. Six hexadecimal digits for red, green and blue. The most compact form, accepted by every design tool and by CSS.
- RGB
- rgb(42, 157, 143). The same three channels as numbers from 0 to 255. Handy in code that does arithmetic on colours, or in tools that ask for separate values.
- HSL
- hsl(173 58% 39%). Hue, saturation and lightness. The easiest notation to adjust by hand: raise the lightness for a hover state, lower the saturation for a muted variant.
Export formats
- CSS variables: a
:rootblock with--palette-1,--palette-2and so on, ready for any stylesheet. - SCSS:
$palette-1style variables for Sass projects. - Tailwind v3 config: a
theme.extend.colorsobject fortailwind.config.js, giving classes such asbg-palette-1. - Tailwind v4 @theme:
--color-palette-1custom properties for the CSS-first configuration of Tailwind 4. - JSON: an array with the HEX, RGB and HSL of each colour, for scripts and design tokens.
- PNG strip: the swatches side by side as an image, for a mood board, a brief or a chat message.
Tips for a useful palette
- Fewer colours for brand work, more for illustration. Five or six swatches usually capture a photo's mood; raise the count to 10 or 12 when you need the supporting tones as well.
- Crop first. A large sky or white page border dominates the result. Crop to the part of the image you care about for a palette that reflects it.
- Check text colours before using them. Colours pulled from a photo rarely come with enough contrast for text. Run any pair you plan to put text on through the contrast checker.
- Use the eyedropper for exact values. Dominant colours are averages. When you need the precise colour of one pixel, such as a logo or a UI element in a screenshot, click it.
Frequently asked questions
- How do I get a colour palette from an image?
- Drop the image onto this page. The dominant colours appear immediately, ranked by how much of the image they cover, and you can change how many you get, copy each one as HEX, RGB or HSL, and export the set as CSS, Tailwind or JSON.
- How do I find the HEX code of a colour in a picture?
- Load the picture and click the exact spot you want. The eyedropper shows that pixel's HEX, RGB and HSL values, and clicking any value copies it.
- How are the dominant colours calculated?
- The image is downsampled and its pixels are clustered with k-means in the OKLab colour space, which measures colour difference the way people perceive it. Each cluster's average colour becomes a swatch, ranked by the share of pixels it contains.
- Why do I get slightly different colours than another tool?
- Every extractor groups similar pixels differently, and the swatches are averages of those groups rather than single pixels. This tool's seeding is deterministic, so the same image always gives the same result here. Use the eyedropper when you need an exact pixel value.
- Can I export the palette to Tailwind CSS?
- Yes. Choose Tailwind v3 config for a colors object to paste into tailwind.config.js, or Tailwind v4 @theme for the CSS-first configuration, and copy or download the code.
- Does it work with transparent PNGs and logos?
- Yes. Pixels that are mostly transparent are skipped, so the palette reflects the visible artwork rather than the empty background.
- Is my image uploaded?
- No. The image is decoded and analysed in your browser and never leaves your device.