skills.rest
shipiit
shipiitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

color-engineering

Generate OKLCH color ramps and dark-mode tokens with WCAG and APCA contrast checks.

Updated May 6, 2026
Search Tags:#accessibility#contrast#theme generation#oklch#color tokens#colorblind safety
One-click install
npx skills add https://github.com/shipiit/shipit-ui-design --skill color-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-engineering
Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/color-engineering
Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill color-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents incorrect palettes and ramps from cascading into unreadable text, inconsistent UI states, and brittle tokens across light and dark modes.

Core Features & Use Cases

  • Perceptual color ramps in OKLCH: Generate smooth, 11-step ramps with hue stability using perceptually uniform spaces.
  • Accessibility verification: Ensure contrast with WCAG/APCA-aligned checks and validate colorblind-safe categorical scales.
  • Token-grade implementation: Produce usable gradients, harmonies, perceptual mixing guidance, and consistent token naming that avoids hardcoded design values.

Quick Start

Use /palette (or refine via /audit) to generate OKLCH-based color ramps and co-emitted dark-mode tokens for tokens.css while verifying contrast and colorblind safety.

Frequently Asked Questions about color-engineering

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

FAQPage Schema
How do I generate accessible color tokens for light and dark mode?▼

OKLCH color ramps provide perceptually uniform spacing and hue stability, preventing the visual inconsistencies and unreadable text that occur when using naive HSL interpolation for design system palettes.

What's the best way to verify colorblind safety for categorical UI scales?▼

Colorblind-safe categorical scales are validated during the token generation process, ensuring semantic colors remain distinguishable and accessible across different types of color vision deficiencies.

How do I create smooth multi-step color ramps without hardcoded design values?▼

Smooth 11-step color ramps are generated using perceptual OKLCH spaces with token-compliant naming, producing usable gradients and harmonies while avoiding hardcoded values in your CSS outputs.

Why does naive HSL interpolation cause brittle UI color tokens?▼

Naive HSL interpolation creates uneven perceptual steps and hue shifts, leading to inconsistent UI states and unreadable text, which is why OKLab and OKLCH spaces are required for robust tokens.

Does this approach check text contrast across different font weights?▼

Yes, accessibility verification validates contrast expectations across text weights using APCA and WCAG checks, preventing single-weight contrast checks from missing readability failures in components.

Related Skills

Explore More Design & Creative Skills→
YouneslahlaliYouneslahlali

colorize

Apply semantic and accent colors to monochromatic UI designs using OKLCH.

Community
Intermediate
fusenginefusengine
22

shadcn-theming

Manages CSS variables, OKLCH colors and light-dark themes for shadcn/ui components.

Community
Intermediate
masermediagroup-stackmasermediagroup-stack
1

visualizing-data

Select chart types by data characteristics and analytical goals.

Community
Advanced
ToqsickToqsick

ui-color-system

Generate accessible UI color palettes with WCAG contrast checking.

Community
Advanced