SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillscolor-systems

color-systems

Design & creation

View repository

Updated 10-16 05:06

About this skill

Color Systems

Building a Palette

The 60-30-10 Rule

  • 60% dominant color (backgrounds, large surfaces)
  • 30% secondary color (cards, sections, supporting elements)
  • 10% accent color (CTAs, active states, key interactive elements)

Systematic Palette Generation

Start with one brand color. Build everything from there.

  1. Generate a hue scale — Create 10 steps from near-white to near-black

    • 50 (lightest background)
    • 100 (subtle background)
    • 200 (border/divider)
    • 300 (placeholder/disabled)
    • 400 (secondary text)
    • 500 (body text on light)
    • 600 (primary interactive)
    • 700 (hover state)
    • 800 (heading text)
    • 900 (darkest text)

  2. Add functional colors — These are non-negotiable:

    • Error/destructive (red family)
    • Warning (amber/yellow family)
    • Success (green family)
    • Info (blue family)
    • Each needs at least 3 values: light (bg), medium (text), dark (border)

  3. Add neutrals — Gray scale that harmonizes with brand hue

    • Warm grays if warm brand color
    • Cool grays if cool brand color
    • Never pure gray (#808080) unless intentionally brutalist

Perceptual Uniformity

Not all colors are equally bright to the human eye. Green appears brighter than blue at the same lightness value. When creating color scales:

  • Use OKLCH or CIELAB color space instead of HSL
  • Test colors at the same L value to ensure visual consistency
  • Yellow needs to be darker than blue to appear "equal" in a UI

Accessibility

Contrast Requirements (WCAG AA)

  • Body text: 4.5:1 minimum
  • Large text (18px+ or 14px bold): 3:1 minimum
  • UI components and graphical objects: 3:1 minimum
  • Decorative elements: no requirement

Contrast Checklist

  • Text on background (both themes)
  • Icon on background
  • Button text on button background
  • Form input text on input background
  • Placeholder text (yes, this counts)
  • Focus ring visibility
  • Link text vs surrounding text

Color Blindness

  • Never use color alone to convey information
  • Red/green is the most common confusion (8% of males)
  • Add icons, patterns, or labels alongside color indicators
  • Test with deuteranopia and protanopia filters

Dark Mode Color Adjustments

  • Reduce saturation by 10-20% for brand colors
  • Use gray-900/gray-950 for backgrounds (not pure black)
  • Swap elevation model: lighter = higher (opposite of light mode)
  • Reduce shadow opacity to near-zero
  • Ensure accent colors still have sufficient contrast
  • Test all feedback colors (error/warning/success) against dark surfaces