How do I install the Color Scale skill?

Run npx skillmds add majiayu000/color-scale in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Color Scale safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Color Scale?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Color Scale free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Color Scale?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Color Scale by majiayu000 — Agent Skill

Name: Color Scale
Rating: 4.2 (5 reviews)
Author: majiayu000

Color Scale

Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palettes, or converting hex values to 11-step scales. Outputs CSS custom properties, Tailwind config, or JSON tokens.

majiayu000 11b27a5 2 files · 4.4 KB Updated Sep 9, 2026 567 repo stars

File contents

Color Scale Generator

Overview

Generate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand.

When to Use

Starting a new project needing a color system
Adding brand colors to an existing palette
Building light/dark theme tokens
Converting a single hex to a full scale

Quick Reference

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

The Process

Get input: Ask for base color (hex preferred) and color name (e.g., "primary")
Ask format: CSS custom properties, Tailwind config, or JSON tokens?
Ask color system (default OKLCH):
- OKLCH - Perceptually uniform, modern standard (recommended)
- HSL - Hue, Saturation, Lightness (wide browser support)
- RGB - Red, Green, Blue (universal compatibility)
- LCH - Lightness, Chroma, Hue (perceptual, CSS Color 4)
- HEX - Hexadecimal notation (maximum compatibility)
Generate scale: Create 11 steps with consistent chroma/saturation
Add neutrals: Generate neutral scale using same hue, minimal saturation
Add semantics: Generate success, warning, error, info harmonized with brand
Output: Provide complete token set in requested format

Color Systems

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.

Output Formats

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)" }
    }
  }
}

Algorithm Details

Lightness stops (L values):

50: 0.97, 100: 0.93, 200: 0.87, 300: 0.78, 400: 0.65
500: 0.55, 600: 0.45, 700: 0.37, 800: 0.27, 900: 0.20, 950: 0.14

Chroma/saturation adjustment at extremes:

L > 0.9: reduce to 30% (prevents washed-out pastels)
L < 0.2: reduce to 70% (prevents muddy darks)
Otherwise: full chroma

Semantic color hues (harmonized 10-15% toward brand):

Success: base 145 (green)
Warning: base 70 (amber)
Error: base 25 (red)
Info: base 250 (blue)

---name: color-scaledescription: Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palettes, or converting hex values to 11-step scales. Outputs CSS custom properties, Tailwind config, or JSON tokens.--- # Color Scale Generator ## Overview Generate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand. ## When to Use - Starting a new project needing a color system - Adding brand colors to an existing palette - Building light/dark theme tokens - Converting a single hex to a full scale ## Quick Reference | 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 | ## The Process 1. **Get input**: Ask for base color (hex preferred) and color name (e.g., "primary") 2. **Ask format**: CSS custom properties, Tailwind config, or JSON tokens? 3. **Ask color system** (default OKLCH): - OKLCH - Perceptually uniform, modern standard (recommended) - HSL - Hue, Saturation, Lightness (wide browser support) - RGB - Red, Green, Blue (universal compatibility) - LCH - Lightness, Chroma, Hue (perceptual, CSS Color 4) - HEX - Hexadecimal notation (maximum compatibility) 4. **Generate scale**: Create 11 steps with consistent chroma/saturation 5. **Add neutrals**: Generate neutral scale using same hue, minimal saturation 6. **Add semantics**: Generate success, warning, error, info harmonized with brand 7. **Output**: Provide complete token set in requested format ## Color Systems | 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. ## Output Formats **CSS Custom Properties:** ```css :root { --primary-50: oklch(97% 0.01 250); --primary-500: oklch(55% 0.15 250); --primary-950: oklch(14% 0.10 250); } ``` **Tailwind Config:** ```js module.exports = { theme: { extend: { colors: { primary: { 50: 'oklch(97% 0.01 250)', 500: 'oklch(55% 0.15 250)', } } } } } ``` **JSON Tokens:** ```json { "color": { "primary": { "50": { "value": "oklch(97% 0.01 250)" }, "500": { "value": "oklch(55% 0.15 250)" } } } } ``` ## Algorithm Details **Lightness stops** (L values): - 50: 0.97, 100: 0.93, 200: 0.87, 300: 0.78, 400: 0.65 - 500: 0.55, 600: 0.45, 700: 0.37, 800: 0.27, 900: 0.20, 950: 0.14 **Chroma/saturation adjustment** at extremes: - L > 0.9: reduce to 30% (prevents washed-out pastels) - L < 0.2: reduce to 70% (prevents muddy darks) - Otherwise: full chroma **Semantic color hues** (harmonized 10-15% toward brand): - Success: base 145 (green) - Warning: base 70 (amber) - Error: base 25 (red) - Info: base 250 (blue)

Frequently asked questions