Color Picker from Screenshot — Brand Hex From Competitor UI
Someone drops a competitor landing page screenshot in Slack: “Match this blue.” You eyedrop one pixel on a compressed JPEG edge and ship #3A6FBF. Brand says it’s muddy. Compression and anti-aliasing lied — not your eyes. Pulling usable hex from screenshots is a sampling problem, not a single-click party trick.
Why one-pixel picks fail
| Trap | What you get | Fix |
|---|---|---|
| JPEG blockiness | Noise in flats | Prefer PNG/WebP screenshots |
| Anti-aliased edges | Midtones between bg and fg | Sample interior of fills |
| UI shadows | Darker than brand primary | Avoid shadow pixels |
| Zoom ≠ 100% / odd DPR | Blended CSS pixels | Reset zoom, pick from a file |
| Night Shift / True Tone | Warmer everything | Disable filters before capture |
| Browser dark reader extensions | Shifted page colors | Capture with extensions off |
Use an image color picker on a clean PNG — click interiors of buttons, not strokes or drop shadows.
Sampling workflow that survives review
- Capture at native resolution; avoid phone-of-monitor photos and Slack recompresses.
- Zoom so the fill is large; click the center of the largest flat region.
- Record 3 samples a few pixels apart; if they differ by more than roughly Δ3–5 per channel, you are on a gradient or artifact.
- Average only when the region is meant to be flat (3×3 or 5×5).
- Name the token (
brand.primary) before bikeshedding hex in chat. - Note the source URL and date — competitor palettes change.
When you own the site being sampled, prefer DevTools computed styles or design tokens over screenshots. Screenshots are for audits and “what shipped to prod?” archaeology.
Gradients, glass, and video frames
Glassmorphism and soft gradients do not have “the” hex. Extract:
- Base fill behind the frost
- Tint stops for the gradient
- Real stroke / border colors
- Text colors separately from fills
Guessing opacity from a composite pixel is unreliable — ask for the Figma token when stakes are high.
H.264 pause frames are worse than still PNG captures. Pause on a flat UI frame, OS-screenshot it, then pick. Never eyedrop a YouTube frame full of macroblocks and call it brand blue.
Display profiles and sRGB assumptions
Wide-gamut monitors, Windows advanced color, and macOS display profiles mean the same hex can look different across machines. For engineering handoff, agree that tokens are sRGB hex/RGBA as authored, and that screenshot sampling is approximate. Soft-proof in Figma or a calibrated browser when matching print or strict brand books.
If you need LAB or OKLCH for perceptual tweaks, convert after you trust the sRGB sample — do not eyedrop in a random color space thinking it is more accurate.
From pick to tokens
:root {
--brand-primary: #2563eb;
--brand-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, black);
--brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 12%, white);
}For moodboards, extract at most 5–7 colors (CTA, text, bg, surface, accent, status, border). Use temporary names (audit/primary) until brand workshop — do not ship competitorBlue in production CSS.
Also check contrast against white and dark backgrounds before calling it done. Pretty blues that fail WCAG AA for body text are still bugs.
Light and dark pairs
A primary that works on white may need a lighter companion on #0b1220 surfaces. Sample both themes from the screenshot if both exist; do not assume “invert” or a single alpha overlay recreates the competitor’s dark mode.
Ethics and verification
Matching a public marketing blue for research or competitive audit is normal. Shipping their logo mark, illustration style, or trademarked wordmark is not. Keep extracted palettes in private audit docs until legal/brand says otherwise.
- PNG/WebP source, not a thrice-recompressed Slack preview
- Flat interiors sampled; edges avoided
- Hover/pressed sampled separately when visible
- Side-by-side compare in the design tool
- Dark mode variant decided
- Contrast checked for text roles
If you own the brand, pull from Figma variables. Screenshots are a fallback for audits and “what gray is that on prod?” debugging — one careful multi-pixel sample beats ten Slack arguments about whose monitor is “right.”