Inside Tintpick: Any Pixel, Already on the Clipboard

Tintpick is a small Mac utility from 1dot1 that puts a colour picker in the menu bar. Press Control-Option-C, click any pixel on screen, and the colour is on the clipboard in whichever format the work in front of you needs. Around that one action sit a history of recent picks, named palettes that export straight into a stylesheet, and a contrast checker that says whether two colours are readable together. This teardown walks through it screen by screen and explains the decisions behind each part.

The problem it answers is a common one. A colour sits in a screenshot, a web page, a slide or a mock-up, and it needs to end up in code. The usual route is a screenshot, an image editor, an eyedropper, a hex value copied by hand, and then a conversion because the project wants SwiftUI or HSL rather than hex. Each step is small, but together they break concentration. Tintpick folds the whole route into a shortcut and a click.

Any pixel, any app

A pick starts from anywhere. Control-Option-C works in any app, and the Pick button in the panel does the same thing for anyone who prefers the mouse. A round magnifying loupe follows the pointer, enlarging the pixels around it so that a one-pixel border or a thin line of text can be hit precisely, and the colour value is shown underneath as it moves.

Clicking picks. The colour is copied at once in the default format, and the panel opens with a short confirmation such as Copied #E4572E, so there is never any doubt about what is now on the clipboard. Escape cancels, and a cancelled pick copies nothing, which keeps whatever was on the clipboard before intact.

The reason the colour is copied before anything else happens is that copying is almost always the next step. Opening a window and asking which format to use would add a decision to every single pick. Instead the decision is made once, as a setting, and every pick after that is a single click.

No screenshot, no permission

Many colour pickers on the Mac ask for Screen Recording permission, because they work by capturing the whole screen and reading a pixel from the capture. That permission is broad: it allows an app to see everything on the display. Tintpick does not ask for it, and does not need Accessibility access either.

Picking goes through the colour sampler built into macOS. The system draws the loupe, the user clicks, and the app receives only the single colour that was chosen. Tintpick never takes a screenshot and never sees the rest of the screen. It is a narrower way to do the job, and it means there is nothing to approve in System Settings beyond the one-time signature step on first launch.

There is one honest limit that follows from this. The sampler reads what the display shows, converted to sRGB. Colours from wide-gamut images or colour-managed apps can shift by a step or two from the value stored in a design file. For exact brand values the file remains the source; for everything seen on screen, the pick is what the eye sees.

Copied the way the code wants it

The Colour tab lists the current colour in nine formats: HEX, RGB, HSL, HSB, SwiftUI, NSColor, UIColor, CSS rgb() and CSS hsl(). Clicking any row copies that format, and a tick marks the one copied last. The SwiftUI, NSColor and UIColor rows are written as ready-to-paste initialisers with components between 0 and 1, so a colour can go straight into Swift code without a conversion step.

One format is the default, shown in bold and labelled default. That is the format every pick copies. It is chosen from the ellipsis menu under Default Format, and the same menu has Uppercase HEX, which switches between #3A7BD5 and #3a7bd5 to match the style of an existing codebase.

The list is deliberately flat. There are no nested panels for web, Apple platforms or design tools; every format is one row, visible at once, and one click away. Someone working on a SwiftUI app sets SwiftUI as the default and rarely looks at the list again, while someone moving between a stylesheet and an app can copy either without changing a setting.

The last 30, one click away

Every pick is kept under History, newest first, up to the last 30. Picking a colour that is already there moves it to the front rather than adding a duplicate, so the grid stays a list of distinct colours in the order they were last needed.

Clicking a swatch makes it the current colour and copies it again in the default format. Right-clicking opens a short menu: copy its HEX, add it to a palette, use it as the text colour or the background in the contrast checker, or remove it from History. Clear empties the whole grid, asks first, and leaves palettes untouched.

Thirty is a working memory rather than an archive. It holds a session of picks from a web page or a set of mock-ups without turning into a long scroll, and anything worth keeping for longer belongs in a palette.

A palette for every project

Palettes live on their own tab. New Palette creates one, and Add Current drops the current colour into it, so a palette is built by picking a colour and then pressing one button. A palette holds each colour once, so pressing Add Current twice does no harm. Clicking a colour in a palette copies it; right-clicking removes it.

The ellipsis on each palette offers Rename, Export as JSON, Export as CSS Variables, Export as Text and Delete Palette. CSS Variables writes a :root block with one custom property per colour, named after the palette, such as --brand-refresh-1: #233D4D;, ready to paste into a stylesheet. JSON suits a build script or a design token file, and plain text suits a message or a note.

The export formats are the reason palettes exist at all. A set of colours gathered from a reference is only useful once it reaches the project, and writing a file in the shape the project already uses removes the retyping in between.

