Image Color Picker

How to use the image colour picker

1. Add your image — drag a photo, screenshot or logo onto the drop zone, or click browse. It is read on your device; nothing leaves your browser.
2. Hover to preview — move the pointer over the picture. The zoom loupe magnifies the area under the cursor and the readout shows the live colour so you can land on the exact pixel.
3. Click to pick — click to lock the colour. Its HEX, RGB and HSL appear with one-click copy buttons, and it is added to your recent-colours strip.
4. Grab the palette — the dominant colours of the whole image are extracted automatically. Click any swatch to copy its hex, or copy the whole palette as CSS variables or a JSON array.

What you can do with extracted colours

• Match a brand — drop in a logo or screenshot to read the exact brand colour instead of eyeballing it.
• Build a theme from a photo — turn a hero image or moodboard into a coordinated palette of CSS variables for a site or slide deck.
• Sample a UI element — pick the precise background, border or text colour from a screenshot of an app or chart.
• Re-create a design — pull the colours out of an inspiration shot so you can reproduce or recolour it.
• Check contrast — copy a picked colour into the WCAG contrast checker to confirm it is readable.

Colour format quick reference

How a colour is stored in an image

When you click a pixel, the value you get back is rooted in how digital images represent colour. Almost every photo on your screen uses 8 bits per channel — one byte each for red, green and blue — giving 256 possible levels (0–255) per channel. Combine three channels and you get 24-bit "truecolour", which is 256 × 256 × 256 = 16,777,216 distinct colours, the famous "16.7 million". A fourth channel, alpha, adds 8 more bits to record opacity, making a 32-bit RGBA pixel. That alpha channel is what lets a logo have soft, see-through edges — and it is why a colour sampled right on an anti-aliased edge is a blend of two colours rather than either one.

sRGB, gamma and why screens disagree

A pixel's rgb(58, 123, 255) is not an absolute colour — it is a colour in a colour space. The default for the web and for any image without an embedded profile is sRGB, a standard developed jointly by Hewlett-Packard and Microsoft (proposed in 1996, standardised by the IEC as 61966-2-1 in 1999). Two details from sRGB explain why a value can look different than you expect. First, sRGB stores values through a non-linear gamma curve, so the numbers are not raw light intensity and a display has to decode them. Second, that decoding — plus each monitor's brightness, calibration and the image's own colour profile — means the same RGB value genuinely renders slightly differently on different screens. Newer wide-gamut displays use a larger space called Display P3 (around 25% more colours than sRGB), so a vivid red sampled from a P3 image may actually fall outside what sRGB can describe. For pixel-accurate picking, the value this tool reads is exact; it is the appearance that varies from screen to screen.

HSL vs HSV, and the hex shorthands

The reference table above lists HEX, RGB and HSL, but a couple of nuances are worth knowing. HEX has compact variants: a 3-digit shorthand like #8A3 expands to #88AA33 (each digit doubled, which only works when a channel's two digits match), and an 8-digit form #RRGGBBAA tacks an alpha byte onto the end.

You will also run into HSV (Hue, Saturation, Value, sometimes called HSB) in image editors, and it is easy to confuse with HSL. The hue is the same in both, but the third component differs in a way that matters: in HSL, 100% lightness is always pure white; in HSV, 100% value is the most vivid version of the hue, not white. So "turn it all the way up" means white in HSL and a saturated colour in HSV. Useful to remember when a value copied from Photoshop (HSV) doesn't behave as expected in CSS — which supports HSL, not HSV.

This tool vs the browser's native eyedropper

Modern Chromium browsers ship a native EyeDropper API (Chrome and Edge 95+, from 2021) that lets a web page sample a colour from anywhere on your screen, even outside the browser window. It is genuinely handy, but it has two limits: it is not supported in Firefox or Safari, and it reads the screen-rendered, scaled pixels rather than the original image data. This image colour picker takes the complementary approach — it samples directly from your uploaded image's true pixel data via the canvas. That means it works in every browser, it reads the actual stored colour rather than whatever your display happened to render, and your image never leaves the page.

How dominant-colour palettes are extracted

Pulling a handful of representative colours out of a photo of millions of pixels is a classic problem called colour quantization, and there are several well-known approaches:

• Median cut — the classic algorithm (Paul Heckbert, early 1980s). It puts all the colours in one box, repeatedly splits the box along its longest axis at the median colour, and averages each final box into one palette swatch.
• Octree — inserts colours into an eight-way tree that subdivides the colour cube, merging the least-used branches until the target number of colours remains. Memory-efficient.
• k-means clustering — groups pixels around a set of moving "centre" colours, iterating until they settle on the dominant tones. Accurate but slower.
• Histogram bucketing — the fast, simple method (and what this tool uses): divide the colour cube into buckets, count how many pixels land in each, and pick the most populous, visually distinct buckets.

