Back to feed
Dev.to
Dev.to
7/15/2026
Turn any photo into a CSS color palette (image to HEX, RGB & OKLCH)

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

Short summary

A practical workflow for turning a reference photo into a production-ready CSS palette: sample anchor colors, expand into tints/shades, normalize to OKLCH for perceptual uniformity, and verify WCAG AA contrast. The author recommends 4-5 anchor colors and shows how OKLCH makes hover/active states a single-channel tweak. The article links to a free toolkit at colorpicker.cx that combines all four steps.

  • •Sample 4-5 anchor colors from a reference image using a client-side color picker
  • •Expand anchors into a full palette and convert to OKLCH for perceptually uniform tints/shades
  • •Verify text/background contrast at 4.5:1 (WCAG AA) before finalizing tokens

Generated with AI, which can make mistakes.

#ai-tools
Read full article at Dev.to

Is this a good recommendation for you?

Comments

Failed to load comments. Please try again.

Explore more

Why lightening a hex color in RGB gives you grey (and the HSL fix)
Dev.to
Palette quantization reduces colors without making images muddy
Dev.to
The original title is "Stop Hardcoding Hex #d9d9d9 In Your CSS"
Dev.to
The original title is: "Building a color replacer: why RGB matching fails on photos and how HSV fixes it"
Dev.to