Skip to content
CrateX.app logo

CrateX.app

Image Color Picker & Palette

Pick colors from one image locally in your browser, copy HEX/RGB/CSS values, extract a 2-32 color representative palette, and export CSS variables or JSON with HEIC/HEIF input support.

Drag & drop image here or click to select

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

File count

0 / 1

Total size

0 bytes / 25 MB

Single-file limit

25 MB
Image Color Picker & Palette

Quick Start

1
Import one image
2
Click preview and copy HEX/RGB/CSS
3
Choose palette size (4/6/8/12/16/24/32)
4
Extract representative colors
5
Export CSS variables or JSON

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 quantized sample count from high to low, most common colors first
Number next to color: Shows quantized sample count from the downsampled palette image
Export contract: CSS variables use:root --color-1 names; JSON lists index/hex/css/rgb/count for each palette color.

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

Palette extraction auto-downsamples for performance, results are representative colors.
Precision: click sampling uses a displayed canvas up to 2,048 px on the longest side; palette extraction uses a 256 px sample.
HEIC/HEIF is input only; local decoding may fail, so convert to PNG/JPEG if needed.
Alpha handling: CSS can output rgba(...); HEX/RGB do not include alpha; JSON keeps alpha through the css value.
Input boundary: no URL import, paste import, screen eyedropper, or browser extension workflow.
Color boundary: no HSL/CMYK/Pantone/LAB/OKLCH conversion, contrast checker, or WCAG matrix.
Export boundary: no Tailwind/SCSS/ASE/Figma/Procreate swatch export.

Privacy & Security

Image color picking and palette extraction run in your browser. The source image stays in page memory while this tool is open. The palette size setting may stay in browser storage; if WebDAV sync is enabled, that setting may sync according to your settings. Picked color, palette, error message, and preview zoom/pan data are runtime review state and may also sync through the WebDAV state schema while present. The image file is not synced by default; it only enters WebDAV attachment sync when you explicitly enable attachment sync. CSS/JSON palette exports are generated for download and are not stored as separate results. On shared devices, clear the image, picked colors, palette, saved settings, and site data when needed.

FAQ

5

Continue with these related tools for the next step.

About

About Us
Pricing

Legal

Terms
Privacy Policy
Cookie Policy

Preferences

Manage Cookies

All tool processing happens locally in your browser.