Palette Explorer

Palette Explorer

Generate and explore OKLCH color palettes through an interactive HTML-based tool. The workflow moves from brand discovery through palette generation, visual comparison, interactive tuning, and final selection — producing production-ready CSS variables.

The explorer template lives at assets/palette-explorer-template.html and is hydrated with a CONFIG object generated during the workflow. If a frontend-design skill is available in the environment, invoke it before generating the HTML for enhanced aesthetic guidance — but it is not required.

Workflow Phases

Phase 1: Brand Discovery

Gather context to inform palette direction. Ask one question per response — never batch multiple questions:

• Brand qualities — What 3-5 adjectives describe the brand? (e.g., trustworthy, joyful, approachable)
• Industry and audience — What sector? Who uses the product?
• Existing colors — Any current palette to reference or depart from?
• Emotional register — What should the product feel like to use?
• Competitive landscape — Any colors to avoid because competitors own them?
• Semantic colors — What framework provides error/warning/success colors? (Nuxt UI, Tailwind, Material, custom)

Consult references/saas-color-landscape.md to identify overused and underexplored color territories.

Phase 2: Constraint Definition

Establish the color architecture before generating palettes:

1. Semantic safe zone — Define hue ranges reserved for status communication (error, warning, success). Consult references/oklch-color-theory.md for standard safe zone boundaries.
2. Hue exclusions — Identify hues to avoid (competitor colors, semantic collisions, client preferences).
3. Palette structure — Confirm the 4-color system: Primary (identity), Secondary (supporting), Accent A (decorative dark/vivid), Accent B (decorative light/subtle).
4. Scale curves — Use the standard 11-shade OKLCH curves unless the project has custom requirements.

Phase 3: Palette Generation

Generate 8-12 initial palettes covering diverse hue territory within the safe zone. For each palette, define:

{ id, name, sub, group, ph, pn, sh, sn,
  aa:{h,n,l,c}, ab:{h,n,l,c},
  rel, det, rat }

See Palette Data Format for the full schema.

To create the Palette Explorer:

1. Read the template from assets/palette-explorer-template.html
2. Generate a CONFIG object (see CONFIG Schema) containing all palettes and brand context
3. Replace the /* ═══ INJECT CONFIG HERE ═══ */ placeholder in the template with the generated CONFIG
4. Write the hydrated HTML to the project directory (e.g., palette-exploration.html)
5. Open in browser for the user to review

Design guidelines for palette generation:

• Ensure ≥18° minimum pairwise hue gap between all 4 colors in each palette
• Target ≥30° P/S gap (Twilight-level separation preferred)
• Maintain ≥40° distance from the nearest semantic color hue (absolute minimum is ≥15° per color theory reference, but ≥40° is the generation target for comfortable safety)
• Vary accent strategies: vivid+ghost, jewel+luminous, symmetric bracket, high-chroma+muted
• Include at least 2-3 palettes with near-monochromatic P/S relationships and 2-3 with wide gaps
• Consult references/oklch-color-theory.md for color harmony approaches

Phase 4: Iteration

After the user reviews the Palette Explorer:

1. Capture feedback — Which palettes resonate? What patterns emerge from their selections?
2. Analyze preferences — Extract primary hue range, P/S gap preference, accent style preference
3. Generate tuned variants — Create 4-6 new palettes that refine the preferred direction
4. Regenerate the explorer — Update CONFIG with both kept and new palettes, rewrite the HTML file

Repeat until the user narrows to 1-3 finalists. Common iteration patterns:

• Widening P/S separation while keeping primary character
• Adjusting accent lightness/chroma for more or less visual weight
• Increasing distance from semantic colors
• Exploring warm-territory accents for uniqueness

Phase 5: Selection & Export

Once a palette is selected, output production-ready values:

/* Template — replace values with selected palette */
--brand-hue: [primary hue];
--brand-hue-secondary: [secondary hue];
--brand-hue-accent-a: [accent A hue];
--brand-hue-accent-b: [accent B hue];
--color-accent-a: oklch([Aa.l] [Aa.c] var(--brand-hue-accent-a));
--color-accent-b: oklch([Ab.l] [Ab.c] var(--brand-hue-accent-b));

Concrete example (Apex palette):

