The whole palette, not one pixel
Most color picker extensions are eyedroppers: you click a pixel and get its color. PikSpec reads the colors a website actually uses from the rendered page, so you get the whole palette at once with exact values, and you can still click any element to get its color.
Why an eyedropper gets colors wrong
An eyedropper samples pixels. Text edges are anti-aliased, buttons have gradients, and overlays are semi-transparent, so the pixel you click is often close to the real color but not the same. PikSpec reads the computed CSS value instead, so the hex you copy is the one the designer chose.
Colors grouped by what they do
A page can use dozens of slightly different colors. PikSpec groups them into primary, secondary, accent and neutral ramps and identifies what each is used for: background, surface, text, border and action, plus success, warning and error colors when the page has them. That turns a pile of hex codes into a palette you can build with.
How to get a website’s colors
1. Open the website in Chrome, open PikSpec from the toolbar and choose Grant access & analyse.
2. Open Styles to see the palette, grouped by role, with each color’s value.
3. Click any element in Inspect to see its exact text, background and border colors, or export the palette as CSS variables, a Tailwind theme, SCSS or JSON.
Use the palette in your project
Generate a token package to download the palette together with the type scale, spacing, radius and shadows. The DESIGN.md in the package describes how each color is used, which helps AI coding tools like Claude Code, Cursor and v0 apply it properly instead of guessing.
Free to use
Reading a page’s colors and inspecting elements are unlimited and free. Token exports come with a free allowance each month, and one-time credit packs add more.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.