Palette Editor (The Perfect Journey)

The palette editor is PerfectPalette's core experience. It guides you through 10 stages to build a polished, production-ready color palette.

Overview

The editor has three areas:

• Left sidebar — Stage navigation, undo/redo, save, and Palette exports (CSS, tokens, images and reports). The Design System section ends with an Export row, which is the design.md route.
• Center workspace — The active stage's content and controls.
• Right panel — Your docked palette, color metrics, and the AI assistant.

Each stage shows a status indicator:

• Available — Ready to work on.
• Complete (checkmark) — All checks pass.
• Warning (triangle) — Issues found that you should address.
• Locked — Requires earlier stages to be completed first.

The start screen offers three ways in: Help me plan (the Plan stage), I have colors in mind (the Seed stage), and Skip planning — open the editor, which goes straight to Colors. Plan and Seed are alternatives, so the sidebar shows only the one you took; Change path at the top of the sidebar returns to the start screen and brings both back.

You can move between stages freely, but some stages unlock only after prerequisites are met. Every stage from Colors through Review also ends with a footer for moving on. When the next stage is open to you it is a Continue button naming that stage, so you can work straight through without using the sidebar; from Review, Continue: Intent opens the design system for the palette you have built. When the next stage belongs to a plan you are not on, the footer instead says which plan unlocks it and offers to start a free trial (or to upgrade, if you have subscribed before), alongside Save palette — or Sign up to save if you are not signed in.

If you left a draft unfinished within the last day, the workspace reopens it at the stage you were on — colors, brief, harmony, scales, roles, gradients and the stages you had already visited included — whether you were signed in (the draft lives in your account) or not (it lives in this browser). An older draft is not reopened automatically: when you're signed in, the start screen shows a Resume card for your most recent one, and clicking it picks up exactly where you left off. Saving a palette shows a confirmation toast and files it under My Designs.

Stage 1: Plan

Set the creative direction for your palette before generating it.

Options you can configure:

• Target medium — Website, App, Physical, or Other.
• Industry — Describe the domain (e.g., "healthcare", "fintech").
• Personality traits — Select traits like Trustworthy, Bold, Playful, Premium, Calm, etc.
• Color temperature — Warm, Neutral, or Cool.
• Saturation — Control overall color intensity.
• Color count — How many colors to generate (default: 6).
• Harmony mode — Free, Smart, Monochromatic, Complementary, Analogous, Triadic, Square Tetrad, Rectangular Tetrad, Split Complementary, Compound, or Shades.
• Starting colors (optional) — Lock in specific hex values that must appear in the palette.
• Hue avoidance — Exclude specific hue families (Red, Orange, Yellow, Green, Blue, Purple, Pink, Brown).
• Accessibility goal — None, AA (4.5:1 contrast), or AAA (7:1 contrast).

Click Generate to create a palette from your brief, or skip to the Colors stage to build one manually.

Stage 2: Colors

Build and refine your base palette.

• Palette strip — Each swatch shows its name, hex, HSL readout and role. Beneath them are Edit (precise HSL sliders and hex input), Delete, and a More menu (⋯) holding lock, tints and shades, regenerate, and move left / right. A locked color shows a lock badge on its swatch.
• Harmony mode — The Harmony selector in the palette strip's header is the one place the mode changes. The Color Wheel card and the Harmony stage show the current mode as a label; clicking it opens the strip and focuses the selector.
• Color wheel — Drag color handles on an interactive color wheel to adjust hue positions visually. The card opens closed on your first visit; open it from its header, and it stays open on later visits.
• Palette adjustment — Nine sliders (hue, saturation, lightness, temperature, tone, energy, material, vibrance, era) shift every color at once, with a preview beside the current palette. Like the wheel, the card opens closed on a first visit and remembers being opened; Reset and Apply changes appear in its header while it is open.
• Functional colors — The system automatically derives link, status, and feedback colors from your base colors; you can override any of them. Like the wheel and the adjustment sliders, the card opens closed on a first visit and remembers being opened.
• Color System Score — In the right panel, this card shows one line — the scores appear once your palette has scales — until the Scales stage has run, then its ten subscores.

Stage 3: Harmony

Evaluate how well your colors work together.

• View harmony analysis results for your chosen harmony mode.
• Colors that don't fit the harmony model are flagged with specific issues:
  • Off-harmony — Hue doesn't match the expected relationship.
  • Too vibrant / Under-saturated — Saturation is outside the expected range.
  • Too dark / Too light — Lightness is unbalanced.
  • Low contrast — Colors are too similar to each other.
• Switch between harmony modes to find the best fit for your palette.

Stage 4: Contrast

Check WCAG contrast ratios between every color pairing.

• Contrast matrix — Shows all foreground/background combinations with their contrast ratios.
• WCAG goal — Set your target to None, AA (4.5:1), or AAA (7:1).
• Approve pairings — Mark specific color pairings as approved for use. At least 4 approved pairings are recommended.
• Auto-fix — Apply suggested lightness adjustments to improve failing pairings. Choose "safe" fixes (minimal changes) or "all" fixes.
• Smart suggest — Let PerfectPalette suggest which pairings to approve based on your goal.
• Reset — Clear all approvals and start over.

Stage 5: Accessibility

