Mac-first color capture. Production-ready color systems.

Choose The Right Color Workflow

PaletteWright has four Mac color workflows; choose the one that matches the job.

• Use Pick Screen Color when a sampled screen color should become part of the selected palette.
• Use Quick Pick when you only need one onscreen color copied immediately in your default format.
• Use Multi-Pick when you are collecting several colors from a screen, website, app, mockup, chart, or design file.
• Use Paste / Convert Color when the color already exists as text, such as a CSS variable, design token, hex value, RGB string, OKLCH value, or Display-P3 value.
• Use Current Preview everywhere; on Mac and iPad, open the Palette Preview window when you want live visual feedback while scrolling through Target, Import, Build, Validate, Handoff & Export, and Notes.
• Set the default copy format first in PaletteWright > Settings so Quick Pick, Multi-Pick, the menu-bar extra, and Use Default in the converter all produce the same team-ready output.

Quick Pick And Multi-Pick

The fastest Mac workflow is to sample a color and copy it immediately in the format you already chose.

• Before picking, choose PaletteWright > Settings > Default Quick Pick format. Use Hex or RGB for simple handoff, OKLCH or Display-P3 for modern CSS, SwiftUI for app code, CSS Variable for tokens, or Custom for team-specific syntax.
• For one color, use Tools > Quick Pick & Copy or Command Option P, click the screen color, and PaletteWright copies it immediately without changing the current palette.
• For a batch, use Tools > Start Multi-Pick & Copy, click each color you want, and watch the clipboard grow into a newline-separated list after every pick.
• Press Escape or cancel the sampler when the batch is complete; the final clipboard still contains every sampled color in order.
• Use Multi-Pick for pulling a small brand palette from a website, extracting UI states from an app, sampling chart colors, or matching colors from a design comp.
• The global Command Option P hotkey works even when PaletteWright is not the frontmost app, when enabled in Settings.
• A compact copied-color HUD confirms the sampled color, selected copy format, and exact copied value.
• Recent samples appear in the menu-bar extra, where you can recopy the latest color as the default format, Hex, RGB, OKLCH, Display-P3, SwiftUI, CSS Variable, or Custom.
• Quick Pick and Multi-Pick are unlimited on Free, so PaletteWright can be used as a serious Mac color picker before upgrading.

Paste / Convert Color

Use copied color text as a zero-friction conversion workflow.

• Open it with Tools > Paste / Convert Color or Command Option V; the window reads text from the pasteboard on open but also lets you edit or paste new input.
• Paste a single value or a larger snippet; PaletteWright scans for hex, RGB, RGBA, HSL, HSLA, HWB, Lab, LCH, OKLab, OKLCH, Display-P3, CSS variables, and token-like text.
• If several colors are found, choose the swatch you want from Found Colors; the preview updates before you copy.
• PaletteWright previews the parsed color and shows exact hex, RGB, and OKLCH values so you can verify the conversion before using it.
• Use Copy As to switch between built-in formats or Custom. Use Default when you want the same format configured for Quick Pick and Multi-Pick.
• Use this workflow when a colleague sends a token, a browser inspector shows a CSS value, or you need to translate OKLCH or Display-P3 into SwiftUI, CSS variable, or another team format.

Custom Copy Formats

Settings can turn Quick Pick into exactly the clipboard output your project expects.

• Open PaletteWright > Settings and start by selecting the default format you want Quick Pick and Multi-Pick to copy.
• Choose Custom, then pick an existing custom format or create one with New Format.
• Name is the label shown in menus and HUDs. Token name feeds {token} and {css-token}, so use the naming style your codebase expects.
• Templates support {hex}, {rgb}, {oklch}, {display-p3}, {swiftui}, {token}, {css-token}, {r}, {g}, {b}, {red}, {green}, and {blue}.
• The live preview shows the exact text Quick Pick, Multi-Pick, Paste / Convert Color, and the menu-bar extra will copy.
• Use custom formats for CSS custom properties, design-token snippets, Swift constants, documentation strings, or team-specific handoff syntax.
• Save Format stores the template. Use As Default makes it the default for future captures and conversions.

