skills.rest
olzn
olznCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

colour-craft

Create perceptually uniform OKLCH colour systems for web interfaces.

16|1|Updated Feb 6, 2026
Search Tags:#theming#accessibility#contrast#color#oklch#colour
One-click install
npx skills add https://github.com/olzn/ui-craft --skill colour-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colour-craft
Source: https://github.com/olzn/ui-craft/tree/main/colour-craft
Command: npx skills add https://github.com/olzn/ui-craft --skill colour-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Perceptually uniform, accessible colour systems for web interfaces, ensuring consistent visual weight across hues and robust contrast in light and dark themes.

Core Features & Use Cases

  • OKLCH-based color scales with perceptual uniformity for consistent UI palettes.
  • Semantic color mapping from primitive scales to design tokens and theme layers.
  • Accessible contrast guidance (WCAG and APCA) and color-blindness considerations for inclusive interfaces.
  • Multi-theme support (light/dark) with deliberate remapping rather than naive inversion.

Quick Start

Use OKLCH-based colour scales to build a cohesive light/dark palette for a UI.

Frequently Asked Questions about colour-craft

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

FAQPage Schema
How do I create perceptually uniform color scales for a web UI theme?▼

Perceptually uniform color scales for web UI themes are created using the OKLCH color space, ensuring consistent visual weight across different hues. This approach provides scalable lightness and chroma tapering for cohesive interface palettes.

What is the best way to map semantic design tokens from primitive color scales?▼

Semantic color mapping translates primitive OKLCH color scales into specific design tokens and theme layers. This process connects raw color values to functional UI roles like background, surface, and accent across both light and dark themes.

How does OKLCH contrast planning work for light and dark mode accessibility?▼

OKLCH contrast planning for light and dark accessibility involves deliberate color remapping rather than naive inversion, checking against WCAG 2.x and APCA standards. This ensures robust text legibility and inclusive interfaces in multi-theme setups.

Can I use OKLCH color systems to meet WCAG and APCA contrast requirements?▼

Yes, OKLCH color systems can satisfy WCAG 2.x and APCA contrast requirements through built-in accessibility checks. The perceptual uniformity of OKLCH allows for predictable contrast ratios when planning semantic brand color mapping.

Why does naive color inversion fail for dark mode design systems?▼

Naive color inversion fails for dark mode because it ignores perceptual lightness shifts across different hues in OKLCH. Deliberate semantic remapping is required to maintain consistent visual weight and accessibility across light and dark themes.

Does this approach support color-blindness considerations for interface palettes?▼

Yes, the approach supports color-blindness considerations for interface palettes by leveraging perceptual uniformity. OKLCH scales help differentiate semantic tokens beyond hue alone, improving accessibility for users with visual impairments.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

colorize

Add strategic color to monochromatic UI components with WCAG-compliant palettes.

Community
Intermediate
beardcoderbeardcoder

css-theme

Defines CSS theming systems with modern tokens for light/dark support.

Community
Advanced
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate