Use when generating color palettes, creating design tokens, or building theme systems with brand colors. Supports CSS, Tailwind, and JSON output.
/plugin marketplace add dylantarre/design-system-skills/plugin install design-system-skills@design-system-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
algorithm.tsGenerate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand.
| Step | Lightness | Typical Use |
|---|---|---|
| 50 | 97% | Subtle backgrounds |
| 100 | 93% | Hover states on light |
| 200 | 87% | Borders, dividers |
| 300 | 78% | Disabled states |
| 400 | 65% | Placeholder text |
| 500 | 55% | Primary brand color |
| 600 | 45% | Hover on dark |
| 700 | 37% | Active states |
| 800 | 27% | Headings |
| 900 | 20% | Body text |
| 950 | 14% | High contrast text |
| System | Format Example | Best For |
|---|---|---|
| OKLCH | oklch(55% 0.15 250) | Modern browsers, perceptual accuracy |
| HSL | hsl(220 80% 55%) | Wide support, intuitive adjustments |
| RGB | rgb(59 130 246) | Universal, legacy systems |
| LCH | lch(55% 60 250) | Perceptual, CSS Color Level 4 |
| HEX | #3b82f6 | Maximum compatibility |
Recommend OKLCH for new projects - it produces more visually consistent scales because lightness and chroma are perceptually uniform.
CSS Custom Properties:
:root {
--primary-50: oklch(97% 0.01 250);
--primary-500: oklch(55% 0.15 250);
--primary-950: oklch(14% 0.10 250);
}
Tailwind Config:
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: 'oklch(97% 0.01 250)',
500: 'oklch(55% 0.15 250)',
}
}
}
}
}
JSON Tokens:
{
"color": {
"primary": {
"50": { "value": "oklch(97% 0.01 250)" },
"500": { "value": "oklch(55% 0.15 250)" }
}
}
}
Lightness stops (L values):
Chroma/saturation adjustment at extremes:
Semantic color hues (harmonized 10-15% toward brand):