Color Tool

Free Color Palette Generator from Image: Extract HEX Codes

Upload any photo and get its main colors as a palette with HEX and RGB codes. Choose how many colors you want, then copy them as CSS variables, a Tailwind config, SCSS or JSON. No signup, and your image never leaves your browser.

Drop an image here, or click to upload

JPG, PNG, WebP, GIF or AVIF, up to 25 MB. You can also paste with Ctrl+V.

No sign-upInstant resultsRuns in your browserImage never uploaded100% free

3 Simple Steps

Add Your Image

Click the upload box, drag a photo into it, or paste one with Ctrl+V. No image handy? Try the sample to see how it works.

Choose How Many Colors

Pick 3, 4, 5, 6 or 8 colors. The palette updates instantly, and you can sort it by most used or from light to dark.

Copy & Use

Click a swatch to copy its HEX code, or export the whole palette as CSS variables, a Tailwind config, SCSS or JSON.

Why Use Our Color Palette Generator?

True Dominant Colors

Colors are grouped with k-means clustering, so you get the tones that really make up your image, not random pixels.

Ready-to-Paste Code

Export your palette as CSS variables, a Tailwind config, SCSS variables, JSON or a plain HEX list in one click.

Private by Design

Your image is read inside your browser. Nothing is uploaded, nothing is stored, and there is no signup.

How to Extract Colors from an Image

A color palette from an image is a short list of the colors that appear most in a photo, such as#7C3AED, #EC4899 and#F97316. Designers use it to build a brand style from a logo, match a website to a hero photo, or pick colors for a presentation. Upload your image above and the tool finds the main colors for you.

If the colors will go on a website, copy them as CSS variables or a Tailwind config. If you need to check whether a color is readable on white or black, paste its HEX code into our Color Picker, which shows the WCAG contrast ratio and a full shade scale. For a large photo, you can first cut out the part you care about with our Image Cropper, or make the file smaller with the Image Compressor.

Palette Generator vs Color Picker: Which One Do You Need?

→Palette generator: Reads the whole image and gives you its main colors. Best when you want a set of colors that work together.

→Color picker: Gives the exact value of one color in many formats (HEX, RGB, HSL, HSB, CMYK). Best when you already know which color you want.

→Use both together: Generate a palette here, then open a color in the Color Picker to check contrast and build shades.

→Exports: Palette codes copy as CSS, Tailwind, SCSS or JSON. Use the JSON Formatter if you want to tidy the output.

Need one exact color instead? Open the Color Picker. Want to tidy the exported JSON? Use the JSON Formatter.

Common Use Cases

Build a brand color palette from a logo or product photo

Match website colors to a hero image

Get HEX codes from a mood board or inspiration photo

Create a color scheme for slides or social posts

Pick interior or fashion colors from a photograph

Turn a painting or screenshot into CSS variables

Create a Tailwind color set from any image

Find colors for illustrations, banners and thumbnails

Who Should Use This?

→Web developers: copy palettes as CSS or Tailwind

→UI/UX designers: start a design from a reference photo

→Brand designers: pull brand colors from a logo

→Photographers: see the color story of a shot

→Students and teachers: color schemes for projects

→Social media creators: match posts to a photo

Features

Upload, drag and drop, or paste an image

3, 4, 5, 6 or 8 colors from one upload

HEX, RGB and usage percentage for every color

Sort by most used or light to dark

One-click copy for each swatch

Export as CSS, Tailwind, SCSS, JSON or HEX list

Same result every time for the same image

Works on mobile, tablet and desktop

Image processed in your browser only

Nothing stored, full privacy

Frequently Asked Questions

How do I get a color palette from an image?

Upload or drag a photo into the box above, or paste one with Ctrl+V. The tool reads the pixels in your browser and shows the main colors as a palette with a HEX code for each one. Click any swatch to copy its code.

How does the tool find the dominant colors?

It shrinks your image, groups similar pixels together, and then uses k-means clustering to find the colors that best represent each group. Colors that cover more of the image come first. The same image always gives the same palette.

How do I get the exact HEX code of one spot in my image?

A palette shows the main colors of the whole image, not one pixel. To read the exact color of a single spot, open the image on your screen and use the Pick from screen button in our Color Picker (Chrome and Edge). It also gives you RGB, HSL, HSB and CMYK values.

How many colors can I extract?

Choose 3, 4, 5, 6 or 8 colors. Use 3 to 5 for a simple brand-style palette and 6 to 8 for photos with many different tones. Changing the number updates the palette instantly without uploading the image again.

Which image formats work?

JPG, PNG, WebP, GIF and AVIF work in modern browsers. HEIC photos from an iPhone are not supported by most browsers, so convert them first with our HEIC to JPG converter and then upload the JPG.

Why does the palette miss a small color in my image?

The palette is based on how much of the image each color covers, so a tiny logo or accent can be averaged into a bigger color. Crop the image to that area with our Image Cropper and upload the cropped version, or raise the number of colors.

Can I use the palette in CSS, Tailwind or SCSS?

Yes. Under the palette, choose CSS variables, a Tailwind config, SCSS variables, JSON or a plain HEX list and copy it in one click. If you want to clean up or check the JSON before using it, paste it into our JSON Formatter.

Is my image uploaded to a server?

No. The image is opened and read inside your browser, and nothing is sent to any server or stored. When you close or refresh the page, it is gone.

Can I check if the palette colors are readable together?

Yes. Copy any HEX code from the palette and enter it in our Color Picker to see its WCAG contrast ratio against white and black, plus a full 50 to 900 shade scale.

Does it work on mobile?

Yes. Tap the upload box to choose a photo from your gallery or take a new one with your camera. The palette and export tools are fully responsive.

You may also find these free tools helpful

Ready to get your palette?

Takes a few seconds. No signup. No ads.