color-scale

Name: color-scale
Author: dylantarre

33stars3forks

How to install color-scale?

dylantarre/design-system-skills/color-scale

$npx -y skills add dylantarre/design-system-skills --skill color-scale

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Color Scale Generator
2
3	## Overview
4
5	Generate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand.
6
7	## When to Use
8
9	- Starting a new project needing a color system
10	- Adding brand colors to an existing palette
11	- Building light/dark theme tokens
12	- Converting a single hex to a full scale
13
14	## Quick Reference
15
16	\| Step \| Lightness \| Typical Use \|
17	\|------\|-----------\|-------------\|
18	\| 50 \| 97% \| Subtle backgrounds \|
19	\| 100 \| 93% \| Hover states on light \|
20	\| 200 \| 87% \| Borders, dividers \|
21	\| 300 \| 78% \| Disabled states \|
22	\| 400 \| 65% \| Placeholder text \|
23	\| 500 \| 55% \| Primary brand color \|
24	\| 600 \| 45% \| Hover on dark \|
25	\| 700 \| 37% \| Active states \|
26	\| 800 \| 27% \| Headings \|
27	\| 900 \| 20% \| Body text \|
28	\| 950 \| 14% \| High contrast text \|
29
30	## The Process
31
32	1. Get input: Ask for base color (hex preferred) and color name (e.g., "primary")
33	2. Ask format: CSS custom properties, Tailwind config, or JSON tokens?
34	3. Ask color system (default OKLCH):
35	- OKLCH - Perceptually uniform, modern standard (recommended)
36	- HSL - Hue, Saturation, Lightness (wide browser support)
37	- RGB - Red, Green, Blue (universal compatibility)
38	- LCH - Lightness, Chroma, Hue (perceptual, CSS Color 4)
39	- HEX - Hexadecimal notation (maximum compatibility)
40	4. Generate scale: Create 11 steps with consistent chroma/saturation
41	5. Add neutrals: Generate neutral scale using same hue, minimal saturation
42	6. Add semantics: Generate success, warning, error, info harmonized with brand
43	7. Output: Provide complete token set in requested format
44
45	## Color Systems
46
47	\| System \| Format Example \| Best For \|
48	\|--------\|----------------\|----------\|
49	\| OKLCH \| `oklch(55% 0.15 250)` \| Modern browsers, perceptual accuracy \|
50	\| HSL \| `hsl(220 80% 55%)` \| Wide support, intuitive adjustments \|
51	\| RGB \| `rgb(59 130 246)` \| Universal, legacy systems \|
52	\| LCH \| `lch(55% 60 250)` \| Perceptual, CSS Color Level 4 \|
53	\| HEX \| `#3b82f6` \| Maximum compatibility \|
54
55	Recommend OKLCH for new projects - it produces more visually consistent scales because lightness and chroma are perceptually uniform.
56
57	## Output Formats
58
59	CSS Custom Properties:
60	```css
61	:root {
62	--primary-50: oklch(97% 0.01 250);
63	--primary-500: oklch(55% 0.15 250);
64	--primary-950: oklch(14% 0.10 250);
65	}
66	```
67
68	Tailwind Config:
69	```js
70	module.exports = {
71	theme: {
72	extend: {
73	colors: {
74	primary: {
75	50: 'oklch(97% 0.01 250)',
76	500: 'oklch(55% 0.15 250)',
77	}
78	}
79	}
80	}
81	}
82	```
83
84	JSON Tokens:
85	```json
86	{
87	"color": {
88	"primary": {
89	"50": { "value": "oklch(97% 0.01 250)" },
90	"500": { "value": "oklch(55% 0.15 250)" }
91	}
92	}
93	}
94	```
95
96	## Algorithm Details
97
98	Lightness stops (L values):
99	- 50: 0.97, 100: 0.93, 200: 0.87, 300: 0.78, 400: 0.65
100	- 500: 0.55, 600: 0.45, 700: 0.37, 800: 0.27, 900: 0.20, 950: 0.14
101
102	Chroma/saturation adjustment at extremes:
103	- L > 0.9: reduce to 30% (prevents washed-out pastels)
104	- L < 0.2: reduce to 70% (prevents muddy darks)
105	- Otherwise: full chroma
106
107	Semantic color hues (harmonized 10-15% toward brand):
108	- Success: base 145 (green)
109	- Warning: base 70 (amber)
110	- Error: base 25 (red)
111	- Info: base 250 (blue)

People who liked this also viewed

6 picks

Type

color-scale

33stars3forks

View on GitHub

How to install color-scale?

dylantarre/design-system-skills/color-scale

$npx -y skills add dylantarre/design-system-skills --skill color-scale

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Color Scale Generator
2
3	## Overview
4
5	Generate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand.
6
7	## When to Use
8
9	- Starting a new project needing a color system
10	- Adding brand colors to an existing palette
11	- Building light/dark theme tokens
12	- Converting a single hex to a full scale
13
14	## Quick Reference
15
16	\| Step \| Lightness \| Typical Use \|
17	\|------\|-----------\|-------------\|
18	\| 50 \| 97% \| Subtle backgrounds \|
19	\| 100 \| 93% \| Hover states on light \|
20	\| 200 \| 87% \| Borders, dividers \|
21	\| 300 \| 78% \| Disabled states \|
22	\| 400 \| 65% \| Placeholder text \|
23	\| 500 \| 55% \| Primary brand color \|
24	\| 600 \| 45% \| Hover on dark \|
25	\| 700 \| 37% \| Active states \|
26	\| 800 \| 27% \| Headings \|
27	\| 900 \| 20% \| Body text \|
28	\| 950 \| 14% \| High contrast text \|
29
30	## The Process
31
32	1. Get input: Ask for base color (hex preferred) and color name (e.g., "primary")
33	2. Ask format: CSS custom properties, Tailwind config, or JSON tokens?
34	3. Ask color system (default OKLCH):
35	- OKLCH - Perceptually uniform, modern standard (recommended)
36	- HSL - Hue, Saturation, Lightness (wide browser support)
37	- RGB - Red, Green, Blue (universal compatibility)
38	- LCH - Lightness, Chroma, Hue (perceptual, CSS Color 4)
39	- HEX - Hexadecimal notation (maximum compatibility)
40	4. Generate scale: Create 11 steps with consistent chroma/saturation
41	5. Add neutrals: Generate neutral scale using same hue, minimal saturation
42	6. Add semantics: Generate success, warning, error, info harmonized with brand
43	7. Output: Provide complete token set in requested format
44
45	## Color Systems
46
47	\| System \| Format Example \| Best For \|
48	\|--------\|----------------\|----------\|
49	\| OKLCH \| `oklch(55% 0.15 250)` \| Modern browsers, perceptual accuracy \|
50	\| HSL \| `hsl(220 80% 55%)` \| Wide support, intuitive adjustments \|
51	\| RGB \| `rgb(59 130 246)` \| Universal, legacy systems \|
52	\| LCH \| `lch(55% 60 250)` \| Perceptual, CSS Color Level 4 \|
53	\| HEX \| `#3b82f6` \| Maximum compatibility \|
54
55	Recommend OKLCH for new projects - it produces more visually consistent scales because lightness and chroma are perceptually uniform.
56
57	## Output Formats
58
59	CSS Custom Properties:
60	```css
61	:root {
62	--primary-50: oklch(97% 0.01 250);
63	--primary-500: oklch(55% 0.15 250);
64	--primary-950: oklch(14% 0.10 250);
65	}
66	```
67
68	Tailwind Config:
69	```js
70	module.exports = {
71	theme: {
72	extend: {
73	colors: {
74	primary: {
75	50: 'oklch(97% 0.01 250)',
76	500: 'oklch(55% 0.15 250)',
77	}
78	}
79	}
80	}
81	}
82	```
83
84	JSON Tokens:
85	```json
86	{
87	"color": {
88	"primary": {
89	"50": { "value": "oklch(97% 0.01 250)" },
90	"500": { "value": "oklch(55% 0.15 250)" }
91	}
92	}
93	}
94	```
95
96	## Algorithm Details
97
98	Lightness stops (L values):
99	- 50: 0.97, 100: 0.93, 200: 0.87, 300: 0.78, 400: 0.65
100	- 500: 0.55, 600: 0.45, 700: 0.37, 800: 0.27, 900: 0.20, 950: 0.14
101
102	Chroma/saturation adjustment at extremes:
103	- L > 0.9: reduce to 30% (prevents washed-out pastels)
104	- L < 0.2: reduce to 70% (prevents muddy darks)
105	- Otherwise: full chroma
106
107	Semantic color hues (harmonized 10-15% toward brand):
108	- Success: base 145 (green)
109	- Warning: base 70 (amber)
110	- Error: base 25 (red)
111	- Info: base 250 (blue)

People who liked this also viewed

6 picks

Type