Simulate how your palette appears to people with color vision deficiency (CVD).

• CVD simulation — See your palette as it appears to people with:
  • Protanopia (red-blind)
  • Deuteranopia (green-blind)
  • Tritanopia (blue-blind)
  • Achromatopsia (total color blindness)
  • And other CVD types
• Findings — View specific accessibility issues found, such as color confusion between pairs.
• Auto-fix — Apply suggested adjustments to improve distinguishability.
• Acknowledge — If you've reviewed the findings and accept the tradeoffs, acknowledge the results to mark this stage complete.
• Mitigation tips — Best practices like using icons and labels alongside color, not relying on color alone.

Stage 6: Scales

Generate stepped color scales from your base colors for use as design tokens.

• Each scale produces steps from 50 (lightest) to 900 (darkest) using perceptually uniform OKLCH color space.
• Scales are generated from your palette's base colors automatically.
• Add scales — Add semantic scales for Success, Warning, Danger, Info, or additional accent scales.
• Remove scales — Remove any scale you don't need.
• Lightness across steps is guaranteed to be monotonic (each step is darker than the previous).

Stage 7: Roles

Map your scale steps to design system roles — the semantic tokens your UI will actually use.

Five role groups:

• Each role references a specific scale + step (e.g., neutral.100).
• Auto-assign — Let PerfectPalette map roles automatically based on your scales.
• Manual override — Click any role to pick a different scale and step.
• Reset — Return to auto-assigned mappings.

Stage 8: Preview

See your palette applied to realistic UI mockups.

• Landing page — A marketing-style page using your palette.
• Dashboard — An application-style interface using your palette.
• Brand — Logo mark, app icon, business card, social banner and letterhead, carrying the brand name you gave in Plan (or "Your brand" if you did not give one).
• Light / Dark toggle — Switch between light and dark mode previews. If you've defined dark mode colors, the preview uses those; otherwise, it derives a dark variant automatically.

Stage 9: Review

Get a comprehensive analysis of your palette's quality.

• Health score — An overall score reflecting harmony, contrast, accessibility, and completeness.
• Score breakdown — Individual scores for each quality dimension.
• Issues list — Specific problems found, with severity levels and links to the relevant stage to fix them.
• Psychology insights — What emotions and associations your color choices may evoke.
• Theory insights — Color theory analysis of your palette's relationships.
• Pairing insights — Suggested color combinations and their visual impact.
• Palette name suggestion — An auto-generated name based on your palette's character.
• Similar palettes — Curated palettes from the Explore collection that resemble yours.

Stage 10: Export

Download your palette in multiple formats. Core code and token formats (CSS, JSON, SCSS, Tailwind, W3C Design Tokens) and image swatches (PNG, SVG) are available on the Free plan, subject to your monthly export quota. Design-tool, mobile, and PDF report formats require Plus; design.md export requires Pro.

Design & Dev Tokens

• CSS Tokens (.css) — Custom properties for web projects.
• JSON Tokens (.json) — Universal token format.
• SCSS Tokens (.scss) — Sass variables with maps.
• Tailwind Colors (.js) — Extend your Tailwind CSS config.

Design Tools

• Figma Tokens (.json) — Import into the Figma variables plugin.
• Adobe ASE (.ase) — Adobe Swatch Exchange format.
• Office Theme (.thmx) — Microsoft Office theme colors.
• Procreate (.swatches) — Procreate swatch palette.
• GIMP Palette (.gpl) — GIMP and Inkscape compatible.

Brand & Documentation

• Canva Brand Kit (.json) — Import into Canva.
• Health Report (PDF or Markdown) — Accessibility and contrast analysis.
• Brand Guide (PDF or Markdown) — Color usage guidelines.
• Review Report (PDF or Markdown) — Psychology and theory analysis.
• Conformance Report (PDF or Markdown) — An audit-ready WCAG color-contrast report.

About the Conformance Report

This is the export to attach to an accessibility audit, a VPAT, or a procurement questionnaire. It lists every color combination you approved, its measured contrast ratio, and a verdict for normal text, large text, and non-text UI components — each against the threshold WCAG actually defines for that context.

A few things it deliberately does:

• It reports no AAA verdict for non-text contrast, because WCAG defines none. A UI pair at 12:1 is reported as AA, which is the highest level the standard offers for non-text. Anything claiming AAA there would be asserting a conformance level that does not exist.
• It assesses against the goal stored on your palette, and says so. If no goal was set, it states that AA was assumed rather than presenting it as your choice.
• It states what it did not assess. Color contrast is one part of WCAG, and conformance is a property of a rendered page rather than of a palette. The report says this in its limitations section so that nobody reading it draws a broader conclusion than the evidence supports.
• It exports even when your palette fails. A report that stated the failures is more useful than no report, and exports are never blocked by validation.

Regenerating the report for an unchanged palette produces an identical document, apart from the date — so a reviewer can reproduce exactly what you filed.

Other

• Share link — Copy a URL to share your palette with anyone.
• Download all — Download every export as a single package.
• Dark mode variants — When dark mode colors are defined, exports include both light and dark tokens.

Undo & Redo

Use the Undo and Redo buttons in the left sidebar to step backward and forward through your editing history. Related changes (like dragging a color) are grouped together so a single undo reverts the full action.