HSHimanshu Sharma
Free Tools

Image Color Picker guide: read HEX and RGB values and build a palette from any photo

Himanshu Sharma · · 6 min read

Advertisement

You see a colour in a photo, a screenshot or a logo and you want exactly that colour in your design. You could guess, but guessing rarely matches. The free Image Color Picker lets you open an image, click any pixel and read its HEX and RGB values, and it also suggests a small palette of the dominant colours in the picture. This guide explains how colour codes work, how to use the tool, and how to avoid the mistakes that make a colour scheme look wrong or hard to read.

How colour codes work

Screens make colour by mixing three lights: red, green and blue. Each channel has a brightness from 0 (none) to 255 (full). A colour is therefore three numbers.

RGB

RGB writes those three numbers directly. rgb(255, 87, 51) means red at full strength, green at 87 and blue at 51, which gives an orange-red.

HEX

HEX is the same three numbers written in base 16 (hexadecimal), two digits per channel, with a # in front. Hexadecimal digits run 0 to 9 and then A to F, so FF is 255, 57 is 87 and 33 is 51. That is why:

#FF5733  =  rgb(255, 87, 51)

Pure black is #000000, pure white is #FFFFFF, and every grey has three equal pairs such as #808080. Some tools also accept a short form where each pair is a repeated digit, so #FFAA00 can be written #FA0.

Which one should I use?

Both describe the same colour, so use what your project expects. HEX is compact and common in design tools and CSS. RGB is easier to adjust and lets you add transparency with rgba(), for example rgba(255, 87, 51, 0.5) for half see-through. The picker shows both so you can copy whichever you need.

Using the Image Color Picker

  1. Open the Image Color Picker.
  2. Choose an image from your device.
  3. Click anywhere on the image. The tool reads that pixel and shows its HEX and RGB value.
  4. Copy the value you want, or use one of the swatches from the palette it extracts from the image.

Practical tips for getting the colour you really want:

  • Zoom into a flat area. A photo has noise, shadows and texture, so neighbouring pixels differ slightly. Click the middle of a flat area, such as a plain wall or a logo's solid fill, rather than an edge.
  • Click a few times and compare. If three clicks in the same area give very close values, you have found the colour. If they vary a lot, the area is textured, and the palette swatch will give a better average.
  • Use the palette for a mood. The extracted swatches give you the main colours of a picture. They are a quick starting point for a theme that fits a photo.
  • Start from a good source. A heavily compressed image can contain blocky colour artefacts. A larger, cleaner image gives more trustworthy values.

Colour you pick is the colour in the file

One point surprises people: the value you read is the colour stored in the image, not necessarily the colour you saw on your screen. Screens differ in brightness and colour calibration, and some images carry a colour profile that tells software how to display them. A picker reads the pixel values. If you need an exact brand colour, take it from the brand's guidelines or from the original vector file when you can, and use a picked colour for approximations and inspiration.

Choosing colours that people can read

A colour that looks good in isolation can fail when used for text on a background. Accessibility guidelines measure this with a contrast ratio, a number from 1 (no difference) to 21 (black on white). The Web Content Accessibility Guidelines (WCAG) ask for at least:

  • 4.5 : 1 for normal-size text, and
  • 3 : 1 for large text, which means roughly 24 pixels or more, or 19 pixels or more in bold.

Here are real ratios worked out from the WCAG formula:

Text colour Background Ratio Normal text
#FF5733 #FFFFFF about 3.15 : 1 Fails
#FF5733 #000000 about 6.66 : 1 Passes
#767676 #FFFFFF about 4.54 : 1 Passes, barely
#777777 #FFFFFF about 4.48 : 1 Just fails
#1D1A17 #FFFAF1 about 16.66 : 1 Passes easily

The orange-red from the earlier example is lovely on a black background and weak as text on white. That is the kind of surprise to catch before you build a page. Use a contrast checker whenever you pair a picked colour with another, and do not rely on colour alone to carry meaning. A red error message should also have an icon or a word, because some people cannot tell red from green.

Turning a picture into a palette

A simple, reliable method:

  1. Pick one main colour that represents the image. It becomes your brand or accent colour.
  2. Pick one dark colour for text and one light colour for backgrounds. Check the contrast between them.
  3. Pick one supporting colour from the palette for highlights, such as links and buttons.
  4. Stop. Three or four colours are enough for most sites. More colours make a design feel unfocused.

Then write them down once, as CSS custom properties, so every page uses the same values:

:root {
  --ink: #1d1a17;
  --paper: #fffaf1;
  --accent: #ff7a59;
}

You can then use var(--accent) everywhere. If you want to change the accent later, you edit one line. The CSS variables lesson shows how this works, and the colours lesson covers every colour format that CSS accepts.

Common mistakes

Picking from a JPEG's edge. Compression blends colours around edges, so an edge pixel is often a mix of two colours. Pick from inside a shape.

Trusting one pixel. A single pixel can be an outlier. Sample a few and compare.

Ignoring transparency. A logo with a transparent background may report the colour underneath as black or white. Check the picked colour against what you expect.

Using too many near-identical colours. Ten slightly different greys make a design look inconsistent. Choose two or three greys and reuse them.

Skipping the contrast check. Good-looking colour pairs can still be unreadable for many users, especially in sunlight or on low-quality screens.

Related tools

To shrink a photo before using it on a page, try the Image Compressor. If you need a placeholder to test a layout, the dummy text generator produces filler text. To see colours in action as you write CSS, paste your HTML and CSS into the HTML Viewer.

Quick answers

Does the tool upload my image? Read the tool page for how the image is handled. As a habit, avoid using private or sensitive images with any online tool.

Why do I get slightly different values on two clicks? Photos contain noise and gradients, so neighbouring pixels differ.

Which format should I copy, HEX or RGB? Use HEX for compact CSS and design tools. Use RGB when you need transparency.

Can I get a colour name? The values identify a colour exactly. Names such as "orange" are vague, which is why designers use codes.

Advertisement