See a website’s whole palette and type at once
Open any page in Chrome, open PikSpec and choose Grant access & analyse. Styles lists the colors and typography detected across the page: the palette with each color’s value, and the font families, sizes, weights and line heights in use. You see the whole system at once instead of hunting through one element at a time.
Check one element’s exact font and color
When you need a specific detail, switch to Inspect and select the element: a heading, a button, a card. PikSpec shows its layout, spacing, typography and appearance. All properties lets you search for any CSS property or value and copy the declarations you need straight into your own stylesheet.
Which font actually rendered?
A CSS font-family usually lists several fonts, and the browser uses the first one it can load. That is why reading the stylesheet alone can name a font the visitor never saw. PikSpec checks the font evidence on the rendered page, and can verify which face was actually used. Chrome may briefly show a debugging notice while it does this.
Knowing the rendered font, its weights and its tracking tells you whether you need a licensed font or can use a close free alternative.
From a list of colors to a usable palette
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, such as background, surface, text, border and action. That turns a pile of hex codes into a palette you can build with.
Take the colors and fonts into your project
Generate a token package to download the palette, font families and type scale together with spacing, radius and shadows. It comes as CSS custom properties, a Tailwind v4 theme, SCSS variables, JSON, and a DESIGN.md brief you can give to an AI coding tool.
Why not DevTools or an eyedropper?
An eyedropper samples pixels, so anti-aliasing, gradients and transparency give you a color that is close but not exact, and it cannot tell you anything about fonts. DevTools gives exact values, but only one element at a time, and it does not tell you which values repeat into a system. PikSpec reads the computed styles across the whole page and summarises them, while still letting you drill into a single element.
Use it on pages you are allowed to inspect
PikSpec works on normal web pages you open in Chrome. Chrome’s internal pages and the Chrome Web Store cannot be inspected. Finding out which colors and fonts a site uses does not give you rights to its brand, artwork or licensed fonts, so check the licence before reusing them.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.