From palette-explorer
This skill should be used when the user asks to "explore color palettes", "create a color palette", "design a color system", "choose brand colors", "pick colors for my app", "build a color scheme", "generate color options", "brand colors for my SaaS", or wants to visually explore, compare, and select color palette options for a product, brand, or application. It can also be invoked when the user mentions "OKLCH palette", "palette exploration", or "color exploration" specifically. The workflow guides from brand discovery through OKLCH palette generation, interactive comparison via a Palette Explorer HTML tool, iterative tuning, and production-ready CSS export.
How this skill is triggered — by the user, by Claude, or both
Slash command
/palette-explorer:palette-explorerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
Gather context to inform palette direction. Ask one question per response — never batch multiple questions:
Consult references/saas-color-landscape.md to identify overused and underexplored color territories.
Establish the color architecture before generating palettes:
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:
assets/palette-explorer-template.htmlCONFIG object (see CONFIG Schema) containing all palettes and brand context/* ═══ INJECT CONFIG HERE ═══ */ placeholder in the template with the generated CONFIGpalette-exploration.html)Design guidelines for palette generation:
After the user reviews the Palette Explorer:
Repeat until the user narrows to 1-3 finalists. Common iteration patterns:
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.
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 */ ],
};
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 |
The Palette Explorer template (assets/palette-explorer-template.html) provides:
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub lockstride/claude-marketplace --plugin palette-explorer