PixelPick Support

Getting started

PixelPick lives in the menu bar. Use it to sample on-screen colours, refine them in the editor, and copy them in the output format you need. If something is unclear or not working as expected, contact us below.

• Start picking: click the left half of the menu bar icon; open the PixelPick menu and click the eyedropper icon in the header; or use your custom Show Picker shortcut (set in Settings).
• Open the main panel: click the right half of the menu bar icon to show recent colours, the editor, and the copy-format menu.
• Settings and help: open the sliders menu in the panel header for Colour Formats, Settings, Help (this page), and Quit.

PixelPick needs Screen Recording permission to capture pixels from your display. macOS prompts you when you first pick; you can also enable PixelPick under System Settings → Privacy & Security → Screen Recording.

Colour picker

The loupe follows the pointer and shows a magnified view with a grid. The colour under the centre square is sampled and previewed using your current copy format.

• Move: move the mouse; the loupe tracks the pointer.
• Nudge: arrow keys move one pixel at a time; hold Shift to move ten pixels at a time.
• Copy: click or press Return to copy the sampled colour and close the picker (unless Command is held).
• Pick again: hold Command (⌘) while clicking or pressing Return to copy without closing, so you can sample multiple colours in one session.
• Cancel: press Escape to dismiss the picker without copying.
• Zoom: scroll to change loupe magnification.
• Size: hold Option (⌥) while scrolling to change loupe diameter.

Default loupe size and zoom can be changed under Settings → Picker. Capture colour space (Display P3, sRGB, Adobe RGB, or display default) is also configured there, along with Open at Login.

Main panel and colour editor

Recent picks appear as swatches along the top of the panel. Click a swatch to load it into the editor; right-click a swatch for Copy.

• Open the editor: tap the rainbow bar at the bottom of the colour area to expand or collapse the editor.
• Colour models: switch between RGB, HSL, HSB, and CMYK from the format menu in the editor toolbar. RGB and CMYK use a hue/saturation plane; HSL and HSB use the colour wheel.
• Sliders: adjust components numerically, including alpha on each model.
• Hex and name: hex and descriptive name fields stay in sync with the colour. The name field supports search and suggestions when editing.
• Copy from editor: use the clipboard control on the right of the toolbar to copy the edited colour in the selected output format.
• Output format: use the large format control at the bottom of the panel to choose what gets copied when you pick or copy from the editor. Built-in formats cover CSS, SwiftUI, AppKit, UIKit, Android, Java, OpenGL, .NET, and more.

WCAG contrast checker

With the editor open, choose Contrast in the toolbar to open a floating contrast panel. Set foreground and background colours (from recent swatches or by editing either role in the panel), read the contrast ratio, and see WCAG AA/AAA guidance. Close the panel or collapse the editor to hide it.

Custom copy formats

PixelPick is free to try; unlocking Colour Formats (in-app purchase) lets you edit hex in the colour editor and create or edit custom copy and preview templates.

Open Colour Formats... from the panel menu (or Settings → Colour Formats). Select a built-in format to inspect it, or click Create Format for a new template. Each format has separate Copy and Preview strings. Use the Variables list to drag tokens into the template fields; undo and redo are supported in the editor.

Templates combine plain text with placeholders in double curly brackets, for example {{red.float.multiply(255).rounded(0)}}. Study the built-in formats for examples.

Colour attributes

• red, green, blue, alpha
• cyan, magenta, yellow, black (device CMYK)
• rgbCyan, rgbMagenta, rgbYellow, rgbBlack (RGB-derived CMYK)
• hue, hsbSaturation, hsbBrightness
• hslSaturation, hslLightness
• whiteness, blackness (HWB-related components)
• name (exact descriptive name), nearestName (closest match)

Formatters

Chain a formatter after a colour attribute (before numeric or string modifiers):

• .hex — e.g. {{blue.hex}}
• .float — e.g. {{red.float}}

Numeric modifiers

Apply to .float values (and chain further modifiers):

• .multiply(n)
• .divide(n)
• .rounded(n)

Example: {{red.float.multiply(255).rounded(0)}}

String modifiers

Apply to name or nearestName:

• .lowercased(), .uppercased()
• .dashed(), .underscored()
• .camelcased(), .normalised()

Example: {{nearestName.normalised().camelcased()}}