Tool 03 — Color

Color Palette from Image

Extract 5–8 dominant colors from any image using Median Cut. All processing happens locally — nothing is uploaded. Click any swatch for HEX, RGB, CMYK (sRGB), Lab D50, OKLCH and WCAG contrast values. Edit colors inline, name each swatch, and reset to the original extraction at any time. Export as ASE, CSS, JSON or SVG with optional CMYK output.

Deeper Dive
Extracting color palettes from images→

Color Palette from Image

⬆
Drop image here or click to browse
JPG, PNG, GIF, WebP — any resolution
⬤ Processed locally · never uploaded
Source Image
Selected Color
Edit
HEX —
RGB —
CMYK sRGB —
Lab D50 —
OKLCH —
WCAG on White
WCAG on Black
Name

How dominant color extraction works

Color extraction works by converting every pixel in the image to a perceptually uniform color space (Lab or OKLCH), then grouping similar colors using a clustering algorithm — typically k-means or median cut. Each cluster represents a region of the color space that appears frequently in the image. The centroid of each cluster becomes a palette color. The result is not an average of all pixels (which would produce a muddy grey-brown for most photographs) but a representative sample of the most visually significant colors. The number of clusters determines how many palette colors are extracted.

Using extracted palettes in design systems

Extracted palettes are a starting point, not a final design system. After extraction, edit individual swatches directly in the detail panel by clicking the color block — a native color picker opens. Give each color a name before exporting: named colors appear as the swatch name in ASE, as the comment in CSS, and as the role field in JSON — saving a renaming step in Illustrator or your token file. You will still typically need to adjust lightness and saturation for WCAG contrast ratios, generate tint-and-shade scales (use the Tint & Shade Generator), and verify the palette in both light and dark contexts. If you have edited swatches and want to start over, the Reset button restores the original extracted colors.

Privacy: why local processing matters

Many image processing tools upload your files to a remote server for analysis. This tool runs entirely in your browser using the Canvas API and JavaScript — your image is never transmitted. This matters for client work, unreleased product photography, medical imagery or any content that cannot leave your device. The tool accesses your image only within the sandboxed browser context and discards it when you close the tab.

Advertisement uicorn — fabled tools for designers and art directors uicorn — fabled tools for designers and art directors

Frequently asked questions

How many colors can I extract from an image?
The tool extracts up to eight dominant colors. For most images, five to six colors provide a complete and usable palette without redundancy.
Does the tool work with transparent PNG images?
Yes. Transparent pixels are excluded from the extraction. Only fully or partially opaque pixels contribute to the palette.
Why does my extracted palette look different from the image?
The tool extracts the statistically dominant colors — those that occupy the largest areas. Small but visually striking details (a red focal point in a mostly green landscape) may not be dominant by area and might not appear in the palette. Try cropping to focus on the area you care about.
Can I use extracted colors for print production?
Yes. The detail panel shows CMYK values (sRGB formula) for every extracted color — a quick reference for print. Enable the CMYK checkbox in the Export section to include CMYK values in all downloaded files. For press-accurate separations with ICC profiles (Fogra39, Fogra51, SWOP v2), copy the HEX value and paste it into the CMYK / HEX / Lab Converter, which applies a full profile simulation via Lab D50.
Can I edit the extracted colors?
Yes. Click any swatch in the palette to open the detail panel. Click the large color block on the left to open a native color picker — adjust the color and all values update immediately. You can also give each color a name that carries through to all exports. If you want to start over, click ↺ Reset next to the palette heading to restore the original extracted colors.
What image formats are supported?
JPG, PNG, WebP and GIF are supported. Very large images (over 20 MP) are automatically downsampled before extraction to maintain performance — this does not affect the accuracy of dominant color detection.

Related tools

Advertisement uicorn — fabled tools for designers and art directors uicorn — fabled tools for designers and art directors
Disclaimer — Tool 03 · Color Palette from Image
Local Processing
All image processing happens entirely in your browser using the HTML Canvas API. No image data is sent to any server. This tool functions without an internet connection once loaded.
Color Extraction Accuracy
Colors are extracted using a Median Cut algorithm on a downscaled image. Results represent dominant color regions, not every color present. Subtle gradients, textures, or low-frequency hues may not appear in the palette.
Lab D50 Values
Lab D50 values are mathematically converted from sRGB. Accuracy depends on the source image's color profile. Images without embedded profiles are assumed to be sRGB.
WCAG Contrast
WCAG contrast ratios are calculated per WCAG 2.1 using relative luminance. These are informational only. Accessible color combinations depend on type size, weight, and context — always verify in your target environment.
ASE Export
ASE files are exported in RGB, CMYK (sRGB), or both, depending on your selection. CMYK values use a mathematical sRGB model and do not account for press conditions, dot gain, or substrate. Verify all colors in your production workflow before committing to print.
Liability
All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.