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

  • Import image: Drag & drop or click to select
  • Panel switch: Desktop shows side panel; Mobile tap bottom button
  • Click to pick: Click anywhere on image to get that pixel's color
  • Copy color: After picking copy HEX/RGB/CSS format
  • Set color count: Drag slider or click preset (4/6/8/12/16/24/32)
  • Extract palette: Click extract button to get dominant color list
  • Export CSS: After extraction export CSS variables file
  • Export JSON: After extraction export JSON data file
  • 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

How to use the exported CSS file?

Put the exported :root { --color-1: ... } in global CSS, then reference with var(--color-1).

What is exported JSON for?

For scripts/design system reuse, e.g., generating Design Tokens or theme config. Each color includes hex/css/rgb and count.

What color count is recommended?

General UI: 8 or 12; minimal icons: 4–6; photos/gradients: 16–32. Use presets to quickly compare.

Why are click-picked and palette colors different?

Click picking gets single pixel; palette quantizes entire image for representative colors emphasizing overall trend.

Why is export button grayed out?

Need to click 'Extract Palette' button first, export becomes available after extraction completes.

How is exported filename generated?

Default uses original filename (without extension) + .palette-count + .css/.json, with illegal characters auto-cleaned.