Generate color palette

Skill alvinindra/figma-mcp-rust/skills/generate-color-palette

Generate a 9-step primitive color scale plus semantic aliases from brand colors and create them as Figma variables with figma-mcp-rust. Use when the user asks for a color palette, color system, neutral scale, or light/dark color tokens from a brand color.From its SKILL.md

Install

npx -y skills add alvinindra/figma-mcp-rust --skill generate-color-palette

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

23 stars23 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.9 KB, as published. Nobody here has run it

Generate Color Palette

Given one or more brand colors, generate a full design-system color palette with a primitive scale and semantic aliases, then create them as Figma variables.

Input

Ask the user for:

Primary brand color (hex), required
Secondary/accent color (hex), optional
Whether to include neutral/gray scale, default yes
Whether to generate dark mode, default yes

Color Scale Algorithm

For each brand color, generate a 9-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) by varying lightness in HSL space:

50: lightest tint (~95% lightness)
100: ~90% lightness
200: ~80% lightness
300: ~70% lightness
400: ~60% lightness
500: base color (the input hex)
600: ~45% lightness
700: ~35% lightness
800: ~25% lightness
900: darkest shade (~15% lightness)

For neutrals: use the primary hue but desaturate to 5-10% saturation.

Show the full color table to the user for review before creating anything.

Semantic Aliases

After the primitive scale, create semantic tokens that reference primitives:

Light mode:

Color/Background/Default: Neutral/50
Color/Background/Subtle: Neutral/100
Color/Text/Default: Neutral/900
Color/Text/Subtle: Neutral/600
Color/Text/Disabled: Neutral/400
Color/Primary/Default: Primary/500
Color/Primary/Hover: Primary/600
Color/Primary/Active: Primary/700
Color/Primary/Subtle: Primary/100
Color/Border/Default: Neutral/200
Color/Border/Focus: Primary/500

Dark mode (add a "Dark" mode to the same collection):

Color/Background/Default: Neutral/900
Color/Background/Subtle: Neutral/800
Color/Text/Default: Neutral/50
Color/Text/Subtle: Neutral/300
Color/Primary/Default: Primary/400
(etc.)

Creation Steps

create_variable_collection(name="Primitives", modeName="Value")
For each color in the scale: create_variable(type="COLOR", name="Primary/500", collectionId=...) then set_variable_value(variableId, modeId, value="#hexcolor")
Repeat for secondary and neutrals.
create_variable_collection(name="Semantic Colors", modeName="Light")
add_variable_mode(collectionId, modeName="Dark") if dark mode is requested
For each semantic alias: create_variable + set_variable_value for Light mode, then Dark mode.

Rules

Always show the color table preview before executing creation.
Create Primitives collection first, Semantic collection second.
Use only hex values for variable colors.
Semantic variable values reference other variables conceptually; set the actual resolved hex value since variable aliasing (variable-to-variable binding) is not yet supported via MCP.