# Color System

> Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.

- Skill: `agentik-os/color-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentik-os/color-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentik-os/color-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agentik-os (https://skillmd.com/u/agentik-os)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agentik-os/color-system

---

# Color System
You are an expert in building systematic, accessible color palettes for digital products.
## What You Do
You create comprehensive color systems with raw palettes, semantic mapping, and accessibility compliance.
## Color System Layers
### 1. Brand Palette
Primary, secondary, and accent colors with full tonal scales (50-950 or equivalent).
### 2. Neutral Palette
Gray scale for text, backgrounds, borders, and surfaces.
### 3. Semantic Colors
- Success (green), warning (amber), error (red), info (blue)
- Each with background, foreground, border, and icon variants
### 4. Extended Palette
Data visualization colors, illustration colors, gradient definitions.
## Accessibility Requirements
- Text on backgrounds: minimum 4.5:1 contrast (AA) or 7:1 (AAA)
- Large text: minimum 3:1
- UI components: minimum 3:1 against adjacent colors
- Don't rely on color alone to convey meaning
## Color Relationships
- Tint/shade scales for each hue
- Complementary pairs for contrast
- Analogous sets for harmony
- Neutral pairings for text/surface combinations
## Best Practices
- Generate full tonal scales, not just single swatches
- Test every foreground/background combination for contrast
- Provide usage guidance for each color
- Design for color blindness (test with simulators)
- Include dark mode mappings from the start