Export a color palette on Mac from picked screen colors
A palette export is useful only when the colors have names, roles, and context. Pick from the rendered UI, clean up the list, then export the values your teammate can actually use.
Yes, you can export a color palette on Mac from colors you picked on screen. The better workflow is to sample the rendered state, rename each swatch by role, pin the important colors, remove accidental samples, then export as plain text or JSON.
Do not treat a sampled palette as the design system. Treat it as evidence. It says what a screen, screenshot, prototype, or app state actually rendered at the time you checked it.
Disclosure: I build teenycolor. This guide uses TeenyColor because its source includes local color history, custom names, pinned colors, and palette export. Apple's Digital Color Meter is still a good built-in picker for one-off color inspection.
Quick answer
| Step | What to do | Why it matters |
|---|---|---|
| 1. Pick from the rendered UI | Sample the actual app, web page, screenshot, or prototype state. | The palette matches the screen being reviewed. |
| 2. Rename by role | Use names like button fill, focus ring, card border, or muted label. | Teammates can tell why each color exists. |
| 3. Pin the keepers | Pin the final colors and leave throwaway samples unpinned. | Cleanup will not remove the colors you meant to keep. |
| 4. Export deliberately | Use text for handoff notes or JSON when the receiver needs structured values. | The export matches the next tool instead of creating cleanup work. |
01Pick colors from the real state
Palette export starts before the export button. Open the UI state you are reviewing and pick the color from the rendered screen. If the source is a screenshot, open it at actual size when pixels matter.
TeenyColor uses the native macOS color sampler and converts picked colors to sRGB before formatting. It also copies the selected format to the pasteboard immediately, so a quick palette pass can still support code, design notes, or bug reports.
If your only job is to inspect one value, Apple's Digital Color Meter can show and copy the color under the pointer. Use TeenyColor when the job needs history, names, pinned picks, or export.
02Name colors by role, not mood
Names like blue, nice orange, or final green do not survive a handoff. Use role names instead: primary button fill, primary button label, focus ring, selected row, warning background, muted text, chart line, card border.
The local TeenyColor model stores an optional name with each picked color. The export code includes that name in text exports and carries it into JSON when the name is not empty.
This is also where you catch duplicates. If two samples are both primary button fill, keep the one from the actual state you plan to hand off and remove the accidental value.
03Use pins for the palette, history for the mess
Picking colors is messy. You will sample edges, hover states, old screenshots, and values that looked important for ten seconds. That is normal. Do not export the whole mess.
TeenyColor keeps local history, lets you pin favorites, and keeps pinned colors at the top. The homepage describes configurable history limits of 20, 50, or 100 unpinned colors. Pinned colors do not count toward that cleanup limit.
For palette work, pin the colors that belong in the handoff and leave experiments unpinned. The related guide on Mac color picker history goes deeper on keeping repeated samples useful.
04Choose text or JSON based on the next stop
TeenyColor's source exposes two export shapes. Text export writes one color per line using the currently selected format, and includes the color name before the value when a name exists. JSON export writes each color with hex, RGB, HSL, and optional name fields.
Use text when the next stop is a design note, QA issue, pull request comment, or short handoff doc. Use JSON when the next person needs structured values, wants to diff the palette, or plans to transform it in another tool.
If the receiver needs a specific code format first, read copy color codes on Mac. The palette is stronger when each value already matches the next tool.
05Add accessibility context before sending
A palette export does not prove accessibility by itself. It only lists colors. Before a handoff, pair key foreground and background colors, then check contrast for the actual state.
TeenyColor shows WCAG contrast ratios against white and black for every picked color. That is a fast first pass. If the real background is a card, image, gradient, disabled state, or tinted surface, check the actual foreground/background pair. The companion guide to WCAG contrast ratios on Mac explains the AA and AAA thresholds.
The TeenyApps hub for this cluster is the Mac UI color accessibility checklist. Use it when the palette is part of a review, not just a collection of nice colors.
Export checklist
- Open the screen, screenshot, or prototype state you are documenting.
- Pick each important color from the rendered state.
- Rename colors by role and state.
- Pin final colors, then remove obvious mistakes and duplicates.
- Choose text for simple handoff notes or JSON for structured review.
- Include source context: screen name, mode, state, date, and whether the value came from render or token.
- Check the key foreground/background pairs before the palette becomes a recommendation.
Sources checked
- TeenyColor feature claims were checked against the TeenyColor homepage and local Swift source for picked-color names, pinned colors, history, text export, JSON export, and contrast badges.
- Apple Support: Digital Color Meter User Guide for Mac.
- W3C WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum).
- TeenyApps Mac UI color accessibility checklist for the connected color handoff and contrast workflow.
FAQ
Can you export a color palette from picked Mac colors?
Yes. TeenyColor can export picked colors as text in the selected color format or as JSON with hex, RGB, HSL, and optional names.
Should a sampled palette replace a design system?
No. A sampled palette is evidence from a rendered state. Use it for QA and handoff notes, then reconcile it with the actual design-system tokens.
What should you name colors before export?
Name colors by role and state, such as primary button fill, card border, disabled label, focus ring, warning background, or chart line.
Turn picked colors into a usable handoff.
teenycolor keeps color picking, history, pinned swatches, names, contrast badges, and palette export local on your Mac.