Generate 11-step OKLCH color scales from a base hex color.
npx skills add https://github.com/dylantarre/design-system-skills --skill color-scale
Please help me install this Agent Skill. Skill: color-scale Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/color-scale Command: npx skills add https://github.com/dylantarre/design-system-skills --skill color-scale
This Skill generates perceptually uniform 11-step color scales (50-950) from a base brand color, enabling consistent tokens, palettes, and accessible themes across CSS, Tailwind, and JSON formats.
Use the color-scale skill to generate an 11-step color scale from a base hex color, with OKLCH as the recommended color system, and export as CSS variables, Tailwind config, or JSON tokens.
High-intent search queries and answers about installing and using this skill.
To generate a perceptually uniform color scale, provide a base hex brand color and the system produces an 11-step scale (50-950) using the OKLCH color space. This ensures visual consistency across the entire range for accessible design themes.
Yes, color scales can be exported as Tailwind config, CSS custom properties, or JSON tokens. This allows direct integration into design-system pipelines, making the generated palettes immediately usable in your preferred frontend workflow.
OKLCH is a color space designed for perceptual uniformity, meaning equal numeric changes produce visually equal shifts. Using OKLCH to generate design tokens ensures your 11-step color scale appears smooth and consistent to the human eye.
Yes, the system generates both neutral and semantic color sets harmonized with your base brand hue. This creates a cohesive palette where supporting colors share the same underlying perceptual hue, maintaining visual consistency across your theme.
The best way to create a multi-step color palette is using OKLCH perceptual uniformity to generate an 11-step scale (50-950) from a single base color. This approach guarantees accessible contrast ratios and smooth transitions for design system tokens.
CSS color scales look uneven when generated in RGB or HSL spaces, which are not perceptually uniform. Generating your scales in OKLCH ensures that lightness changes are visually consistent across all 11 steps, preventing uneven jumps.
adminsairolotech-bitGenerate three brand directions with color palettes, typography, and logo concepts.
vanman2024Automate Tailwind CSS and shadcn/ui setup for Next.js projects.
moughamirGenerate accessible Tailwind v4 color palettes with WCAG contrast validation.
mikkerConvert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.
