From ui-color-palette
Build a full color palette from source colors. Uses get_full_palette to generate scales and themes, then previews the result visually. Use when the user wants to create a complete palette before auditing, exporting, or deploying it.
npx claudepluginhub a-ng-d/claude-ui-color-paletteThis skill uses the workspace's default tool permissions.
Use the **ui-color-palette** MCP tool `get_full_palette` to build a complete palette, then preview it visually.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Use the ui-color-palette MCP tool get_full_palette to build a complete palette, then preview it visually.
Code export is handled by ui-color-palette-generate-code. Design tool deployment is handled by ui-color-palette-figma, ui-color-palette-penpot, ui-color-palette-framer, and ui-color-palette-sketch.
Before asking any questions, check the conversation context for existing slots.
PaletteData is already in contextSend:
I already have a palette built in this session (Palette name — OKLCH — Material scale). Do you want to reuse it, adjust parameters and rebuild, or start from scratch?
Stop and wait. If the user chooses to reuse, skip all steps and go directly to the visual preview and the next-phase question.
PublishedPaletteConfig is already in contextThe user has loaded a published palette. Its configuration contains all the parameters needed for get_full_palette. Skip Step 0 entirely and go straight to Step 1.
Send:
I have the published palette “Name” loaded. Building the full shade scale now…
Map the PublishedPaletteConfig fields to the get_full_palette input:
PublishedPaletteConfig field | maps to |
|---|---|
name | base.name |
description | base.description |
preset | base.preset |
shift | base.shift |
are_source_colors_locked | base.areSourceColorsLocked |
colors | base.colors |
color_space | base.colorSpace |
algorithm_version | base.algorithmVersion |
themes | themes |
Call get_full_palette immediately with these mapped values.
SourceColors is already in contextThe source colors step is already done. At Step 0, skip question 2 (source colors) and display the existing colors for confirmation:
I already have these source colors:
primary— #3B82F6neutral— #6B7280I’ll use these for the palette. Do you want to keep them or change any?
Ask these questions before calling get_full_palette. Do not call the tool until all required answers are collected. Stop after each question if the user hasn’t answered it yet.
1. Palette name
What should this palette be called?
2. Source colors
List the colors to include. For each one, provide:
- A role name (e.g.
primary,neutral,accent,error)- A hex value (e.g.
#3B82F6)You can add as many colors as you like.
3. Color space
Which color space should be used to compute the shades?
- OKLCH — perceptually uniform, recommended for modern systems
- LCH — perceptually uniform, wider browser support
- OKLAB — perceptually uniform, no hue rotation
- HSL — classic HSL (not perceptually uniform)
- P3 — wide-gamut Display P3
4. Scale preset
Which stop structure should be used?
- Material — 50–1000, 10 stops
- Tailwind — 50–950, 11 stops
- Ant Design — 1–10, 10 stops
- Radix — 1–12, 12 stops
5. Themes
How many themes do you need?
- Light only
- Light + Dark
- Custom — describe the themes you want
| Parameter | Default |
|---|---|
| Algorithm version | v3 |
| Chroma shift | 100 (no change) |
| Hue shift | 0 (no rotation) |
| Source colors locked | false |
Once all required answers are collected, build the get_full_palette input and proceed to Step 1.
Tool: get_full_palette
| Parameter | Type | Required | Description |
|---|---|---|---|
base | object | Yes | BaseConfiguration — palette base settings |
themes | array | Yes | Array of ThemeConfiguration objects (light/dark modes) |
base (BaseConfiguration) fields| Field | Type | Description |
|---|---|---|
name | string | Palette name |
description | string | Palette description |
preset | object | PresetConfiguration — see below |
shift | object | ShiftConfiguration — see below |
areSourceColorsLocked | boolean | Whether source colors are pinned (default: false) |
colors | array | Array of ColorConfiguration objects |
colorSpace | string | One of: LCH, OKLCH, LAB, OKLAB, HSL, HSLUV, HSV, CMYK, RGB, HEX, P3 |
algorithmVersion | string | "v1", "v2", or "v3" |
PresetConfigurationControls the lightness scale distribution.
| Field | Type | Description |
|---|---|---|
id | string | Preset identifier (e.g. "MATERIAL", "TAILWIND", "CUSTOM_10_100") |
name | string | Display name |
stops | number[] | Scale stop labels (e.g. [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]) |
min | number | Minimum lightness (darkest stop), 0–100 |
max | number | Maximum lightness (lightest stop), 0–100 |
easing | string | Distribution curve: LINEAR, NONE, EASEIN_SINE, EASEOUT_SINE, EASEINOUT_SINE, EASEIN_QUAD, EASEOUT_QUAD, EASEINOUT_QUAD, EASEIN_CUBIC, EASEOUT_CUBIC, EASEINOUT_CUBIC |
Common presets:
| id | stops | min | max | easing |
|---|---|---|---|---|
MATERIAL | [50,100,200,300,400,500,600,700,800,900] | 24 | 96 | LINEAR |
TAILWIND | [50,100,200,300,400,500,600,700,800,900,950] | 16 | 96 | LINEAR |
ANT | [1,2,3,4,5,6,7,8,9,10] | 24 | 96 | LINEAR |
RADIX | [1,2,3,4,5,6,7,8,9,10,11,12] | 5 | 95 | LINEAR |
ShiftConfiguration| Field | Type | Description |
|---|---|---|
chroma | number | Global chroma multiplier — 100 = no change, <100 = desaturate, >100 = saturate |
hue | number | Global hue rotation in degrees — 0 = no shift |
ColorConfiguration (each entry in base.colors)| Field | Type | Description |
|---|---|---|
id | string | Auto-generated by the server — do not set |
name | string | Color name (e.g. "primary", "neutral") |
description | string | Color description |
rgb | { r, g, b } | RGB object, each value 0–1 (e.g. { r: 0.23, g: 0.51, b: 0.96 } for #3B82F6) |
hue | object | { shift: number, isLocked: boolean } — per-color hue shift (default: { shift: 0, isLocked: false }) |
chroma | object | { shift: number, isLocked: boolean } — per-color chroma shift (default: { shift: 100, isLocked: false }) |
alpha | object | { isEnabled: boolean, backgroundColor: string } — alpha blending (default: { isEnabled: false, backgroundColor: "#FFFFFF" }) |
ThemeConfiguration (each entry in themes)| Field | Type | Description |
|---|---|---|
id | string | Unique theme ID |
name | string | Theme name (e.g. "Light", "Dark") |
description | string | Theme description |
scale | Record<string, number> | Map of stop label → lightness value (0–100). Keys must match preset.stops. E.g. { "50": 96, "100": 88, "200": 80, ..., "900": 24 } |
paletteBackground | string | Background hex color (e.g. "#FFFFFF") |
visionSimulationMode | string | "NONE", "PROTANOMALY", "PROTANOPIA", "DEUTERANOMALY", "DEUTERANOPIA", "TRITANOMALY", "TRITANOPIA", "ACHROMATOMALY", "ACHROMATOPSIA" |
textColorsTheme | object | { lightColor: string, darkColor: string } — hex colors for text on dark/light backgrounds (default: { lightColor: "#FFFFFF", darkColor: "#000000" }) |
isEnabled | boolean | Whether the theme is active |
type | string | "default theme" or "custom theme" |
Returns: A PaletteData object containing name, description, themes (with full color scales), and type.
After generating a palette, do not assume the next step is code export. A palette is often easier to validate visually first.
At minimum, produce a compact visual preview using the generated shades:
shade.name and hextextColorsTheme is available, show the preferred text color (light or dark) on top of each swatchPrefer this structure for a quick visual audit:
| Theme | Color | Swatches |
|---|---|---|
| Light | primary | 50 100 200 300 400 500 600 700 800 900 |
And render the swatches conceptually like this:
Light / primary
[ 50 #F8FAFC ][ 100 #E2E8F0 ][ 200 #CBD5E1 ][ 300 #94A3B8 ]
[ 400 #64748B ][ 500 #475569 ][ 600 #334155 ][ 700 #1E293B ]
[ 800 #0F172A ][ 900 #020617 ]
The goal is not pixel-perfect rendering in chat, but a readable, visual summary of the generated palette.
If the user wants the palette generated inside a design document, prefer routing to design tools instead of only exporting code:
When the user mentions Figma, FigJam, Penpot, Sketch, design board, palette board, style tiles, or visual preview in a document, treat that as a design-generation request first, not a code-export request.
If direct write-back tooling is available for the target design tool, use it. Otherwise:
get_full_palettetheme.name, color.name, shade.name, shade.hex, and preferred text colorget_full_palette input{
"base": {
"name": "My Palette",
"description": "",
"preset": {
"id": "MATERIAL",
"name": "Material Design",
"stops": [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
"min": 24,
"max": 96,
"easing": "LINEAR"
},
"shift": { "chroma": 100, "hue": 0 },
"areSourceColorsLocked": false,
"colors": [
{
"id": "primary",
"name": "primary",
"description": "",
"rgb": { "r": 0.23, "g": 0.51, "b": 0.96 },
"hue": { "shift": 0, "isLocked": false },
"chroma": { "shift": 100, "isLocked": false },
"alpha": { "isEnabled": false, "backgroundColor": "#FFFFFF" }
}
],
"colorSpace": "OKLCH",
"algorithmVersion": "v3"
},
"themes": [
{
"id": "light",
"name": "Light",
"description": "",
"scale": { "50": 96, "100": 88, "200": 80, "300": 72, "400": 64, "500": 56, "600": 48, "700": 40, "800": 32, "900": 24 },
"paletteBackground": "#FFFFFF",
"visionSimulationMode": "NONE",
"textColorsTheme": { "lightColor": "#FFFFFF", "darkColor": "#000000" },
"isEnabled": true,
"type": "default theme"
}
]
}
get_full_palette with a BaseConfiguration and at least one ThemeConfiguration to generate the full palette with scales.PaletteData result. The response is a large JSON object with many color values — reading it wastes tokens.
Session state: Store the result as the PaletteData slot. All subsequent skills (generate-code, figma, penpot, framer, sketch, audit, manage) will reuse it without calling get_full_palette again.theme.namecolor.nameshade.nameshade.hextextColorsTheme or audit dataui-color-palette-figma, ui-color-palette-penpot, ui-color-palette-framer, or ui-color-palette-sketchui-color-palette-audit-palette to check contrast and accessibilityui-color-palette-manage-palettes to save it to the platformui-color-palette-generate-code$ARGUMENTS can be a color space or a description of the palette context.
/ui-color-palette:scale-palette oklch/ui-color-palette:scale-palette tailwind stops for my design system/ui-color-palette:scale-palette material dark and light themesPaletteData JSON. It contains dozens of color shades with multiple color-space values each. Pass it opaquely to downstream skills.theme.name, color.name, shade.name, and shade.hex, plus preferred text color when available.#3B82F6 → r: 59/255 = 0.23, g: 130/255 = 0.51, b: 246/255 = 0.96 → { r: 0.23, g: 0.51, b: 0.96 }.scale object, compute it from the preset: distribute lightness values between min (darkest) and max (lightest) across stops using the easing function. First stop → max, last stop → min.dtcg-tokens for interoperability or style-dictionary-v3 for Style Dictionary pipelines.tailwind-v4 over tailwind-v3 for new projects.OKLCH or P3 color spaces for wide-gamut displays.generate_code tool takes base and themes directly — no paletteData input. Pass the same base and themes objects used to call get_full_palette.ui-color-palette-generate-source-colors (generate colors first, then build here), ui-color-palette-audit-palette (check readability after building), ui-color-palette-generate-code (export as code), and ui-color-palette-manage-palettes (publish after building).palette-codegen — normalizes PaletteData and generates code/tokens; use after this skill when code export is neededpalette-transitioner — converts PaletteData into variableRows, tokenRows, styleRows, or swatchRows before routing to a platform workflow