How to Get a HEX Color Code from an Image (and Build a Palette)

You see a photo with the perfect color. A sunset, a plant, a product shot. You want that exact color in your design. The trick is to read the pixel and turn it into a code your tools understand. This guide shows how to get a HEX code from an image, and how to build a full palette from one picture.

What is a HEX code?

A HEX code is a short code that describes a color for screens. It starts with a # and has six characters, like #FF6B35. The first two characters are red, the next two are green and the last two are blue. Designers use HEX codes in Figma, CSS and almost every design tool, so it is the most useful format to grab.

Get a color code in three steps

1. Open the free image color picker.
2. Drop your photo on the page, or paste it with Ctrl+V.
3. Move your mouse over the picture. A small magnifier shows the exact pixel. Click to pick it, and the HEX code appears. Click the code to copy it.

Every color also shows its RGB and HSL value, in case your tool needs one of those instead. Nothing is uploaded. The picture stays on your computer.

Build a palette from a photo

You don't have to pick colors one by one. The tool also reads the whole picture and groups similar pixels together. The biggest groups become your palette. Use the slider to choose anywhere from 3 to 12 colors.

A good rule: start with 5 or 6 colors. That gives you enough range for a background, a text color, one or two accents, and a neutral.

Tips for better palettes

• Choose the photo with care. A photo with a clear mood gives a palette with a clear mood. A busy photo gives muddy results.
• Pick from the middle of a color, not the edge. Edges mix two colors together and give you a color that is not really in the picture.
• Check contrast before you use text colors. Put your text and background through the contrast checker.
• Don't use all of them. Most designs use one main color, one accent and a few neutrals.

Turn one color into a full set

Once you have a color you like, you can build around it. The palette tool shows complementary, analogous, triadic and split-complementary versions of your base color. If you work with Tailwind CSS, our Tailwind shades generator turns that single color into a full 50 to 950 scale.

A worked example: from HEX to other formats

Say you click a warm orange and the tool gives you #FF6B35. Each pair of characters is a number written in base 16. FF is 255, 6B is 107 and 35 is 53, so the same color in RGB is rgb(255, 107, 53). In CSS you can use either one:

.button {
  background: #FF6B35;
  /* the same color: */
  background: rgb(255, 107, 53);
}

In Figma, paste the HEX code into any fill field and press Enter. You can also paste it without the # sign.

When the picked color is not quite right

• Screens differ. The same pixel can look a little warmer or cooler on another monitor. The code is the same, and the number is what your design file stores.
• JPG compression adds noise. A flat-looking area is really thousands of slightly different pixels. Click in a few spots and use the one that feels right, or let the palette tool average them.
• Gradients have no single color. A sunset sky changes from pixel to pixel. Pick two or three points along it and build your own gradient.
• Shadows and highlights change the color. To find the true color of an object, pick from a part that is evenly lit.

A simple way to build a brand palette from one photo

1. Choose a photo that matches the feeling of your brand: calm, bold, playful or serious.
2. Generate a palette of 5 or 6 colors.
3. Choose one color as the main brand color. It should be strong enough to stand out against white.
4. Choose one lighter color for backgrounds and one dark color for text.
5. Keep one more color as an accent for buttons and links.
6. Run the text and background pairs through the contrast checker before you save them as styles.

This gives you a palette that feels connected to a real image, rather than colors chosen at random.

Frequently asked questions

How do I find the color code of something in a picture?

Open an image color picker, load the picture and click on the spot you want. The tool reads that pixel and shows its code.

Is the color exactly right?

It reads the pixel as your screen shows it. Photos can look different on different screens, and JPG compression adds tiny changes, but it is accurate enough for design work.

Can I use the colors in Figma?

Yes. Copy the HEX code and paste it into any color field in Figma.

Do I need to sign up?

No. The tool is free and runs in your browser.

Try it now with your own photo: open the image color picker.