Pick Into The Current Palette

Use the native screen sampler when the color belongs in the selected palette, not just on the clipboard.

• Select a palette first, then select a stop if you want to replace that exact stop.
• Use Tools > Pick Screen Color or Command Shift P, sample the screen color, and PaletteWright writes it into the selected stop.
• If no stop is selected, PaletteWright appends a new stop; then use the position slider, Sort, or Distribute to place it.
• Use this after sampling brand colors with Quick Pick or Multi-Pick when you decide a color should become part of the palette you will validate and export.
• Every screen sample is stored in recent history for menu-bar copying later.

Current Preview And Preview Window

PaletteWright keeps the active palette visible while the detail panels scroll.

• The Current Preview strip stays pinned above the scrollable detail panels, so the gradient remains visible while you edit stops, generate harmonies, validate contrast, or configure exports.
• Click the pinned gradient to add a stop at the clicked position without scrolling back to Build: Stops.
• The pinned preview respects Exact LUT Preview, Step Markers, Dithering Preview, LUT metadata, and sRGB / Display-P3 selection.
• On Mac, open the standalone preview with Current Preview > Preview Window, View > Show Palette Preview, or Window > Show Palette Preview. On iPad, use Current Preview > Preview Window. On iPhone, keep working from the pinned Current Preview strip.
• The Palette Preview window updates with the active palette and shows the gradient, swatches, interface preview, and contrast summary in a separate non-modal window.
• On Mac, use View > Hide Palette Preview, Window > Hide Palette Preview, or the close button. On iPad, close the separate preview from the system window controls.

Menu-Bar Extra

The menu-bar extra keeps capture and copying available without reopening the main window.

• Use the PaletteWright menu-bar extra to Quick Pick, start Multi-Pick, open Paste / Convert Color, pick into the current palette, show the main window, open Settings, or open this guide.
• Copy the latest sample in the current default format, Hex, RGB, OKLCH, Display-P3, SwiftUI, CSS Variable, or Custom.
• Open recent colors from the menu-bar history and copy any stored sample in the format you need.
• Use Settings to show or hide the menu-bar extra and enable or disable the global hotkey.

Windows, Menus, And Navigation

• The main Mac window opens at a document-style size with a minimum size that keeps the sidebar and detail editor usable.
• Use Help > PaletteWright User Guide or the sidebar Info menu to open the guide in its own non-modal window.
• Keep the guide beside the main app while editing palettes, checking exports, or learning the workflow stages.
• Use File > New Palette, Import Palette File, Save Library Backup, and Reveal Palette Library for standard Mac library actions.
• Use the Palette menu for selected-palette actions such as Duplicate, Favorite, Delete, Restore, Add Stop, Sort, Distribute, Generate, Auto-Fix AA, and export commands.
• Use View > Jump to Workflow Stage or Command 0 through Command 6 to jump to Workflow, Target, Import, Build, Validate, Handoff & Export, and Notes.
• On Mac, use View to expand or collapse detail panels, toggle Exact LUT Preview, Step Markers, and Dithering Preview, and show or hide the Palette Preview window.
• Use Window > Show Palette Preview on Mac or Current Preview > Preview Window on iPad when you want a separate live preview next to the main app.
• Use Help > Launch Demo to reopen the bundled Glass Nebula compiler walkthrough.
• Mac sheets include visible Close buttons and support the Escape key.

Library And Files

• PaletteWright stores the palette library as an app-support JSON file with a backup preserved before replacement.
• Use the palette actions menu to save a portable JSON library backup.
• Use the palette actions menu to reveal the active app-support library file in Finder.
• Duplicate before experimental edits, restore eligible built-in palettes to their factory version, and use Undo Last Palette Change when you need to step back.
• Use Tools > Copy Current Export or Tools > Save Current Export when the Export panel is configured for the file you need.

Palette Browser

• Search by palette name, subtitle, note, or generation recipe.
• Filter by All, Built-In, Imported, or Custom.
• Use Sort to choose library order while search and filtering stay active.
• Leading swipe favorites a palette; trailing swipe duplicates, deletes, or restores eligible built-in palettes.
• The ellipsis toolbar menu offers New Palette, Restore Built-in Palettes, Duplicate Selected, Favorite, and Delete Selected commands.

