color-theory-application

Generate HSL-based color palettes with WCAG contrast and dark mode support.

28|3|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/oborchers/fractional-cto --skill color-theory-application
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-theory-application
Source: https://github.com/oborchers/fractional-cto/tree/main/visual-design-principles/skills/color-theory-application
Command: npx skills add https://github.com/oborchers/fractional-cto --skill color-theory-application

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you move beyond intuitive color selection to build systematic, scalable, and accessible color palettes and systems for digital products.

Core Features & Use Cases

  • Systematic Color Generation: Create harmonious color palettes using HSL and defined rules.
  • Accessibility Compliance: Ensure sufficient color contrast for WCAG AA standards.
  • Dark Mode Implementation: Design effective dark mode themes that are not simple inversions.
  • Use Case: When designing a new SaaS product, use this Skill to define a consistent brand color palette, generate shade scales for UI elements, and ensure accessibility across light and dark modes.

Quick Start

Define a color system for a new SaaS product using HSL, following the 60-30-10 rule and WCAG contrast requirements.

Frequently Asked Questions about color-theory-application

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

FAQPage Schema
How do I generate accessible color palettes for a digital product?

Create accessible color palettes by applying systematic color theory principles using the HSL color model and defined harmony schemes to meet WCAG contrast requirements. This method facilitates building scalable color systems for digital products.

What is the best way to design a dark mode color system?

Design dark mode color systems by applying systematic color theory to define semantic colors rather than simply inverting light mode shades. This approach maintains proper contrast and visual hierarchy for accessible dark mode implementations.

How does HSL help with creating shade scales for UI components?

HSL enables shade scale generation by allowing systematic adjustments to hue, saturation, and lightness to produce harmonious variations. This facilitates consistent shade scale creation for UI elements across a scalable color system.

Can I use this approach to ensure WCAG AA contrast compliance?

Yes, you can ensure WCAG AA contrast compliance by applying systematic color theory principles that check and maintain sufficient color contrast across all generated shades. This facilitates creating accessible color systems that meet required accessibility standards.

Do I need design tokens to implement a semantic color system?

Implementing semantic color definitions helps build scalable color systems, but design tokens are not explicitly required. The approach focuses on defining semantic colors and generating shade scales using HSL and WCAG rules for digital products.