We've all written this at some point:

css.hero-section {

background-color: #3a7bd5; /* close enough? */

}

Close enough. The two most dangerous words in frontend work.

You were matching a color from a reference image. You eyeballed it. You shipped it. The client came back saying "that blue looks off." You know they're right but you don't know why.

The fix is simple — and most devs don't know it exists.

The Actual Problem

When you're handed a design reference as an image — a logo PNG, a screenshot, a mood board JPEG — extracting exact colors from it is surprisingly annoying.

Your options are usually:

Open it in Photoshop/Figma and use the eyedropper (requires the app, takes time)

Google "color picker from image" and get some sketchy website

Squint and guess

None of these are good.…