Palette Extraction and Presets

Extracting Colors from an Image

The Palette tool analyzes uploaded image pixels and generates representative colors.

How to Use

1. Open Palette.
2. Upload an image.
3. Set the desired number of colors.
4. Click Extract.
5. Review the generated swatches.
6. Copy the palette as HEX values or JSON.

Number of Colors

Enter the requested number in the Colors field.

The actual number of returned colors may be lower if the image does not contain enough distinct color groups.

How Extraction Works

The implementation uses image sampling, color quantization, and weighted clustering.

Processing Stages

1. The uploaded image is scaled into the preview canvas.
2. Pixel colors are grouped into quantized color bins.
3. A weighted color histogram is generated.
4. A weighted k-means clustering procedure estimates representative colors.
5. Colors are ordered according to cluster weight.
6. The resulting colors are displayed as swatches.

The implementation uses 16 quantization levels per RGB channel during histogram construction.

This reduces the amount of color information processed while preserving useful color groupings.

Why Extracted Colors May Differ

The generated palette is an approximation of the image's dominant color distribution.

Results may depend on:

• Image content
• Image scaling
• Color quantization
• Requested palette size
• Randomized clustering initialization

Repeated extractions can produce somewhat different results.

Exporting Extracted Colors

Copy HEX List

Click Copy HEX list to copy the palette as comma-separated HEX values.

Example:

#3B82F6, #22D3EE, #10B981

Copy JSON

Click Copy JSON to copy a JSON array.

Example:

[
  "#3B82F6",
  "#22D3EE",
  "#10B981"
]

Preset Palette Library

The Presets tab contains ready-made color combinations organized into categories.

Available Categories

The supplied preset library includes:

Example Presets

Sunset Glow

#FF6B6B
#F7B267
#FFD166
#F79D65
#A44A3F

Nordic Sea

#0EA5E9
#38BDF8
#22D3EE
#34D399
#10B981

Forest Trail

#2F3E46
#354F52
#52796F
#84A98C
#CAD2C5

Browsing Presets

Use the category selector to filter the library.

The search field can find palettes based on their names or HEX color values.

Click Shuffle to rearrange the displayed presets.

Applying a Preset

Click a preset card to:

1. Set its first color as the Color Lab base color.
2. Update the Quick Tools harmony base.
3. Make the selected preset available as the shared palette.
4. Attempt to copy the preset colors as JSON.

The selected preset's full color array is retained for shared palette export, while Color Lab can generate a harmony from the preset's first color.

Selecting Individual Colors

Click an individual color swatch to copy its HEX value.

Recommended Uses

Tip: Image-derived colors are excellent starting points, but text and interface colors should still be evaluated for sufficient contrast.