DEV Community

An Hoang Gia
An Hoang Gia

Posted on • Originally published at colortools.hashnode.dev

How to Pick an Exact Color From an Image and Use It in CSS (HEX, RGB, HSL & OKLCH)

#css #a11y #webdev

Sooner or later every front-end dev hits this: a client sends a screenshot, a photo, or a Figma export and says "make the button this exact blue." You need the precise color value — not "close enough" — and you need it in a format CSS understands.

Here's a quick, reliable workflow for grabbing colors from an image and turning them into production-ready CSS.

1. Sample the pixel with an image color picker

Browser devtools ship with an eyedropper, but it only samples what's already rendered on the page — not an arbitrary photo or a design mockup sitting in another tab.

The fastest way is a dedicated image color picker: drop in any JPG, PNG, WebP or SVG, click the pixel you care about, and you instantly get the value in every format at once — HEX, RGB, HSL, HSV and CMYK. It runs entirely in the browser, so the image never leaves your machine.

Picked pixel -> #2D7FF9
               rgb(45, 127, 249)
               hsl(216, 94%, 58%)
Enter fullscreen mode Exit fullscreen mode

Drop that HEX straight into your stylesheet and you're done for the common case:

.button {
  background: #2D7FF9;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

2. Convert it for modern CSS with OKLCH

HEX is fine, but modern CSS has a better tool for manipulating color: OKLCH. It's perceptually uniform, which means lightening, darkening or building a consistent scale actually looks right to the human eye — unlike nudging HSL, where equal steps look uneven.

Paste any value into a color converter and you'll get the OKLCH equivalent (plus RGBA, HWB, and the nearest CSS named color):

#2D7FF9 -> oklch(0.63 0.19 258)
Enter fullscreen mode Exit fullscreen mode

Now you can build a hover/active scale by adjusting a single channel — lightness — and trust that each step is visually even:

:root {
  --brand: oklch(0.63 0.19 258);
  --brand-hover: oklch(0.58 0.19 258);
  --brand-muted: oklch(0.85 0.06 258);
}

.button { background: var(--brand); }
.button:hover { background: var(--brand-hover); }
Enter fullscreen mode Exit fullscreen mode

Because OKLCH separates lightness from hue and chroma, you can also fix a whole palette's contrast by only touching the L value — no more eyeballing hex codes.

3. Check the contrast before you ship

An exact color is only useful if people can read the text on it. Run your foreground/background pair through a WCAG contrast checker — aim for at least 4.5:1 for body text (AA) and note that APCA is the more accurate, polarity-aware method coming with future WCAG.

For #FDF0D5 text on #003049:

Contrast ratio: 12.25  -> passes AA & AAA
APCA: Lc 94            -> great for body text
Enter fullscreen mode Exit fullscreen mode

Wrapping up

The whole loop — pick from image, convert to OKLCH, verify contrast — takes about thirty seconds and gets you color values you can actually trust. All three steps live in one free, no-signup toolkit at colorpicker.cx if you want them in one place.

Are you reaching for OKLCH in production yet, or waiting for wider tooling? Curious to hear in the comments.

Top comments (0)