HEX Color Picker & Palette Guide

## HEX colors, RGB, and palettes (quick guide)
HEX is a common way to represent colors on the web. A HEX color is written like #RRGGBB.

### Examples
– #000000 → black
– #ffffff → white
– #2563eb → a vivid blue

### HEX vs RGB
– RGB is numeric: rgb(37, 99, 235)
– HEX is compact: #2563eb

They represent the same color.

—

## Build a palette from a real image
Use the tool below to extract a palette from an image you like.

Extract a Color Palette from an Image

Upload a JPG/PNG/WebP. Your image is processed in your browser (privacy-friendly). Copy HEX/RGB, download JSON, or share the result.

Drop an image here

or click to choose a file

Palette size

Palette

Details

Tip: For brand work, start with 5–8 colors. For photo cleanup, try 3–5.

FAQ

Is my image uploaded to the server?

No. The extraction runs in your browser via JavaScript. The file is not sent to our server by this tool.

How accurate is the palette?

It’s a pragmatic palette (k-means clustering on pixels). For gradients/noisy photos, results are approximate but usually very useful.

Can I use this for logos?

Yes. Logos with flat colors work extremely well. Use a smaller palette size (3–6) for clean results.

—

## Copy/paste CSS variables
“`css
:root {
–c1: #111827;
–c2: #2563eb;
–c3: #7c3aed;
–c4: #f59e0b;
}
“`

## FAQ
### Why do I get slightly different colors each time?
Small differences can happen because photos contain gradients/noise and we sample pixels for speed.

### Can I extract brand colors from a logo?
Yes — logos work extremely well. Try 3–6 colors: /extract-logo-colors/

## Related tools
– Extract colors from image: /extract-colors-from-image/
– Palette from image: /palette-from-image/
– Extract dominant color: /dominant-color-from-image/
– Extract logo colors: /extract-logo-colors/
– CSS color palette: /css-color-palette/
– HEX guide: /hex-color-picker-palette-guide/