DEV Community: An Hoang Gia

Turn any photo into a CSS color palette (image to HEX, RGB & OKLCH)

An Hoang Gia — Wed, 15 Jul 2026 16:11:34 +0000

Designers hand you a mood photo — a sunset, a product shot, a piece of packaging — and say "use these colors." No hex codes, no tokens, just a picture. Here's a repeatable way to turn that image into a proper, production-ready CSS palette in a couple of minutes.

1. Pull the key colors out of the image

Start by sampling the colors that actually carry the image. The quickest route is an image color picker: drop in the photo, click the pixels you care about — a highlight, a mid-tone, a shadow, an accent — and copy each value. You'll get HEX, RGB, HSL, HSV and CMYK for every point, and because it runs client-side the image never leaves your browser.

Aim for four or five anchor colors — highlight #F4E3C1, mid-tone #C9784B, shadow #3A2A21, accent #2E6E8E.

2. Grow it into a full, balanced palette

Four hand-picked colors rarely make a complete UI palette — you need tints, shades and neutrals that sit together. Feed an anchor color into a palette generator to expand it into a cohesive scheme, then export the whole set as CSS custom properties.

3. Normalize everything to OKLCH so scales stay even

If you want tints and shades that step evenly, convert the anchors to OKLCH. Unlike HSL, OKLCH is perceptually uniform, so equal changes in lightness look equal. Paste any value into a color converter to get the OKLCH form: #c9784b becomes oklch(0.63 0.12 47). Now a hover or active state is a one-channel tweak — drop the lightness a touch and the hue stays put.

4. Check the pairings for contrast

A palette that looks great can still fail on readability. Before you lock it in, run your text/background pairs through a contrast checker and aim for at least 4.5:1 for body text (WCAG AA). OKLCH makes fixes easy — nudge only the lightness value until the pair passes, without shifting the hue.

Wrapping up

The loop — sample from the image, expand into a palette, normalize to OKLCH, verify contrast — turns a single reference photo into a documented, accessible set of CSS tokens. All four steps live in one free, no-signup toolkit at colorpicker.cx if you'd rather keep them in one tab.

What's your go-to for building palettes from a reference image? Curious how others approach it.

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

An Hoang Gia — Wed, 15 Jul 2026 12:45:06 +0000

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%)

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

.button {
  background: #2D7FF9;
  color: #fff;
}

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)

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); }

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

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.

How to Get the Exact HEX Color From Any Image (3 Free Ways)

An Hoang Gia — Fri, 10 Jul 2026 21:01:37 +0000

Every frontend dev hits this at some point: a designer sends you a screenshot, a client sends a logo, and you need the exact HEX value of a color in it. Here are three quick ways to grab it — no Photoshop required.

1. Browser DevTools (built-in eyedropper)

Chrome and Edge have a hidden eyedropper inside DevTools:

Open DevTools (F12) and inspect any element with a color or background-color property
Click the little color swatch in the Styles panel
The eyedropper is now active — hover anywhere on the page and click

Limitation: it only works on colors inside the current page. If your color lives in a JPG someone sent you in Slack, you first have to open that image in a tab.

2. The EyeDropper API (do it in your own code)

Modern Chromium browsers ship a native EyeDropper API, so you can build color picking into your own tools:

const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
console.log(sRGBHex); // e.g. "#7c3aed"

It returns the color of any pixel on the screen — even outside the browser window. Support is still Chromium-only (no Firefox/Safari as of 2026), so feature-detect with if ('EyeDropper' in window).

3. Upload the image to a color picker tool

When you need more than one pixel — say, the full palette of a brand image — an image color picker is faster. I built ColorTools exactly for this workflow:

Open colorpicker.cx/color-picker
Drop in any image (it never leaves your browser — processing is client-side)
Click any pixel to get HEX, RGB and HSL, or let it extract the dominant palette automatically

From there you can jump straight into the contrast checker to verify WCAG AA/AAA compliance of the colors you just picked — handy when the "brand color" a client insists on is a 2.1:1 disaster on white.

Bonus: converting between formats

Got the HEX but need HSL for your CSS custom properties? The conversion is one formula, but if you do it rarely, a converter is quicker than remembering the math.

What's your workflow for grabbing colors — DevTools, a desktop app, or something else? Curious what everyone uses in 2026.