skills.rest
nikglavin
nikglavinCOMMUNITY
Explore all skills by this author →
GitHub

lyra-color-theory

Generate accessible UI color palettes and output semantic CSS variables.

1|Updated Mar 24, 2026
Search Tags:#accessibility#ui-design#design-systems#color-theory#palette-generation#contrast-audit#emotional-palette
One-click install
npx skills add https://github.com/nikglavin/lyra --skill lyra-color-theory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lyra-color-theory
Source: https://github.com/nikglavin/lyra/tree/main/skills/lyra-color-theory
Command: npx skills add https://github.com/nikglavin/lyra --skill lyra-color-theory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI color systems often fail accessibility guidelines or emotional alignment, leading to inconsistent branding and user fatigue. This Skill provides rigorous color theory guidance, palette generation, and audit capabilities to create harmonious, accessible themes.

Core Features & Use Cases

  • Palette Generation: produce CSS color tokens using Monochromatic, Analogous, Complementary, or Triadic harmonies.
  • Accessibility Audit: evaluate contrast ratios and readability against WCAG targets, and flag risky combinations.
  • Symbolic Application: tailor color palettes to evoke trust, urgency, or luxury within a design system.
  • Use Case: generate a brand-friendly color token set for a SaaS dashboard with semantic tokens like --color-text, --color-bg, and --color-primary.

Quick Start

Generate a harmonious, accessible color palette for the next UI dashboard.

Frequently Asked Questions about lyra-color-theory

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

FAQPage Schema
How do I generate a color palette that meets WCAG contrast standards for a UI dashboard?▼

Generate accessible color palettes by applying harmony schemas like monochromatic, analogous, or triadic while enforcing WCAG contrast ratios. This outputs semantic CSS variables such as --color-text and --color-bg to ensure readability across web and mobile interfaces.

What is the best way to audit existing design system colors for accessibility compliance?▼

Audit existing themes by evaluating contrast ratios and readability against WCAG targets to flag risky color combinations. This process identifies inaccessible pairs within your design system and can refactor current palettes to meet compliance standards.

Can I tailor UI color tokens to evoke specific emotional responses like trust or urgency?▼

Yes, tailor UI color tokens to evoke trust, urgency, or luxury through symbolic application. This aligns your design system's emotional palette with brand identity goals while maintaining accessibility compliance.

Does this approach output semantic CSS variables for SaaS applications?▼

Yes, this approach outputs semantic CSS variables such as --color-primary, --color-bg, and --color-text. These tokens establish a consistent, accessible color system directly applicable to SaaS dashboards and brand revamps.

Why does my monochromatic UI color palette fail accessibility contrast checks?▼

Monochromatic UI palettes often fail contrast checks when generated without enforcing WCAG standards. Evaluating contrast ratios and flagging risky combinations resolves this, ensuring text and background tokens maintain readable contrast levels.

Related Skills

Explore More Design & Creative Skills→
Prathmesh2000Prathmesh2000
1

design-tokens

Standardize color, spacing, typography, and component tokens for multi-brand design systems.

Community
Advanced
tmarsbrtmarsbr

frontend-design

Create production-grade frontend interfaces with semantic HTML and CSS variables.

Community
Advanced
PinpongTpPinpongTp

ui-ux-design

Guide UI/UX design with mobile-first principles and accessibility guidelines.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic