Skip to content
CrateX.app logo

CrateX.app

Image Color Picker & Palette

Image Color Picker & Palette

Image Color Picker & Palette lets you click an image to sample colors, extract dominant colors, and export CSS variables or JSON for design work, brand palettes, and theme systems.

Drag & drop image here or click to select

Supports PNG / 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

Images are processed locally in your browser. You can re-pick colors, extract palettes, and export results at any time.

FAQ

5

Continue with these related tools for the next step.