Chrome extension
Read the colors a website actually uses - from the code, not the screen - check their contrast where they sit, and open them as a Vesper Colors palette.
Chrome Extension
The real colors are
in the code.
Pick colors from any element, scan a whole page, or check the contrast of every piece of text on it. Vesper Colors reads the site's computed CSS - never the rendered pixels - so every hex you collect is exactly what the stylesheet authored, and every ratio is measured on the values the developer wrote. Build the palette as you browse, then open it at vespercolors.com.
v1.2.7 · Manifest V3 · What's new
Requires Google ChromeWhy code, not screen
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.
Contrast, in place
Most contrast tools make you supply a pair. In a browser the pair is already there - the text color, the color behind it, and the font metrics that decide which threshold applies are all in the page. So Vesper Colors does not ask. Lock an element and the ratio is simply there.
That matters most for the case tools usually get wrong. An element's own background is normally transparent, with the visible color coming from an ancestor - sometimes through several semi-transparent layers. Vesper Colors walks up the tree and composites them, so the ratio is measured against the color that is really behind the text. Semi-transparent text is composited too: text set in rgba(0,0,0,0.5) on white measures 3.98:1, not the 21:1 you get by ignoring the alpha.
The right threshold
The extension reads the element's font size and weight, so it knows whether WCAG's large-text exception applies and marks the two levels that actually govern that text. A 3:1 pass on 14px body copy is not something you can misread here.
Check the whole page
One action measures every piece of text on the page against its real backdrop and lists the failures worst-first - grouped, so a page with 400 identical rows reports one finding. Show me scrolls to an offending element and highlights it.
Compare and cross-check
Put any two colors side by side, or view every pair in your palette at once as a grid where each cell is drawn in the pair it reports. Any pair opens straight into the web contrast checker.
Because this runs on the live page rather than on fetched stylesheets, it sees what is actually on screen: styles applied by JavaScript, the theme currently in use, and pages you have to be signed in to reach. Ratios and badge names match Vesper Colors for Mac and the web checker exactly - the same contrast module runs in all three.
How it works
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.
What a pick surfaces
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.
color of the element's text.
rgba(0,0,0,0).
background-color can give you when it computes to transparent.
background-image gradient, collected individually.
Private by design
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.