Frontend Color System

Color System

Generate accessible color palettes. Check contrast. Create themes.

When to Use

• Setting up project colors from brand color
• Checking accessibility (WCAG contrast)
• Creating dark mode variants
• Generating shadcn/Tailwind theme

Process

BRAND → GENERATE → VALIDATE → APPLY

1. Get brand color (HEX)
2. Generate palette via API
3. Check contrast ratios
4. Apply to theme

API Quick Reference

# Get color info
curl "https://www.thecolorapi.com/id?hex=6366F1"

# Generate scheme (analogic, complement, monochrome, triad)
curl "https://www.thecolorapi.com/scheme?hex=6366F1&mode=analogic&count=5"

# Check contrast (WCAG)
curl "https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=6366F1&api"

WCAG Requirements

Quick Theme from Brand

BRAND="6366F1"

# Get info
curl "https://www.thecolorapi.com/id?hex=$BRAND" | jq '.name.value, .hsl.value'

# Generate shades
curl "https://www.thecolorapi.com/scheme?hex=$BRAND&mode=monochrome&count=9"

# Check text contrast
curl "https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=$BRAND&api"

shadcn Theme Structure

:root {
  /* Base */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;

  /* Components */
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  /* Brand */
  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 98%;

  /* Secondary/Muted/Accent */
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  /* Destructive */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* UI */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 239 84% 67%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --primary: 239 84% 67%;
  --primary-foreground: 240 10% 3.9%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
}

Safe Primary Colors (AA on white)

Semantic Colors

success: "#22C55E"  # Green-500
warning: "#F59E0B"  # Amber-500
error:   "#EF4444"  # Red-500
info:    "#3B82F6"  # Blue-500

Gray Scale Options

Dark Mode Rules

Light → Dark inversion:
  Background: L=100% → L=4%
  Foreground: L=4%   → L=98%
  Muted:      L=96%  → L=16%
  Border:     L=90%  → L=16%
  Primary:    Keep hue, adjust L for visibility

Troubleshooting

"Contrast too low":
  → Darken color (reduce L in HSL)
  → Use for accents only, not text

"Brand color not accessible":
  → Create darker variant for interactive
  → Use original for decorative only

"Colors look different in dark mode":
  → Increase L slightly for vibrant colors
  → Reduce chroma to avoid vibration on dark bg

References

• palettes.md — Complete theme templates, Tailwind config, OKLCH
• workflows.md — Step-by-step guides from brand to theme

External Tools

• https://ui.shadcn.com/themes — shadcn theme generator
• https://uicolors.app — Tailwind palette generator
• https://oklch.com — OKLCH color picker
• https://webaim.org/resources/contrastchecker — Contrast checker