ArtiphishleArtiphishle
← Design
Design/7 min read

Color Theory for Developers: Beyond the Basics

Understanding color relationships, accessibility, and creating cohesive palettes programmatically.

Artiphishle|
coloraccessibilitycss

Color Theory for Developers

Color is more than aesthetics -- it's communication.

The 60-30-10 Rule

    1. 60% dominant color (background, large areas)
    2. 30% secondary color (containers, cards)
    3. 10% accent color (CTAs, highlights)

Accessibility First

Always check contrast ratios:

1class="text-category-tech font-medium">function getContrastRatio(color1, color2) {
2  class="text-category-tech font-medium">const l1 = getLuminance(color1)
3  class="text-category-tech font-medium">const l2 = getLuminance(color2)
4  class="text-category-tech font-medium">const lighter = Math.max(l1, l2)
5  class="text-category-tech font-medium">const darker = Math.min(l1, l2)
6  class="text-category-tech font-medium">return (lighter + 0.05) / (darker + 0.05)
7}
8
9// WCAG AA: 4.5:1 for normal text
10// WCAG AAA: 7:1 for normal text

Working with OKLCH

OKLCH is the future of color in CSS -- perceptually uniform and great for generating palettes.