/color-theory

10 installs

Help your AI agent understand color

Works withAmpAntigravityClaude CodeClineCodexCursorKilo CodeOpenCodeRoo CodeWindsurfGemini CLI
bash
curl -fsSL https://colortheory.dev/install | bash

Auto detects CLI installations

$ capabilities

● Color Fundamentals

  • • RGB, HSL, and hex color models
  • • Color temperature and saturation
  • • Luminance and brightness values
  • • Color space conversions

◆ Color Schemes

  • • Complementary and analogous palettes
  • • Triadic and tetradic harmonies
  • • Split-complementary schemes
  • • Monochromatic variations

▲ Color Psychology

  • • Emotional associations by color
  • • Cultural color meanings
  • • Brand color selection
  • • Context-aware recommendations

■ Accessibility

  • • WCAG contrast ratio checks
  • • Color blindness simulation
  • • AA/AAA compliance guidance
  • • Accessible palette generation

$ examples

terminal
❯ /color-theory

● I've loaded the Color Theory skill. How can I help you with color decisions?

  Common use cases:
  - Create a brand/UI color palette
  - Check accessibility/contrast ratios
  - Choose colors for a specific emotion or industry
  - Build harmonious color schemes
  - Review existing colors for improvements

  What color challenge are you working on?

❯ Review existing colors

● I can review your colors for harmony, accessibility, and effectiveness.
  To do that, I need to know which colors to analyze.

  Where are your colors?

  1. Share them directly - Paste HEX codes like #FF5733, #2C3E50
  2. Point to a file - CSS file, design tokens, theme config, etc.
  3. Describe the context - "My brand colors" or "The button styles in src/components"

  What would you like me to review?

❯ Any colors in the project

● Summary of Changes

1. Fintech Palette (WCAG Fix)
┌───────────┬─────────────────────┬─────────────────────┬──────────┐
│   Color   │       Before        │        After        │ Contrast │
├───────────┼─────────────────────┼─────────────────────┼──────────┤
│ Secondary │ #10B981 (2.42:1 ❌) │ #047857 (5.24:1 ✅) │ AA Pass  │
├───────────┼─────────────────────┼─────────────────────┼──────────┤
│ Accent    │ #F59E0B (2.05:1 ❌) │ #B45309 (4.80:1 ✅) │ AA Pass  │
└───────────┴─────────────────────┴─────────────────────┴──────────┘

2. Purple Accent (Improved Contrast)

- Before: #9B59D4 → 4.50:1 (borderline)
- After: #A66DD8 → 5.47:1 (comfortable AA margin)

3. Shape Differentiation (Color Blindness)
┌───────────────┬────────────┬─────────┐
│     Card      │   Shape    │  Color  │
├───────────────┼────────────┼─────────┤
│ Fundamentals  │ ● circle   │ #22A06B │
├───────────────┼────────────┼─────────┤
│ Schemes       │ ◆ diamond  │ #4A7FD4 │
├───────────────┼────────────┼─────────┤
│ Psychology    │ ▲ triangle │ #A66DD8 │
├───────────────┼────────────┼─────────┤
│ Accessibility │ ■ square   │ #E5A832 │
└───────────────┴────────────┴─────────┘