Create, Favorite, Duplicate, Delete, And Restore

• Tap the plus button to create an Untitled Palette with four editable Display-P3 stops.
• Rename a palette directly in the large title field.
• Tap the star in the palette header to favorite; favorites rise to the top of the sidebar list.
• Duplicate before experimental edits to branch a custom copy without changing the original.
• Delete removes a palette from the library after confirmation.
• Restore Factory is enabled only when a built-in palette differs from its factory version.

Pinned Preview And Render Controls

• Current Preview stays pinned above the scrollable detail panels, so the active gradient remains visible while you edit stops, generate palettes, validate contrast, or configure exports.
• Click the pinned preview gradient to insert a stop at that position.
• Use Preview Window when you want a larger live preview beside the main app while you work through panels.
• LUT 512 / 1024 sets palette LUT metadata for compact ramps or smoother high-resolution handoff.
• sRGB / Display-P3 chooses the preview color space and export metadata.
• Exact LUT preview shows a stepped 64-sample diagnostic view instead of a continuous gradient.
• Step markers draw vertical guides at stop positions.
• Dithering preview adds a subtle dot overlay to test whether texture reduces visible banding.

Build: Stops

A stop is a color placed from 0% to 100% along the gradient.

• Use Add Stop or click the gradient canvas to insert a stop with the interpolated color at that location.
• Select a stop to reveal its controls: use the color picker for deliberate visual editing, the hex readout for exact values, and the position slider for placement along the ramp.
• Use the color picker when you are designing inside the palette. Use Pick Screen Color when you need to sample something visible elsewhere on screen.
• After editing a stop, review Current Preview, the Palette Preview window on Mac or iPad, and accessibility values before locking or generating.
• Lock important colors before running generation. Locked stops remain fixed.
• Trash removes a stop; PaletteWright keeps at least two stops so the palette remains valid.
• Sort orders stops from left to right, and slider edits are sorted after release.
• Distribute spaces the current stops evenly from 0% to 100% while preserving their visual order.

Build: Generate

The Generate panel rebuilds unlocked stops in perceptual space.

• Lock any colors that must remain unchanged.
• Choose a harmony and tap Generate Unlocked.
• Inspect Current Preview, the Palette Preview window on Mac or iPad, the accessibility panel, and the system audit afterward.
• Generation records a searchable recipe such as the harmony name and locked-stop count.

Import

• Choose the import path by where the color lives: photo for visual inspiration, file import for existing palette systems, website import for brand/theme extraction, screen capture for visible UI, and Paste / Convert Color for text values.
• Photo sampling supports Row, Column, and Stripe modes and creates a 12-stop Photo Gradient.
• Pick Screen Color samples any onscreen color into the selected stop or adds a new stop when none is selected.
• Quick Pick & Copy samples one onscreen color and immediately copies the default format without changing the palette.
• Multi-Pick & Copy captures several onscreen colors in one session and copies the collected values together.
• Paste / Convert Color turns copied CSS, token, or loose color text into any built-in or custom output format.
• Recent screen samples are available from the PaletteWright menu-bar extra for copying in multiple formats.
• File import accepts palette, token, CSS, CSV, GPL, ASE, JSON, and text files.
• Website import fetches readable HTML, scans inline styles, follows up to six linked stylesheets, ranks likely brand colors, and creates a gradient palette.
• Website color syntax includes hex, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH, and color(display-p3 ...).
• Free includes two website imports. Pro unlocks unlimited website imports.

Palette Preview Window

The standalone preview catches palettes that look good as swatches but fail in real compositions.

• Open it from Current Preview > Preview Window on Mac and iPad, or from View > Show Palette Preview and Window > Show Palette Preview on Mac. iPhone keeps this preview inline in the detail view.
• The window follows the active palette and updates live as you edit stops, color space, LUT controls, and preview toggles.
• The large gradient shows the same palette as a smooth ramp or exact LUT preview, depending on the active preview setting.
• The swatch strip lists each stop with hex and OKLCH values.
• The interface card uses the first stop as background, a nearby accent as action color, and the last stop as text.
• The contrast summary shows the first foreground/background pairs so obvious failures are visible while you work.
• If text or buttons feel weak, check semantic tokens and contrast before exporting.
• If the composition looks muddy, adjust stop lightness or generate again with locked anchor colors.

