From ui-color-palette
Generate source colors to seed a palette. Supports three modes — extract dominant colors from an image, generate from a natural language prompt, or derive harmonies from a base color. Output is a set of ColorConfiguration objects ready to pass to ui-color-palette-scale-palette.
npx claudepluginhub a-ng-d/claude-ui-color-paletteThis skill uses the workspace's default tool permissions.
Use the **ui-color-palette** MCP tools to produce source colors before building a full palette.
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 tools to produce source colors before building a full palette.
The output of this skill is a set of ColorConfiguration objects (role name + hex) ready to be passed to ui-color-palette-scale-palette.
Before asking anything, check whether a SourceColors slot is already populated in the conversation context.
If SourceColors exists, send:
I already have these source colors from earlier in this session:
primary— #3B82F6neutral— #6B7280Do you want to reuse them, add more colors, or start fresh?
Stop and wait for the reply. Only proceed to source mode selection if the user chooses to start fresh or add more.
If the mode is not already clear from context, send:
How do you want to generate source colors?
- Image — extract dominant colors from a photo or logo (requires a public image URL)
- Prompt — describe the mood, brand, or context in plain language
- Harmony — derive a color set from a single base color using color theory
Stop and wait for the user's answer before proceeding.
Tool: extract_dominant_colors
| Parameter | Type | Required | Description |
|---|---|---|---|
imageUrl | string | Yes | Public URL of a JPEG or PNG image |
colorCount | number | No | Number of dominant colors to extract (default: 5) |
maxIterations | number | No | Max iterations for k-means clustering |
tolerance | number | No | Convergence tolerance |
skipTransparent | boolean | No | Skip transparent pixels (default: true) |
If the user hasn't provided a URL, send:
Please share a public URL to the image (JPEG or PNG).
How many dominant colors do you want to extract? (default: 5)
extract_dominant_colorsCall the tool with the URL and parameters. The tool returns colors as hex and/or RGB (0–255 per channel).
Present the extracted colors as swatches (hex + a small color preview if possible).
Then send:
Here are the extracted colors. Assign a role name to each one you want to keep — for example
primary,neutral,accent,error. Remove any colors you don't want in the palette.
Convert each kept color to a ColorConfiguration object:
id = omit — the server generates it automatically via uid()name = the role name the user providedrgb = divide each 0–255 channel by 255 → { r: R/255, g: G/255, b: B/255 }hue: { shift: 0, isLocked: false }, chroma: { shift: 100, isLocked: false }, alpha: { isEnabled: false, backgroundColor: "#FFFFFF" }Tool: generate_colors_from_prompt
| Parameter | Type | Required | Description |
|---|---|---|---|
prompt | string | Yes | Natural language description of the desired palette |
If not already provided, send:
Describe the palette you have in mind. You can mention a mood, a brand, a context, or specific colors. Example: "a calm fintech app with deep blues and warm neutrals"
generate_colors_from_promptCall the tool with the prompt string. The tool uses AI (Mistral) to return a set of colors.
Present the generated colors as swatches. Then send:
Here are the suggested colors. Assign a role to each one you want to keep — for example
primary,neutral,accent,error. Feel free to adjust or discard any.
Convert each kept color to a ColorConfiguration object using the same mapping as Step A5.
Tool: create_color_harmony
| Parameter | Type | Required | Description |
|---|---|---|---|
baseColor | array | Yes | An RGB Channel tuple: [r, g, b] — values 0–255 |
type | enum | No | ALL, COMPLEMENTARY, ANALOGOUS, TRIADIC, TETRADIC, SQUARE, COMPOUND (default: ALL) |
analogousSpread | number | No | Spread angle in degrees for analogous harmonies (default: 30) |
returnFormat | enum | No | rgb, hex, or both (default: both) |
If not already provided, send:
What is your base color? Provide a hex value (e.g.
#3B82F6).
Convert the hex to an RGB Channel tuple:
[r, g, b] with values 0–255#3B82F6 → [59, 130, 246]Send:
Which harmony type do you want?
- Complementary — opposite on the color wheel (2 colors)
- Compound — base + two colors adjacent to its complement (3 colors)
- Analogous — neighboring hues (3 colors)
- Triadic — evenly spaced by 120° (3 colors)
- Tetradic — two complementary pairs (4 colors)
- Square — four evenly spaced hues (4 colors)
- All — return all harmony types at once
create_color_harmonyCall the tool with the Channel object, selected type, and returnFormat: "both".
Present the harmony colors as swatches, grouped by harmony type if ALL was selected.
Then send:
Here are the harmony colors. Pick the ones you want and assign a role name to each — for example
primary,secondary,accent.
Convert each kept color to a ColorConfiguration object using the same mapping as Step A5.
Once role names are confirmed, present the final source color set as a readable list:
Source colors ready:
primary #3B82F6
neutral #6B7280
accent #F59E0B
Session state: Store this result as the SourceColors slot. It will be reused automatically by ui-color-palette-scale-palette — the user will not need to re-enter the colors.
Then hand off to ui-color-palette-scale-palette to build the full palette.
baseColor): Parse hex → [r, g, b] with values 0–255. E.g. #3B82F6 → [59, 130, 246].#3B82F6 → r: 59/255 ≈ 0.231, g: 130/255 ≈ 0.510, b: 246/255 ≈ 0.965.$ARGUMENTS can specify the source mode directly:
/ui-color-palette:generate-source-colors image — jump straight to image URL prompt/ui-color-palette:generate-source-colors prompt warm sunset palette — use the rest as the prompt/ui-color-palette:generate-source-colors harmony #3B82F6 — use the hex as the base color