skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

color-and-elevation

Generate OKLCH color palettes with WCAG 2.2 AA contrast compliance.

1|Updated Jun 9, 2026
Search Tags:#accessibility#color palette#UI design#dark mode#OKLCH#LCH
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill color-and-elevation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-and-elevation
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/color-and-elevation
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill color-and-elevation

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit streamlines the process of designing accessible, cohesive UI color palettes and depth systems for various applications.

Core Features & Use Cases

  • Advanced Color Theory: Applies OKLCH and LCH color models for uniformity.
  • Contrast and Accessibility: Ensures compliance with WCAG and APCA standards.
  • Dark Mode Design: Provides guidelines for designing effective dark themes.
  • Depth and Elevation: Offers systematic approaches for visual layering.

Quick Start

Generate a color palette for a design system using OKLCH with a light background theme and verify WCAG AA contrast.

Frequently Asked Questions about color-and-elevation

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

FAQPage Schema
How do I generate a color palette using OKLCH that meets WCAG 2.2 AA contrast requirements?▼

To generate an OKLCH color palette meeting WCAG 2.2 AA contrast requirements, this Skill automates perceptually uniform color generation and validates contrast compliance for modern UI design.

What is the best way to design dark mode themes with proper depth and elevation rules?▼

Designing effective dark mode themes requires systematic depth and elevation rules for visual layering, which this Skill provides alongside dark mode theming guidelines.

Does this color palette generator support both WCAG and APCA contrast standards?▼

Yes, this color palette generator ensures compliance with both WCAG 2.2 AA and APCA contrast standards to guarantee accessibility across your UI design systems.

How do I create a light background theme and verify WCAG AA contrast for my design system?▼

You can create a light background theme by generating an OKLCH color palette and immediately verifying WCAG AA contrast compliance to ensure accessible UI design.

When should I use OKLCH over standard RGB for UI design color palettes?▼

Use OKLCH over standard RGB when you need perceptually uniform color palettes, ensuring consistent visual lightness and chroma transitions across your UI design system.

Can I use this for front-end development or is it strictly for UI design?▼

You can use this for both front-end development and modern UI design, as it generates cohesive color palettes and depth systems suitable for various application interfaces.

Related Skills

Explore More Design & Creative Skills→
Free-The-AiFree-The-Ai
833

oklch-skill

Convert colors and generate palettes using the OKLCH color space.

Official
Advanced
haxlyshaxlys

tailwind-design-system

Create scalable Tailwind v4 design systems with semantic tokens and CVA components.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
jacob-balslevjacob-balslev
1

color-system-design

Construct accessible color palettes and semantic tokens for light and dark themes.

Community
Advanced