日本語English

Image Color Palette Extractor

Drop a photo or design to get its main colours as a palette of 3 to 16 swatches, each with its share and colour codes. Click anywhere on the image to pick that exact colour. Your image is never uploaded.

On-device・No uploadMobile friendlyWorks offline

Your files and input are processed only inside your browser on this device and are never uploaded to our servers.

Drop a file here

or

Your image is analysed only on your device and never sent anywhere.Accepts: JPEG / PNG / WebP / AVIF / GIFUp to 30 MB per filePaste (Ctrl+V) also works
Extraction settings6 · Oklab
6

3 to 16 colours. Changing the number rebuilds the palette.

Colour method

The space used to measure how close colours are. Oklab is fine for most images.

How to use

  1. poster.jpgPhoto or design

    Add an image

  2. Main colors (4)Shares and hex codes

    Extract the main colors with shares

  3. palette.cssCSS variables
    palette.pngColor swatches

    Export as CSS variables, PNG and more

Pick the main colors from an image, with shares and codes, and export them

  1. Drop an image or click “Choose files”. “Try with a sample” works too.

  2. Choose the number of colours (3–16) and the colour method. The palette is recalculated straight away when you change them.

  3. Check each colour’s share and codes in the list. Press a code to copy it.

  4. Click anywhere on the image to pick the colour under the pointer, like an eyedropper.

  5. Export as CSS variables, Tailwind, JSON, ASE or a PNG swatch image.

What it does

3 to 16 colours automatically

Groups colours with k-means clustering. Change the count and the palette is rebuilt at once. The same image always gives the same result.

Perceptual colour spaces

Measures distances in Oklab (default) or CIE Lab, so colours that look alike end up together. Each swatch shows the average of its pixels in sRGB.

Copy HEX, RGB, HSL or OKLCH

Copy any colour in four notations with one click. The OKLCH value can go straight into a CSS oklch() declaration.

Eyedropper on the image

Click any spot on the image to read that pixel’s colour. Handy for background colours or a photo’s accent.

Developer and designer exports

CSS custom properties on :root, a Tailwind colors block, JSON with shares, Swatch Exchange (ASE) and a PNG of the palette.

Fast on large photos

The image is shrunk to at most 512 px before analysis, and the work runs in a Web Worker, so large photos still finish quickly.

Use cases

  • Choose website accent colours that match a photo
  • Turn a design’s colours into CSS variables or a Tailwind colour block
  • Make a swatch file (ASE) from a photo for use in design software
  • Note a logo’s or product photo’s colours as HEX, RGB and HSL for a document
  • See which colours fill the most of an image, as numbers

Supported formats

Input

JPEG (.jpg / .jpeg)PNG (transparent areas are ignored)WebPAVIF (in browsers that support it)GIF (still)

Export

CSS variables (:root)Tailwind colorsJSONASE (Swatch Exchange)PNG (palette image)

Capability matrix

FeatureSupportNotes
Extract 3 to 16 coloursSupported—
Analysis in Oklab or CIE LabSupported—
Copy HEX, RGB, HSL or OKLCHSupported—
Eyedropper (click on the image)SupportedReads pixels of the shrunken image
Export CSS variables, Tailwind, JSON, ASE or PNGSupported—
Skipping transparent areasSupportedPixels with less than 50% opacity are not counted
Naming colours (“red”, “navy” and so on)Not supportedNo colour names are given
Exact CMYK conversion for printNot supportedColours are handled in screen sRGB, so printed colours may differ
Colours from video or animated imagesNot supportedStill images only
Colours from PDF filesNot supportedExport the PDF page as an image first
HEIC (iPhone photos)PartialOpens only in browsers that support HEIC, such as Safari

Limits & notes

  • Up to 30 MB per file and 16 megapixels (for example 4,000 × 4,000).
  • Analysis uses an image shrunk to at most 512 px; fine patterns may be averaged into one colour.
  • 3 to 16 colours.
  • Animated images (GIF, APNG, animated WebP) are not supported.
  • Shares count only non-transparent pixels.
  • Works on smartphones. Analysis uses the shrunken image, so it stays light.

Privacy & safety

Reading, shrinking, colour analysis and export all happen inside your browser. Images and file names are never sent to or stored on a server.

FAQ

How do I get a colour palette from a photo?
Drop the image and choose the number of colours. The main colours appear, largest share first, and each code can be copied with its button.
What is the difference between HEX, RGB, HSL and OKLCH?
HEX and RGB are two ways of writing the same colour. HSL describes hue, saturation and lightness. OKLCH uses lightness, chroma and hue that track how colours look to people, and it works in CSS oklch().
How many colours should I pick?
For a photo, 5 to 8 is a good start. For a logo or a one-colour design, 3 to 4 is usually enough. Too many can give near-duplicate colours.
Are CMYK print colours exact?
No. Colours are handled in screen sRGB, so a CMYK value is only a rough guide. Follow your printer’s specification for print work.
Where can I use the ASE file?
ASE is a swatch format that many design applications can load. Support depends on the version of the software you use.
Is my image uploaded?
No. Everything runs in your browser; the image never leaves your device.

Color Converter, Contrast Checker & Palettes (Color Studio)

Type one color and see it in HEX, RGB, HSL, HWB, OKLCH and approximate CMYK. Check WCAG contrast against a background (AA/AAA), generate complementary or triadic schemes and a 50–950 OKLCH scale, preview how a palette looks with color-vision deficiency, and export CSS variables or Tailwind config. Nothing leaves your device.

No upload

Image Converter

Choose the target format first, then drop images to convert them in bulk. Tune quality per format, use lossless WebP, set a background for transparency and name the output files — nothing is uploaded.

No upload

SVG Studio

Load an SVG file or paste code to get a safe preview and a check of what is inside. Shrink it with SVGO, export PNG or WebP, turn it into a data URI, CSS or React code, and format it — all inside your browser.

No upload

Image to SVG

Traces a PNG, JPEG, WebP or BMP into an SVG that stays sharp at any size. Best for logos, line art, handwriting and icons. The image is processed only in your browser and never sent anywhere.

No upload

PSD Viewer & Layer Export

Open a PSD file in your browser and export the whole image or chosen layers to PNG, JPEG or WebP. No special software needed, and the file is never sent anywhere.

No upload

AI File Viewer & Exporter

Open an AI file (.ai, Illustrator’s format) in your browser and export it to PNG, JPEG or PDF, with no design software installed. Works with PDF-compatible .ai files. Your file never leaves your device.

No upload

Last updated: