菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | color-scale |
| description | 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. |
Generate 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):
Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.
Implements theme switching with semantic tokens and prefers-color-scheme detection. Use when adding dark mode, light/dark themes, color scheme toggles, or converting hardcoded colors to theme-aware tokens.
Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.
Transforms design tokens into platform-specific formats (CSS, SCSS, iOS Swift, Android XML). Use when setting up multi-platform token pipelines, creating build processes, or managing cross-platform design systems.
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.