Palette from image
Turn any image into a palette.
Drop a photo, artwork or screenshot to extract its dominant colors with coverage percentages. Hover a swatch to see where it lives in the image, then export it in one click.
Drop an image to start picking
PNG, JPG, WebP, GIF, AVIF or SVG. Processed on your device and never uploaded.
No image handy? Try a sample
Your palette 0
Press S or the bookmark on the swatch to collect colors here, then export them as CSS, Tailwind or JSON.
History 0
Every color you pick lands here and stays in this browser.
A Tailwind-style 50–950 scale built in OKLCH. Your color sits on its closest step .
How it works
How to use the palette from image
- 01
Open an image
Upload, drop, paste or capture one — or start with a sample.
- 02
Tune the palette
Choose 2–12 colors and sort them by coverage, hue or lightness.
- 03
Locate each color
Hover a swatch and everything else in the image dims, so you can see exactly where it comes from.
- 04
Export
Save colors to your palette or export to CSS, Tailwind v4, SCSS, JSON, PNG or SVG.
Built for precision
Pixel-perfect, not “close enough”.
Most pickers make you click and hope. TryColorPicker shows you the exact pixels before you commit — and lets you average them when the image is noisy.
Live pixel loupe
An 11×11 magnified grid follows your cursor, finger or arrow keys with the HEX value before you click.
Zoom to 6400%
⌘ / Ctrl + scroll or pinch to zoom at the cursor. A pixel grid appears past 1400%.
Averaged sampling
Sample 3×3, 5×5 or 9×9 areas to cancel JPEG noise and dithering in photos.
Locate any color
Hover a dominant color and the rest of the image dims, revealing exactly where it appears.
From pick to production
Every format you need, ready to paste.
Copy any of 11 color formats with one click, generate Tailwind-style 50–950 scales, and export whole palettes as code, images or a share link.
Color formats
- HEX
- RGB
- HSL
- HSB
- HWB
- CMYK
- OKLCH
- OKLAB
- LAB
- LCH
- Display P3
Export targets
- CSS
- Tailwind v4
- Tailwind v3
- SCSS
- JSON
- SwiftUI
- UIKit
- Compose
- Flutter
- Android
- Unity
- PNG
- SVG
FAQ
Palette from image FAQ
How are the dominant colors chosen?
Pixels are clustered with k-means in the perceptual OKLab color space, so groups match what your eyes see. Each swatch is then snapped to a real color from the image rather than a muddy average.
What does the percentage mean?
It is the share of the image’s visible area closest to that color. Transparent pixels are ignored.
Why is a small accent color missing?
Tiny areas can merge into a larger neighbour. Increase the number of colors, or pick the accent directly with the loupe and save it to your palette.
Can I check the palette for accessibility?
Yes. Select any color and open Contrast in the color lab for WCAG and APCA results, or Color blindness to preview the palette for protanopia, deuteranopia, tritanopia and achromatopsia.
More ways to pick
Pick your first color in seconds.
Free forever. No sign-up, no upload, no install.