skills.rest
KyaniteLabs
KyaniteLabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

3|3|Updated Jun 5, 2026
Search Tags:#accessibility#contrast#tokens#ui-design#design-system#oklch
One-click install
npx skills add https://github.com/KyaniteLabs/tastecheck --skill color-system-kyanitelabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/KyaniteLabs/tastecheck/tree/main/skills/color-system
Command: npx skills add https://github.com/KyaniteLabs/tastecheck --skill color-system-kyanitelabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, inaccessible, and muddy UI color palettes by providing a rigorous, evidence-based method for generating color ramps and semantic tokens.

Core Features & Use Cases

  • OKLCH Ramp Generation: Create perceptually uniform color ramps that maintain consistent lightness and chroma across the entire scale.
  • Semantic Token Architecture: Decouple raw color values from component roles to enable effortless theming and maintenance.
  • Accessibility Verification: Ensure all color pairs meet WCAG 2.x contrast standards for text, UI, and focus states.

Quick Start

Use the color-system skill to generate a ten-stop OKLCH ramp and semantic token map for a brand hue of 250 degrees.

Frequently Asked Questions about color-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a perceptually uniform OKLCH color ramp for a design system?▼

Generating a perceptually uniform OKLCH color ramp involves creating a ten-stop scale that maintains consistent lightness and chroma across the entire range. This ensures UI consistency and provides a mathematically smooth foundation for semantic token systems.

What is semantic token architecture and how does it work for UI theming?▼

Semantic token architecture decouples raw color values from component roles, mapping perceptually uniform OKLCH values to functional UI names. This enables effortless theming and maintenance by allowing global updates without altering individual component logic.

How do I verify WCAG 2.x contrast ratios for text and focus states?▼

WCAG 2.x contrast verification checks perceptually uniform OKLCH color pairs against accessibility standards for text, UI elements, and focus states. This ensures all generated semantic tokens meet required contrast ratios for accessible theme implementation.

Can I use this to fix muddy and inaccessible UI color palettes?▼

Yes, fixing muddy and inaccessible UI color palettes requires applying an evidence-based method to generate clean OKLCH color ramps. This standardizes lightness and chroma while enforcing WCAG 2.x contrast standards across all semantic tokens.

What is the best way to create a contrast-safe theme using OKLCH?▼

The best way to create a contrast-safe theme using OKLCH is to generate a perceptually uniform color ramp and map it to a semantic role-based token architecture. This guarantees UI consistency and automatically meets WCAG 2.x contrast standards.

Related Skills

Explore More Design & Creative Skills→
zeronx798zeronx798

popular-web-designs

Generate brand-aligned HTML and CSS using design tokens from 54 web design systems.

Community
Intermediate
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
yckkkkyckkkk
1

design-consultation

Plan and codify a complete design system into a DESIGN.md source of truth.

Community
Advanced
mikkermikker
102

oklch-skill

Convert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.

Community
Intermediate