--brand-hue: 236;
--brand-hue-secondary: 190;
--brand-hue-accent-a: 258;
--brand-hue-accent-b: 213;
--color-accent-a: oklch(0.50 0.20 var(--brand-hue-accent-a));
--color-accent-b: oklch(0.80 0.14 var(--brand-hue-accent-b));

/* Full resolved values:
   Primary 500: oklch(0.65 0.145 236)
   Secondary 500: oklch(0.68 0.155 190)
   Accent A: oklch(0.50 0.20 258)
   Accent B: oklch(0.80 0.14 213)
*/

Also provide the full OKLCH values for each color slot and any implementation notes specific to the project's framework.

CONFIG Schema

The CONFIG object controls all parametric content in the Palette Explorer:

const CONFIG = {
  brand: 'Brand Name',
  title: 'Palette Explorations',
  heroDesc: 'Description of this exploration round...',
  groups: [
    { label: 'Group Name (N)', key: 'groupKey' },
  ],
  legendItems: [
    { text: 'Label', color: 'oklch(...)' },
  ],
  semantic: {
    error:   { color: 'oklch(L C H)', label: 'Error',   sub: 'source · H:N' },
    warning: { color: 'oklch(L C H)', label: 'Warning', sub: 'source · H:N' },
    success: { color: 'oklch(L C H)', label: 'Success', sub: 'source · H:N' },
    neutral: { color: 'oklch(L C H)', label: 'Neutral', sub: 'source · H:N' },
  },
  mockup: {
    cardTitle: 'Decision Title',
    cardDesc: 'Brief card description for the in-situ preview.',
    stats: [
      { v: '4.8', l: 'Score' },
      { v: '12', l: 'Criteria' },
      { v: '89%', l: 'Progress' },
    ],
    toastMessage: 'Action completed — details here',
  },
  palettes: [ /* Array of palette objects */ ],
};

Palette Data Format

Each palette in CONFIG.palettes:

Field	Type	Description
id	string	URL-safe identifier (e.g., 'twilight-t')
name	string	Display name
sub	string	Subtitle / description
group	string	Must match a key in CONFIG.groups
ph	number	Primary hue (0-360)
pn	string	Primary color name
sh	number	Secondary hue
sn	string	Secondary color name
aa	object	Accent A: { h, n, l, c } (hue, name, lightness, chroma)
ab	object	Accent B: { h, n, l, c }
rel	string	Color relationship label
det	string	Technical detail string (gaps, distances)
rat	string	Rationale paragraph
isTuned	boolean?	Show "TUNED" tag
isFurther	boolean?	Show "FURTHER" tag
isCurrent	boolean?	Show "CURRENT" tag

Template Features

The Palette Explorer template (assets/palette-explorer-template.html) provides:

• Hero swatches — Large primary (80px) + secondary (68px) swatches, always visible
• Accent row — Accent A + Accent B swatches with OKLCH values and gradient
• Collapsible details — Shade scales, semantic context comparison, and full in-situ UI preview (collapsed by default)
• In-situ mockup — Mini app with sidebar, toolbar, card, stats, semantic badges, toast, gradients
• Semantic context — Fixed semantic colors displayed alongside palette colors for contrast checking
• Compare mode — Select up to 8 palettes via checkboxes, view side-by-side in overlay
• Interactive tuner — Click any palette name to open a new-window tuner with OKLCH gradient strips, auto-align, live preview, and copy-to-clipboard
• Dark/light toggle — Evaluate palettes against both backgrounds

Additional Resources

References

• references/oklch-color-theory.md — OKLCH color space, hue-variable architecture, semantic safe zones, harmony relationships, scale curve definitions
• references/workflow-guide.md — Detailed phase-by-phase instructions, iteration patterns, feedback analysis techniques
• references/saas-color-landscape.md — Overused vs. underexplored SaaS color territories, competitive analysis framework

Examples

• examples/sample-config.js — A minimal but complete CONFIG object with 2 palettes demonstrating all required fields, proper types, and realistic values. Use as a structural pattern when generating CONFIG objects.

Assets

• assets/palette-explorer-template.html — The parametric Palette Explorer HTML template. Read this file, inject the CONFIG object at the marked placeholder, and write the hydrated result.