Colours and images

These cards are in the Design tab. Hover a row to outline its element on the page, and click it to select it, which fills the Element tab.

Colours#

Colours and images is one card: the page's palette as a strip, then its pictures as a gallery. The strip shows every colour the page paints with, the most used first: text, backgrounds, borders and SVG fills and strokes, as the browser resolved them. Colours that are never drawn are left out.

• Each colour in the strip is as wide as it is used, so the page's balance shows at a glance. The three most used are named under it; All N colours lists every one.
• Hover a colour to outline where it is used and see, in a tooltip, what it paints and how many elements use it.
• Click it to copy its hex value (eight digits when it is translucent).
• Colours inside web components and same site frames are read too; a colour's tooltip says how many of its elements are inside them.
• Export › Design system, beside the title, saves the page's design system as a zip: its colours by role, type (families, sizes, weights, line heights), spacing and corner radii, as W3C design tokens (design-tokens.json, for Figma, Tokens Studio or Style Dictionary), CSS variables, a Tailwind 4 @theme, the page's own CSS variables, and a README showing it all. Spacing and radii used only once are left out as one-offs.

Named colours#

All N colours also lists the palette named, as a palette would name it: the nearest hue and a shade from 50 to 950 (Blue 600, Gray 100), or White and Black. Colours so close that one was very likely typed for the other are folded into the one used most, with +1 beside its name and the others in its tooltip. Copy as CSS copies the named colours as custom properties, with what each folds in as a comment.

Images#

The gallery under the palette shows the pictures the page shows: images, CSS background images (on ::before and ::after too), masks, pictures set with content: url(), video posters, canvases and inline SVG. A file used in several places is listed once, with how many.

• Hover a picture to outline its element and see, in a tooltip, its name, the size it is drawn at and, when it differs, the size of the file.
• Click it to select the element.
• An image with a srcset or inside a picture says how many sources it has; its tooltip lists every file it can be drawn from, with its width, density, type or media, and marks the one shown.
• A canvas is shown as it is drawn now. One drawn with a picture from another site cannot be read, so it is left out.
• The copy button in a picture's corner copies its address, or an inline SVG's markup.
• Export › All images, beside the title, saves every one in a zip, inline SVGs as .svg files. Pictures from other sites need Nitpique allowed there, which the browser asks once for all of them; any that still cannot be fetched are listed in not-downloaded.txt.