Tools
Colour picker
A loupe over the real pixels that names the CSS colour and the token behind it.
Open the picker#
Press 3 or click Colour. A loupe follows the cursor, showing the real pixels of the page, so you see the anti-aliasing exactly as rendered. Esc goes back to Inspect.
| Keys | Action |
|---|---|
| + - | Zoom: 2×, 4×, 8×, 16× or 32× (8× to start; a pixel grid from 8×) |
| Arrows | Move the sample point one device pixel (10 with Shift) |
| F, Shift+F | Next or previous format |
| Click, Enter or C | Copy the CSS colour |
| Shift-click, Shift+Enter | Copy the rendered pixel |
What it tells you#
- The CSS colour behind the pixel: the background, border side, text colour or SVG fill that paints it. Pictures, video and canvas report the pixel.
- When the page shows it differently, and why: opacity, mix-blend-mode or a filter, on the element or an ancestor.
- The tokens that hold it: custom properties on
:rootwith exactly that colour.
Formats and history#
HEX, RGB, HSL, HSB, OKLCH, OKLAB and Display P3. Your format is remembered. While the picker is on, a tray beside the bar shows your last 8 picks; click a swatch to copy it again. Nitpix keeps your last 20.