As an aside, you may remember the old "web-safe" 216-colour palette from the 1990s, when many monitors could only show 256 colours and 216 of them rendered identically on Mac and Windows. With every modern device displaying millions of colours, that palette is now purely a historical curiosity.

Turning one colour into a palette — and keeping it readable

Once you have picked a colour, basic colour-wheel theory helps you build a scheme around it. A complementary pairing uses the hue directly opposite (about 180° away) for maximum contrast; analogous colours sit next to each other on the wheel (within ~30–60°) for a calm, cohesive feel; a triadic scheme takes three hues evenly spaced 120° apart for balance with energy; and a monochromatic scheme varies a single hue's lightness and saturation for a unified look.

Whatever you choose, check it for accessibility. The WCAG guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet the AA level (and 7:1 for the stricter AAA level), so a colour that looks lovely as a background may fail as a text colour. WCAG also advises never relying on colour alone to convey meaning — add a label, icon or pattern — because around 8% of men and 0.5% of women have some form of colour-vision deficiency. You can paste any colour you pick here straight into the WCAG Contrast Checker to confirm it passes.

One last accuracy note for brand and print work: screens mix colour with light (RGB), while printing presses mix it with ink (CMYK), and CMYK can reproduce a smaller range of colours. That means you cannot perfectly capture a physical or print brand colour by sampling a photo of it on screen — for press-accurate work, always use the brand's official CMYK or Pantone specification rather than a picked screen value.

Getting an accurate reading

A colour picker returns the literal value of one pixel, so a little technique gets you the colour you actually want rather than a near-miss:

• Sample from a flat, central area of the region you care about — never right on an edge, where anti-aliasing has blended two colours into an in-between pixel that matches neither.
• Use the zoom loupe to land on the exact pixel. At normal size a single pixel is tiny, and being one pixel off can mean a noticeably different value.
• Prefer a lossless source. JPEG compression slightly varies the pixels even across a "solid" colour, so a region that looks uniform isn't quite. A PNG or the original asset gives a cleaner, more consistent reading; a screenshot of a flat UI colour is ideal.
• Pick from the artwork, not a photo of it, when you can. A logo file gives you the true brand colour; a photo of a sign or screen has been reshaped by lighting, the camera and compression.

Hex, RGB or HSL — which to put in your CSS

All three describe the same colour, so the choice is about what you're doing with it. HEX is the compact default you'll copy into most stylesheets and design tools. RGB is handy when you're working with the raw 0–255 channels or want an alpha value via rgba(). HSL is the one to reach for when you want to adjust a colour rather than just state it: nudge the hue to shift it around the wheel, raise the lightness to make a tint or lower it for a shade, or drop the saturation toward grey — all without leaving the same colour family. That makes HSL excellent for generating hover states, disabled styles and consistent tint/shade ramps from a single base colour. This picker shows all three for every colour you select, so you can grab whichever fits the task.

Storing a palette as design tokens

When you extract a palette, resist the urge to scatter raw hex codes throughout your stylesheet. The modern approach is to define each colour once as a CSS custom property (a CSS variable) and reference it everywhere by name — the foundation of what designers call "design tokens":

• Declare the palette in one place, typically on :root — for example --brand: #3a7bff; and --accent: #f59e0b;.
• Apply it anywhere with color: var(--brand); or background: var(--accent);.
• Change the colour once at the source and every use updates — no find-and-replace across files, and it's exactly how light/dark theme switching is built.

That is why this tool's "Copy CSS" button outputs the palette as ready-to-paste --color-1 … --color-5 variables: it drops straight into a :root block as the single source of truth for your colour scheme.

A note on transparency

Images can carry a fourth channel beyond red, green and blue — alpha, which records how opaque each pixel is. When you sample a partly-transparent pixel, the colour you get is the visible RGB the canvas composites, while CSS expresses the transparency separately: either as an 8-digit hex #RRGGBBAA or with an alpha value in rgba() or modern hsl() syntax. There is one deliberate behaviour worth knowing — when this tool builds the extracted palette it skips fully transparent pixels. That is why dropping in a logo on a transparent background gives you the brand's real colours rather than a muddy average that includes the empty space, which is exactly what you want when you're pulling a palette out of an icon or a PNG export.

Frequently asked questions