Skip to content
CrateX.app logo

CrateX.app

Image Color Picker & Palette

Image Color Picker & Palette

Click to pick colors from image, auto-extract dominant colors and palette, copy HEX/RGB and export CSS variables. Supports PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.

Drag & drop image here or click to select

Supports PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF

Image Color Picker & Palette

Quick Start

1
Import image: Drag & drop or click to select
2
Panel switch: Desktop shows side panel; Mobile tap bottom button
3
Click to pick: Click anywhere on image to get that pixel's color
4
Copy color: After picking copy HEX/RGB/CSS format
5
Set color count: Drag slider or click preset (4/6/8/12/16/24/32)
6
Extract palette: Click extract button to get dominant color list
7
Export CSS: After extraction export CSS variables file
8
Export JSON: After extraction export JSON data file
9
Reset: Clear current image and results

Common Scenarios

Design/poster color picking

Extract primary and accent colors for color scheme

Theme/design system

Export CSS variables or JSON for project

Component styling

Extract matching colors for buttons, tags, charts

Brand consistency

Extract standard color palette from brand assets

Color Picker & Palette Options

Color count: 2–32, commonly 8/12; photos/gradients suggest 16–32
Preset buttons: 4/6/8/12/16/24/32 one-click switch
Sorting: By percentage from high to low, most common colors first
Number next to color: Shows pixel percentage in image

Usage Advice

Start with 8/12 to see overall effect, then increase to 16/24/32 as needed
When using in project, rename --color-1 to semantic names (e.g., --color-primary)
Keep page in foreground when extracting large images to avoid browser throttling

Limitations & Compatibility

Single file limit 128MB, very large images may cause slowdown
Palette extraction auto-downsamples for performance, results are representative colors
HEIC/HEIF decoding depends on browser support, convert to JPG/PNG if fails
Transparent pixels are ignored or processed as actual RGBA

Privacy & Security

All processing is done in your browser; data never leaves your device

FAQ

5

Continue with these related tools for the next step.