Free tool

Image Color Picker and palette generator

Get HEX, RGB and HSL codes from any photo, and build a color (colour) palette from it. Everything runs in your browser. Your image is never uploaded.

Drop an image hereor choose a file, or paste with Ctrl+V

How it works

Get a color code from a picture in three steps

  1. Add your imageDrop a photo on the box, choose a file, or paste an image with Ctrl+V.
  2. Pick or extract colorsClick anywhere on the picture to pick a color, or use the palette the tool builds for you.
  3. Copy or exportClick a HEX code to copy it, or export the whole palette as CSS, Tailwind, JSON or an image.
Good to know

Color picker and palette generator for designers

Exact pixel colors

Click any spot and the tool reads that pixel. A magnifier shows you exactly where you're picking.

A palette in one step

The tool finds the main colors in your photo for you. Slide to choose 3 to 12 colors.

Ready for your work

Copy HEX, RGB or HSL, or export CSS variables, a Tailwind color object, JSON or an image.

Private

Your picture stays on your device. Nothing is uploaded and nothing is stored.

FAQ

Image color picker questions

How do I get a HEX code from an image?

Drop your image on the tool, move your mouse over it and click the spot you want. The HEX code appears right away and you can copy it with one click. The tool also pulls the main colors out of the picture for you.

How does the palette generator work?

It looks at the pixels in your picture and groups similar colors together. The biggest groups become your palette. You choose how many colors you want, from 3 to 12.

Is my image uploaded?

No. Everything happens in your browser, on your own device. Your photo never leaves your computer or phone.

What is a HEX color code?

A HEX code is a six-character code that describes a color for the web, like #FF6B35. The first two characters are red, the next two are green and the last two are blue.

Can I get RGB and HSL values too?

Yes. Every color shows its HEX, RGB and HSL value, and each one copies with a click.

Can I use these colors in Figma, CSS or Tailwind?

Yes. Use the export box to copy your palette as HEX codes, CSS variables, SCSS variables, a Tailwind color object or JSON. You can also download the palette as an image.

What image types work?

JPG, PNG, WebP, GIF and most other pictures your browser can show. You can also paste an image with Ctrl+V.

Can I build a palette from one color?

Yes. Click any color, then look at the harmony section. It builds complementary, analogous, triadic and split-complementary palettes, and tints and shades of that color.

Read the guideHow to Get a HEX Color Code from an ImagePick exact colors and build a palette from a photo.Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.