Can this skill help with dark mode implementation?

Yes, it includes a specific strategy for remapping semantic tokens, using lighter surfaces for elevation, and reducing chroma to ensure comfortable viewing in dark environments.

Why does this skill use OKLCH instead of HEX or HSL?

OKLCH is preferred for perceptual uniformity, meaning colors with the same lightness value actually look equally bright to the human eye, making it significantly easier to build accessible palettes compared to HSL.

Does it support modern CSS frameworks like Tailwind?

Absolutely. The skill can generate a complete tailwind.config.js snippet including custom brand, neutral, and semantic color scales ready for production use.

How does it ensure web accessibility?

It follows WCAG guidelines by providing lightness difference heuristics and mapping colors to high-contrast shades (900/950) to ensure text always meets required contrast ratios.

Color Palette & System Architect

Name: Color Palette & System Architect
Author: ArnavPuri

byArnavPuri

•

Design Tools

Generates production-ready, accessible color systems and semantic tokens using perceptually uniform color models like OKLCH.

This skill empowers Claude to create sophisticated design systems by generating harmonious color palettes based on modern color theory. It goes beyond simple hex codes, providing full 19-step shade scales, brand-tinted neutrals, and semantic mappings for success, error, and warning states. Built with a focus on WCAG accessibility and dark mode adaptability, it automatically generates structured CSS custom properties or Tailwind CSS configurations, making it an essential tool for developers building high-quality, inclusive user interfaces.

Key Features

01Exports for Tailwind CSS configurations and 3-layer CSS custom property architectures.

02Built-in WCAG 2.1 contrast accessibility verification and lightness heuristics.

03Comprehensive dark mode mapping and theme adaptation strategies.

04Automatic 50-950 shade scale generation with stable hue and adjusted chroma.

05Perceptually uniform color generation using the advanced OKLCH model.

061 GitHub stars

Use Cases

01Building a comprehensive design system starting from a single brand hex code.

02Implementing an accessible dark mode theme for an existing web application.

03Generating semantic color tokens for industry-specific UI, such as Finance or SaaS.

Key Features

01Exports for Tailwind CSS configurations and 3-layer CSS custom property architectures.

02Built-in WCAG 2.1 contrast accessibility verification and lightness heuristics.

03Comprehensive dark mode mapping and theme adaptation strategies.

04Automatic 50-950 shade scale generation with stable hue and adjusted chroma.

05Perceptually uniform color generation using the advanced OKLCH model.

061 GitHub stars

Use Cases

01Building a comprehensive design system starting from a single brand hex code.

02Implementing an accessible dark mode theme for an existing web application.

03Generating semantic color tokens for industry-specific UI, such as Finance or SaaS.