Pick CSS Colors from an Image Without Guessing

A client once handed us a small JPEG logo and said, “Please make the site use this blue.” The image contained hundreds of slightly different blues—compression noise at the edges, lighter pixels from antialiasing, and one solid blue in the center. The picker was accurate every time; our sampling decision was the part that needed judgment.

A sampled pixel is evidence, not automatically a brand color

Raster images store pixel values, not design intent. A logo edge may blend with its background; a JPEG may add small compression variations; a screenshot may have been color-converted; a shadow or highlight may be deliberate decoration rather than the base color. One click gives the color of one pixel under one interpretation.

• Flat-color interior: usually the strongest place to recover a base logo color.

• Antialiased edge: a blend between the shape and its background, not the original fill.

• JPEG artifact: a nearby variation introduced by lossy compression.

• Transparent pixel: a foreground value whose visible result depends on the backdrop.

• Gradient or photograph: a range of colors where a representative palette is more useful than one “exact” value.

Begin with the least damaged source

Ask for the original SVG, design file, brand sheet, or lossless PNG before sampling a screenshot or JPEG. Vector artwork often contains explicit fills and strokes, which are closer to the designer’s intended values. If the raster image is all you have, keep the original untouched and work from a copy.

Method 1: sample locally in GIMP

1. Open the original image in GIMP and preserve any embedded color profile when appropriate for the workflow.

1. Zoom into a visibly flat area, away from edges, shadows, highlights, and text smoothing.

1. Select the Color Picker tool and click several nearby interior pixels.

1. Record the HTML/HEX and RGB readings shown by the color dialog.

1. If readings vary, use sample-average behavior over a small flat region or choose the dominant interior value—not an arbitrary edge pixel.

1. Repeat for each visually distinct role, then close the source without recompressing it.

Local sampling is my default because it keeps the asset private and makes zoom, channel values, alpha, and repeated measurements visible. The point is not that GIMP has a magical picker; it gives you enough context to notice when the image itself is ambiguous.

Method 2: use a browser or desktop eyedropper

A browser DevTools color control, operating-system eyedropper, or trusted design application can sample pixels already visible on screen. This is convenient when matching an existing interface. Remember that a screenshot captures the rendered result after color management, opacity, blending, filters, and display scaling—not necessarily the CSS source value.

Method 3: use an online image picker for non-sensitive files

Upload a disposable or public image, zoom in, click a flat region, and copy the reported HEX or RGB value. Repeat the sample instead of accepting the first result. If the service generates a palette, treat it as a starting hypothesis and verify its colors against the source and intended use.

• Check the service’s privacy and retention terms.

• Avoid tools that require unnecessary account or browser permissions.

• Do not assume an “HTML color” label means the value is accessible or brand-approved.

• Recheck the chosen colors in your own browser and CSS rather than depending on the picker preview.

Translate the reading into CSS without changing the color

For ordinary sRGB colors, six-digit HEX and rgb() are two notations for the same red, green, and blue channels. CSS Color Level 4 also supports alpha and wider color spaces, but copying a sampled sRGB value into a different color function without a real conversion can change its meaning.

:root {
  --brand-blue: #2463eb;
  --brand-blue-rgb: rgb(36 99 235);
  --brand-blue-soft: rgb(36 99 235 / 12%);
  --surface: #ffffff;
  --text-on-brand: #ffffff;
}
 
.primary-action {
  color: var(--text-on-brand);
  background-color: var(--brand-blue);
}

What the CSS representation preserves

• #2463eb encodes the opaque sRGB channels 24, 63, and eb in hexadecimal.

• rgb(36 99 235) expresses the same channels as decimal numbers.

• The slash in rgb(36 99 235 / 12%) supplies alpha; the visible result blends with whatever surface sits behind it.

• Custom properties name roles so a later correction can update every intended use without searching for scattered literals.

• A sampled value becomes a usable interface decision only after its paired text and surface colors pass contrast review.

The CSS Color Module Level 4 defines HEX, rgb(), alpha, and modern color functions. HEX is not inherently more accurate than RGB; precision depends on the source, color space, conversion, and chosen channel depth.

Handle transparency explicitly

A transparent PNG can contain a foreground RGB value plus an alpha channel. What you see on white is a composite; what you see on dark gray is another. If the picker samples the composited screen, it may report the visible blend rather than the stored foreground channels.

• Inspect alpha in an editor that can display channel values.

• Preview the asset over the actual light and dark surfaces used by the site.

• Do not infer an opaque brand color from a semitransparent shadow.

• Keep separate tokens for solid colors and translucent overlays when both are intentional.

Turn many sampled pixels into a small design palette

A logo may offer several legitimate colors, but an interface needs roles. Choose a primary brand color, an accent only when it has a distinct purpose, surfaces, text colors, borders, and state colors. Do not manufacture success, warning, or error colors merely by shifting the logo hue; those states must remain recognizable and accessible.

:root {
  --color-brand: #2463eb;
  --color-accent: #f08a24;
  --color-surface: #ffffff;
  --color-text: #172033;
  --color-border: #c8d0df;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #111827;
    --color-text: #f4f7fb;
    --color-border: #526078;
  }
}

Why role-based tokens age better

• --color-brand describes a design role rather than a fragile shade name such as blue-500.

• The media query reacts to the user’s color-scheme preference without assuming one sampled logo color works on both surfaces.

• Text, border, and surface tokens remain independently adjustable when contrast testing reveals a problem.

• Custom properties inherit through the cascade, so scope them deliberately when a component needs a local override.

Check contrast before calling the palette finished

WCAG 2.2’s minimum contrast guidance uses a ratio of at least 4.5:1 for normal text and 3:1 for large text, with specific definitions and exceptions. Enhanced targets are higher. Test the exact rendered foreground and background—including alpha blending—rather than testing each swatch in isolation.

Use a reputable contrast checker or browser accessibility tooling, then verify hover, focus, disabled, selected, error, and dark-mode states. A logo itself has different accessibility considerations from text that people must read; do not use brand identity as a reason to make controls illegible.

Why two pickers sometimes disagree

• Different pixels: the tools sampled neighboring antialiased or compressed pixels.

• Sample radius: one tool reads a single pixel while another averages a region.

• Transparency: one reports stored channels and another reports the composited display color.

• Color management: the image profile or conversion path differs between applications.

• Resizing: a browser or editor interpolated pixels while scaling the image.

• Wide gamut: one tool preserved a non-sRGB color while another mapped it into sRGB.

Resolve disagreement by documenting the source file, profile, coordinates or region, sampling method, and output color space. Repeating a defined measurement is more useful than debating which eyedropper “looks right” on one display.

Keep a tiny color provenance record

• Source asset filename and version.

• Date sampled and application used.

• Color profile or assumed output space.

• Sampled region and whether averaging was enabled.

• Approved HEX/RGB value and semantic token name.

• Contrast pairs tested and their results.

• Reviewer or stakeholder who approved the recovered palette.

The careful click saves revisions later

Recovering a palette is less about operating an eyedropper than recognizing what the pixel represents. Sample the cleanest evidence, preserve its color-space context, turn it into a small set of named roles, and test those roles in the interface. That gives the next developer something much better than “the blue from the logo”: a decision they can reproduce.