Chrome extension

Collect the colors a website actually uses - from the code, not the screen - and open them as a Vesper Colors palette.

Chrome Extension

The real colors are
in the code.

Pick colors from any element or scan a whole page. Vesper Colors reads the site's computed CSS - never the rendered pixels - so every hex you collect is exactly what the stylesheet authored. Build the palette as you browse, then open it at vespercolors.com.

Install from Chrome Web Store Coming soon - in review Read the docs

v1.0.0 · Manifest V3 · What's new

Requires Google Chrome

Screen color pickers - including the browser's built-in eyedropper - sample rendered pixels. Those pixels pass through display color profiles, anti-aliasing, and layer compositing before they reach your eye, so the value a screen picker returns is usually not the value the developer wrote.

Vesper Colors reads getComputedStyle() instead. Every hex it collects is exactly what the site's CSS authored - the value that belongs in a brand palette, a client report, or a contrast check. The trade: colors inside raster images are out of scope, deliberately, because image pixels are not authored CSS values.

Pick from page

Hover to highlight any element, click to lock it. Its color roles - text, background, border, SVG fill, gradient stops - appear in the side panel with exact hex values. Click a role to collect it.

Scan the whole page

One click extracts every color on the page, merges duplicate spellings, and ranks the palette by how heavily each color is used. CSS variable token names like --brand-primary appear where they can be recovered.

One link out

Your collection persists as you browse a site. Label and reorder the colors, then copy or open a vespercolors.com palette link - ready for WCAG contrast checks, previews, and sharing.

Elements rarely have just one color. Locking an element lists each of its color roles separately, so you collect the color that is actually there - not a transparent background or an inherited value.

text The computed color of the element's text.
background The visible background fill. Fully transparent values are skipped, so you are never handed a useless rgba(0,0,0,0).
border / outline Border and outline colors, deduplicated across sides.
fill / stroke SVG fill and stroke colors, for icons and inline graphics.
gradient Each color stop parsed out of a background-image gradient, collected individually.

All extraction happens locally in your browser. Nothing about the pages you visit, the colors you pick, or how you use the extension is collected or transmitted - there is no server to send it to. Your collection lives in your browser's local extension storage. Read the privacy policy.

Landing on the Chrome Web Store soon.

The extension is in Chrome Web Store review. Read the documentation now - this page gets the install button the moment it clears.

Read the docs