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, and save controls.
• 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.

You can move between stages freely, but some stages unlock only after prerequisites are met.

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.
• Seed colors — Optionally 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.

• Color wheel — Drag color handles on an interactive color wheel to adjust hue positions visually.
• Harmony mode — Switch harmony modes to constrain or free your color relationships.
• Functional colors — The system automatically derives functional variants (lighter/darker tints) from your base colors. You can override any functional color manually.
• Color editing — Click any color to open a popover with precise HSL sliders, hex input, and role assignment.

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.
• 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.

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.

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.