Mac color tools: pick, convert, and check contrast

The most useful Mac color workflow has four steps: sample the color users actually see, copy the format the next tool expects, test the real foreground and background pair, then inspect the finished interface. You may need only Apple's built-in Digital Color Meter for step one.

I build TeenyApps, including TeenyColor and TeenyTool. My bias is toward small local utilities, but another app is useful only when it removes repeat work that the built-in meter leaves behind.

Which Mac color tool fits?

01Start with Digital Color Meter

Digital Color Meter ships with macOS and reads colors anywhere on the screen. Apple documents controls for the display format, aperture size, color space, and aperture lock. Choose View > Display Values to change an RGB-based format, then use Color > Copy Color as Text or Shift-Command-C to copy the reading.

Reduce the aperture when you need one pixel. A larger aperture averages every pixel inside it. For extended dynamic range content, Apple's guide also provides a native EDR display option; other color spaces clip those readings to standard dynamic range.

This is enough for a quick inspection. It also makes the source color space visible, which matters when a screen value does not match a design token or exported asset.

02Use a dedicated picker for repeat work

A dedicated picker earns its place when the same color needs to move through several steps. The TeenyColor system-wide picker guide covers the built-in route first, then the faster repeat workflow.

TeenyColor's local Swift source calls Apple's NSColorSampler, converts the result to sRGB, and copies the selected format to the Mac pasteboard. It supports nine formats, including hex, RGB, HSL, CSS rgba, SwiftUI Color, and UIColor. It also keeps history, lets you pin or rename colors, and exports text or JSON palettes.

Those features solve reuse. They do not turn a rendered pixel into the original token, recover a source image's embedded color data, or prove that an interface is accessible. Keep the rendered value and the source-of-truth value separate when they differ.

03Copy for the destination

Choose the output after you know where the value will land. Hex is compact for CSS and many design notes. CSS rgba includes alpha. SwiftUI Color and UIColor initializers remove manual channel conversion in Apple-platform code. HSL is useful when a developer plans to adjust lightness or saturation deliberately.

Do not translate a sampled screen color into several formats just because the tool can. Keep the original reading, record the color space, and copy the one format required by the destination. This avoids a handoff full of values with no owner or context.

04Check the color pair, not one swatch

Contrast belongs to a foreground and background pair. WCAG 2.2 Level AA sets a 4.5:1 minimum for normal text and 3:1 for large text. Level AAA uses 7:1 and 4.5:1. Incidental text and logotypes are exceptions, while meaningful non-text controls and graphical objects have separate 3:1 guidance.

The TeenyTool contrast-checker guide shows how to enter the actual hex pair and repeat the check for each state. The local Swift view accepts three- or six-digit hex colors, calculates relative luminance, reports the ratio, and shows AA and AAA results for normal and large text.

A passing number does not verify text over a gradient or image, alpha blending, color-only meaning, focus visibility, or every component state. Check the specified adjacent colors first, then inspect the rendered interface and test the rest of the experience.

05Keep private UI evidence local

Unreleased screens, client mockups, internal dashboards, and design tokens often contain more than a harmless color. A local meter, picker, or calculator can answer the first question without uploading that context to a web tool.

Move the result into the real system of record when the decision is ready: a named color asset, CSS custom property, design token, issue, or review note. The utility should shorten the check. It should not become the only record of the decision.

Mac color QA checklist

1. Open the exact light, dark, hover, focus, selected, disabled, or error state you need to review.
2. Read the rendered foreground and background colors, with the color space noted.
3. Compare the screen reading with the design token or source value.
4. Copy the format required by CSS, SwiftUI, UIKit, or the handoff note.
5. Check the specified foreground and background pair against the relevant WCAG threshold.
6. Inspect the finished interface for images, gradients, opacity, focus, and color-only meaning.

Common questions

What is the best built-in Mac color picker?

Apple's Digital Color Meter is the best built-in starting point for reading a screen color. It can change RGB display formats, choose a color space, adjust or lock the aperture, and copy the color as text with Shift-Command-C.

When is a dedicated Mac color picker useful?

A dedicated picker is useful when you sample repeatedly and need a global shortcut, automatic clipboard copy, several code formats, searchable history, pinned colors, or a small palette export. A one-off pixel reading usually does not need another app.

What contrast ratio should UI text meet?

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text, with exceptions for incidental and logo text. Meaningful non-text UI cues generally need 3:1 against adjacent colors.

Sources checked

• Apple Digital Color Meter User Guide for screen readings, RGB display formats, color spaces, aperture controls, EDR handling, and copy shortcuts.
• Apple NSColorSampler documentation for the native sampler used by TeenyColor.
• W3C WCAG 2.2 Contrast (Minimum) and Contrast (Enhanced) for text thresholds and exceptions.
• W3C Understanding Non-text Contrast for meaningful controls and graphical objects.
• TeenyColor and TeenyTool claims were checked against their current homepages and local Swift source for sampling, formats, history, palette export, hex parsing, and contrast calculation.