skills.rest
AbsolutelySkilled
AbsolutelySkilledOFFICIAL
Explore all skills by this author →
GitHub

color-theory

Define OKLCH-based color tokens with semantic mappings and dark-mode overrides.

207|31|Updated Mar 14, 2026
Search Tags:#accessibility#contrast#tokens#color#dark-mode#palette#oklch
One-click install
npx skills add https://github.com/AbsolutelySkilled/AbsolutelySkilled --skill color-theory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-theory
Source: https://github.com/AbsolutelySkilled/AbsolutelySkilled/tree/main/skills/color-theory
Command: npx skills add https://github.com/AbsolutelySkilled/AbsolutelySkilled --skill color-theory

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Color-theory provides engineering-ready color systems to ensure accessible, scalable UI color palettes across light and dark modes.

Core Features & Use Cases

  • OKLCH-based primitives for perceptually uniform color math and robust theming.
  • Semantic tokens that decouple design values from implementation, enabling easy branding and theming.
  • Dark-mode overrides and WCAG-conscious contrast guidance to maintain accessibility across themes.
  • Data-viz ready palettes with colorblind-safe distinctions for charts and dashboards.

Quick Start

Install and start using color-theory to generate and apply production-ready color systems in your UI projects.

Frequently Asked Questions about color-theory

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

FAQPage Schema
How do I create an accessible color system for dark mode and light mode?▼

Create an accessible color system by defining OKLCH-based primitive scales and applying semantic color tokens with explicit dark-mode overrides to maintain WCAG-compliant contrast.

What is the best way to structure UI color tokens for theming?▼

The best way to structure UI color tokens is using semantic mappings that decouple design values from implementation, enabling easy branding and consistent theming across your application.

How does OKLCH color math improve UI palette generation?▼

OKLCH color math improves UI palette generation by providing perceptually uniform color spacing, which ensures consistent visual lightness across primitive scales and robust theming.

Can I generate colorblind-safe palettes for data visualization charts?▼

Yes, you can generate colorblind-safe palettes for data visualization. The system provides data-viz ready palettes with distinct color distinctions designed specifically for charts and dashboards.

How do I apply WCAG contrast guidance to semantic color tokens?▼

Apply WCAG contrast guidance by mapping primitive scales to semantic tokens and using explicit overrides, ensuring text and background combinations meet accessibility standards across light and dark themes.

Related Skills

Explore More Design & Creative Skills→
KILWA73KILWA73

brand-guidelines

Apply Anthropic brand colors and typography to documents, presentations, and UI mockups.

Community
Basic
fusenginefusengine
22

theming-tokens

Organize primitive, semantic, and component design tokens for UI theming.

Community
Intermediate
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
rodydavisrodydavis
58

color-utilities-in-javascript

Convert color formats between RGB, HSL, and HEX in JavaScript.

Community
Basic