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.
Top comments (0)