How to get the exact HEX code from any image (and turn it into a CSS or Tailwind palette)

Every front-end developer has been there: a designer sends a screenshot instead of a Figma file, a client wants "the blue from our logo", or you're rebuilding a site and nobody remembers the brand colors. You need exact color codes, and you need them fast.

Here's the workflow I use, plus a few traps that make "the color from the image" less obvious than it sounds.

Why the color you pick is often wrong

Photos are noisy. Two neighbouring pixels on a wall that looks flat can differ by several shades because of JPEG compression, lighting and sensor noise. If you click one random pixel, you get a color, not the color a person would describe.

Two fixes:

1. Average a small area. Sampling a 5×5 block (25 pixels) and averaging gives a much steadier value than a single pixel.
2. Zoom before you click. Thin lines, text and logo edges are only a few pixels wide. A pixel-level magnifier stops you landing on the anti-aliased edge, which is a blend of two colors.

Which format should you copy?

The same color can be written several ways, and each has a job:

Format	Example	Use it for
HEX	#1B8A8F	CSS, Figma, Canva, brand guides
RGB	rgb(27, 138, 143)	Code, canvas, game engines
HSL	hsl(183, 68%, 33%)	Making a color lighter or darker in CSS
CMYK	cmyk(81%, 3%, 0%, 44%)	A starting point for print (confirm with a proof)
LAB	lab(52, -27, -11)	Comparing how different two colors look

For anything on screen, HEX is the default. HSL is underrated: once a brand color is in HSL, building hover and disabled states is just changing the lightness value:

:root {
  --brand: hsl(183 68% 33%);
  --brand-hover: hsl(183 68% 28%);
  --brand-muted: hsl(183 30% 85%);
}

From one color to a whole palette

Often you want the 5–8 main colors of an image, not a single pixel. Palette extraction groups similar pixels together (k-means clustering is the usual approach) and returns the center of each group. That gives you a palette that reflects what the image actually looks like, rather than the single most common pixel.

Once you have it, export it straight into your project instead of copying codes one by one:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          1: '#879CAC',
          2: '#6A6C5B',
          3: '#283023',
          4: '#C6D0D4',
          5: '#297094',
        },
      },
    },
  },
};

Don't forget contrast

A color pulled from a photo looks great as an accent and often fails as text. Check it against WCAG before you ship: 4.5:1 for normal text (AA) and 3:1 for large text. A mid-tone teal like #2E7390 passes AA on white (5.29:1) but not on black (3.97:1), which surprises people.

The tool I use

I built ColorPickImage for exactly this workflow. You upload, paste (Ctrl+V) or drop an image, click with a pixel magnifier, and get HEX, RGB, HSL, HSV, CMYK and LAB with one click. It averages 1×1 up to 9×9 pixels and extracts a 4–12 color palette that exports as CSS variables, SCSS, Tailwind, JSON, PNG or SVG. It runs entirely in the browser, so client screenshots never leave your machine, and there's no sign-up.

In Chrome and Edge it can also pick colors from anywhere on your screen (other tabs, apps or videos) using the EyeDropper API, which is handy when the "image" is a live website.

Quick checklist

• Zoom in before you click
• Average 5×5 for photos, 1×1 for flat UI screenshots
• Copy HEX for the web, convert to HSL for variants
• Extract a palette rather than picking colors one by one
• Check contrast before using a picked color for text

What's your workflow when someone sends you a screenshot instead of a design file?