Vesper Colors for Chrome

Vesper Colors for Chrome collects the colors a website actually uses and assembles them into a shareable Vesper Colors palette link. It lives in a Chrome side panel: pick colors from individual elements, scan a whole page, build your palette, and open it at vespercolors.com.

The extension is coming soon to the Chrome Web Store - see the Vesper Colors for Chrome page for an overview. This page will link to the listing when it is live.

It reads the code, not the screen

Screen color pickers - including the browser's built-in eyedropper - sample rendered pixels. Those pixels are distorted by display color profiles, anti-aliasing, and layer compositing, so the value they return is not the value the site's developer wrote. Vesper Colors reads the page's computed CSS styles instead. Every hex it collects is exactly what the stylesheet authored, which is what belongs in a brand or client palette.

The trade for that accuracy: colors inside raster images and logos are out of scope. Image pixels are not authored CSS values, so the extension cannot extract them - deliberately.

Opening the panel

Click the Vesper Colors icon in the Chrome toolbar to open the side panel. Everything lives there: the capture actions, scan results, your collected palette, and the palette link.

Pick from page

Pick mode captures colors from a specific element:

  1. Click Pick from page. Hovering the page now outlines the element under your cursor.
  2. Click an element to lock it. The click is intercepted, so links and buttons do not fire while picking.
  3. The locked element's color roles appear in the panel - text, background, border, outline, SVG fill and stroke, and gradient stops - each with its exact hex.
  4. Click a role to add that color to your palette. Click another element to re-lock, or press Esc to stop.

Roles are listed separately because an element's own background often computes to transparent while the visible fill comes from an ancestor or a gradient. You pick the color that is actually there.

Scan whole page

One click walks every element's computed styles, normalizes each color to hex, merges duplicates (#fff, white, and rgb(255,255,255) collapse to one swatch), and ranks the results by how many times each color occurs. Brand backgrounds and body text typically float to the top. Where a color traces back to a same-origin CSS custom property, the token name (like --brand-primary) is shown next to the swatch. Tick the colors you want and add them to your palette.

Your palette

Collected colors render as full-width bands, each showing a large hex (click to copy), an editable label, and an automatic color name - the same Name That Color dataset the web palette viewer uses. Reorder and remove controls appear on hover; the band order sets the swatch order in the final palette.

The collection is stored locally in your browser and persists as you navigate, so you can gather colors from several pages of the same site into one palette. Clear it any time with clear all.

The palette link

Once you have collected at least one color, the footer shows a live vespercolors.com link carrying your colors and labels. Copy puts it on the clipboard; Open loads it in a new tab, ready for WCAG contrast checking, previews, and sharing. Palettes cap at 24 colors.

Privacy

All extraction happens locally in your browser. The extension does not collect or transmit anything - not the pages you visit, not the colors you pick, not usage data. See the privacy policy.

Known limitations