Developer Handoff

Developer Handoff is the Pro workflow for compiling a palette into theme variants, roles, component tokens, Figma Variables, framework exports, and production previews.

• Choose Light, Dark, or High Contrast.
• Review role token count, AA check coverage, and best pair metric.
• Use Auto-Fix AA if semantic pairs fail AA.
• Use Figma Handoff when the design team needs variables and modes.
• Inspect Theme Matrix, Component Preview Lab, Palette Diff, and token lists before exporting.

Figma Handoff

• Primitive variables are direct palette stops such as palette-50 and palette-500.
• Semantic variables are purpose-based roles such as background, foreground, surface, primary, warning, and danger.
• Component variables cover UI-specific roles such as button backgrounds, input focus borders, link foreground, and focus-ring outline.
• Figma Variables is an export/handoff payload for plugin or automation import, not live Figma sync.

Tokens And Theme Variants

• Primitive tokens are direct palette stops.
• Semantic tokens describe purpose, such as background, foreground, surface, primary, success, warning, and danger.
• Component tokens bind semantic roles to UI use cases such as button-primary-background, input-focus-border, and alert-warning-background.
• Theme variants compile Light, Dark, and High Contrast token matrices.

Role Presets

Role presets translate PaletteWright semantic roles into naming conventions expected by common UI systems.

• PaletteWright Native keeps the app's semantic role names.
• shadcn/ui maps to background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, and ring roles.
• Material maps to primary, on-primary, primary-container, secondary, tertiary, surface, outline, error, and on-error.
• Apple maps to systemBackground, label, tintColor, separator, systemFill, systemGreen, systemYellow, and systemRed.
• Charts maps to chart-background, chart-grid, chart-label, and chart-series colors.

Component Preview Lab And Palette Diff

• Component Preview Lab renders account cards, buttons, inputs, badges, navigation, progress, charts, modals, status lists, and code surfaces.
• Scan text readability, action hierarchy, focus colors, and status colors before shipping.
• Palette Diff compares primitive stop changes and semantic token changes against another palette.
• Large perceptual distance usually means a visible shift in lightness or color.

Export Formats

• Free exports include JSON, Mandelbrot Metal, and raw CSS variables.
• The Free export counter advances when you copy, save, or share one of those formats; Free includes 10 basic exports.
• Designer Handoff can save PNG palette previews on Free; Pro unlocks PDF palette cards, Adobe ASE swatches, and native Apple Color List files.
• Pro exports include unlimited exports, Modern CSS, Semantic CSS, Tailwind v4, shadcn/ui, SwiftUI, Swift Assets, Android XML, Compose, Flutter, DTCG design tokens, Figma Variables, Markdown audit reports, compile packages, CSV, and audit output.
• Open Export, choose a developer format or designer handoff format, then copy, save, or share it to your workflow.
• If the Free export counter reaches 10/10, use Upgrade for Unlimited Exports.

Compile Packages

• Compile packages include README.md, manifest.json, audit-report.md, preview notes, target-specific export files, DTCG tokens, and Style Dictionary JSON.
• Use compile packages when handing a palette to a developer, adding a color system to a repo, or archiving an implementation-ready theme.
• Compile package saving is a Pro workflow.

CLI / CI Audit

• The repository includes Tools/palettewright-cli.swift for command-line contrast auditing.
• On Mac, use Tools > CLI Utility to review common commands inside PaletteWright.
• On Mac, use Tools > Copy CLI Audit Command to copy a starter audit command to the pasteboard.
• Run swift Tools/palettewright-cli.swift audit path/to/tokens-or-css-file.css.
• The CLI reports unique colors, pair counts, AA/AAA coverage, weakest pair, and strongest pair.
• Use it as a CI gate by failing builds when exported files contain color pairs that do not meet AA contrast.