Readable, or not

The Contrast tab takes two colours, Text and Background, and reports the contrast ratio between them. Each can be set by typing a HEX value, by pressing Use Current, or by right-clicking any swatch in History or a palette. The arrows button swaps them.

A preview shows large and normal text in the chosen colours, so the result can be judged by eye as well as by number. Underneath, four verdicts follow the WCAG guidelines: AA needs 4.5:1 for normal text and 3:1 for large text, and AAA needs 7:1 and 4.5:1. White on the blue in the screenshot reaches 4.22:1, which passes AA for large text and fails the other three.

Keeping the checker next to the picker is a practical choice. Contrast problems are usually found while choosing colours, not afterwards, and a check that is one right-click away gets used far more often than one that lives in a separate tool or a website.

Built in black and white

Like the other 1dot1 Mac apps, Tintpick is greyscale in light and dark mode. The icon is a black eyedropper with a single drop on a white tile, and the menu bar glyph repeats it at a smaller size. In an app about colour, the absence of colour in the interface is deliberate: the only colours on screen are the ones being picked, compared and collected, so nothing in the chrome competes with them.

Values are set in a monospaced typeface so that digits line up down the format list and a hex code can be read at a glance. History and palettes are kept in one small file at ~/Library/Application Support/Tintpick/library.json. There is no account, nothing is uploaded, and the app never connects to the internet. It is a universal app for Apple silicon and Intel Macs and runs on macOS 13 Ventura or later.

How to use it, feature by feature

The same instructions are in the short guide inside the download.

Installing and permissions

1. Unzip the download and drag Tintpick.app into the Applications folder, then open it. An eyedropper icon appears in the menu bar.
2. Tintpick is signed and notarized by Apple, so it opens with a normal double-click.
3. No Screen Recording or Accessibility permission is needed.

Picking a colour

1. Press Control-Option-C in any app, or click the menu bar icon and press Pick.
2. Move the pointer; the loupe shows the pixels around it and the colour value underneath.
3. Click to pick, or press Escape to cancel without picking.
4. The colour is copied in the default format and the panel confirms it, for example Copied #3A7BD5.

Copying in other formats

1. Open the Colour tab to see HEX, RGB, HSL, HSB, SwiftUI, NSColor, UIColor, CSS rgb() and CSS hsl().
2. Click any row to copy that format. A tick shows which one was copied last.
3. Change the default from the ellipsis menu, Default Format.
4. Use Uppercase HEX in the same menu to switch between #3A7BD5 and #3a7bd5.

History

1. The last 30 picks appear under History, newest first. Picking a colour already there moves it to the front.
2. Click a swatch to make it current and copy it again in the default format.
3. Right-click a swatch to copy its HEX, add it to a palette, use it in the contrast checker, or remove it.
4. Press Clear to empty History. It asks first, and palettes are not affected.

Palettes

1. Open the Palettes tab and press New Palette.
2. Pick a colour, then press Add Current on a palette. Each colour is held once.
3. Click a colour in a palette to copy it; right-click it to remove it.
4. Use the ellipsis on a palette to Rename, Export as JSON, Export as CSS Variables, Export as Text, or Delete Palette.

Contrast checker

1. Open the Contrast tab.
2. Set Text and Background by typing a HEX value, pressing Use Current, or right-clicking a swatch in History or a palette.
3. Press the arrows button to swap the two colours.
4. Read the ratio under the preview and the four verdicts: AA at 4.5:1 normal and 3:1 large, AAA at 7:1 normal and 4.5:1 large.

Settings

1. Open the ellipsis menu at the top of the panel.
2. Default Format chooses what a pick copies; Uppercase HEX chooses the letter case.
3. Global Hotkey turns Control-Option-C on or off; Open at Login keeps Tintpick in the menu bar from startup.
4. Right-click the menu bar icon for Pick Colour, Copy the current colour, Open, About and Quit.

If something does not happen

1. Control-Option-C does nothing: another app already owns that combination, and the ellipsis menu says so next to Global Hotkey. Use the Pick button instead.
2. The picked colour looks slightly different from the design file: the sampler reads what the display shows, converted to sRGB, so wide-gamut or colour-managed colours can shift by a step or two.
3. Nothing was copied: a pick cancelled with Escape copies nothing. Pick again, or click a swatch in History.
4. Export does nothing: the save dialog may be behind another window. Use Mission Control to bring it forward.
5. The panel closed during a palette export: that is expected. The save dialog takes over, and the file is written when Save is pressed.

Get Tintpick

Tintpick is available on 1dot1 as a single download, with the guide, a README and the licence inside the zip.

Get It Now