Colour picker
A loupe over the real pixels that names the CSS colour and the token behind it.
Open the picker#
The picker reads colour from the real pixels on screen, so it works on photos, gradients and canvas as well as plain CSS.
- 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.
- Point at a pixel. Use + and - to zoom in.
- Click to copy the CSS colour, or Shift-click to copy the rendered pixel. 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. Press F to change format; 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. Nitpique keeps your last 20.
To see every colour on the page at once, see Page design → Colours.
Questions
Which colour formats can I copy?
HEX, RGB, HSL, HSB, OKLCH, OKLAB and Display P3. Press F to change format; your choice is remembered.
What is the difference between click and Shift-click?
Click copies the CSS colour behind the pixel; Shift-click copies the rendered pixel.
Can it tell me which token a colour comes from?
Yes. It lists the custom properties on :root that hold exactly that colour.