The Science of Color in UI Design

Color is one of the most powerful tools in a designer's arsenal. It conveys meaning, creates hierarchy, evokes emotion, and affects usability. Understanding color science helps us make intentional choices.

Color Models for Screens#

RGB and Hex#

The traditional web color model:

/* RGB - 0-255 for each channel */
color: rgb(59, 130, 246);

/* Hex - compressed RGB */
color: #3b82f6;

HSL#

More intuitive for manipulation:

/* Hue (0-360), Saturation (0-100%), Lightness (0-100%) */
color: hsl(217, 91%, 60%);

/* Easy to create variations */
--blue-light: hsl(217, 91%, 70%);
--blue-dark: hsl(217, 91%, 40%);

OKLCH#

Perceptually uniform, the future of CSS colors:

/* Lightness (0-1), Chroma (0-0.4), Hue (0-360) */
color: oklch(0.65 0.2 250);

/* Consistent perceived lightness across hues */
--red: oklch(0.65 0.25 25);
--blue: oklch(0.65 0.2 250);
--green: oklch(0.65 0.2 145);

Color Psychology#

Colors trigger associations and emotions:

Color	Associations	Use Cases
Blue	Trust, stability, calm	Banking, healthcare, tech
Green	Growth, nature, success	Finance, eco, confirmations
Red	Urgency, energy, danger	Errors, sales, CTAs
Yellow	Optimism, caution, warmth	Warnings, highlights
Purple	Luxury, creativity, wisdom	Premium, creative tools
Orange	Friendly, confident, playful	CTAs, youth brands

Building a Color System#

Start with Brand Colors#

Define your primary palette:

:root {
    /* Brand colors */
    --color-primary: oklch(0.55 0.2 250);
    --color-secondary: oklch(0.65 0.15 170);
}

Generate a Scale#

Create consistent lightness variations:

:root {
    --blue-50: oklch(0.97 0.02 250);
    --blue-100: oklch(0.93 0.04 250);
    --blue-200: oklch(0.87 0.08 250);
    --blue-300: oklch(0.78 0.12 250);
    --blue-400: oklch(0.68 0.16 250);
    --blue-500: oklch(0.55 0.2 250);  /* Base */
    --blue-600: oklch(0.48 0.2 250);
    --blue-700: oklch(0.40 0.18 250);
    --blue-800: oklch(0.33 0.15 250);
    --blue-900: oklch(0.25 0.12 250);
}

Semantic Colors#

Map primitives to purposes:

:root {
    /* Semantic mappings */
    --color-success: var(--green-500);
    --color-warning: var(--yellow-500);
    --color-error: var(--red-500);
    --color-info: var(--blue-500);

    /* Interactive states */
    --color-link: var(--blue-600);
    --color-link-hover: var(--blue-700);
}

Accessibility and Contrast#

WCAG Requirements#

AA (minimum): 4.5:1 for normal text, 3:1 for large text
AAA (enhanced): 7:1 for normal text, 4.5:1 for large text

Testing Contrast#

// Calculate relative luminance
function luminance(r, g, b) {
    const [rs, gs, bs] = [r, g, b].map(c => {
        c /= 255;
        return c <= 0.03928
            ? c / 12.92
            : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// Calculate contrast ratio
function contrastRatio(l1, l2) {
    const lighter = Math.max(l1, l2);
    const darker = Math.min(l1, l2);
    return (lighter + 0.05) / (darker + 0.05);
}

Don't Rely on Color Alone#

Always provide additional cues:

<!-- Bad -->
<span class="status-red">Error</span>

<!-- Good -->
<span class="status-error">
    <svg aria-hidden="true"><!-- error icon --></svg>
    Error: Invalid email
</span>

Dark Mode Considerations#

Don't Just Invert#

Dark mode requires thoughtful adjustments:

/* Light mode */
:root {
    --bg-base: oklch(0.99 0.005 265);
    --fg-base: oklch(0.20 0.02 265);
    --shadow: oklch(0.50 0.02 265 / 0.1);
}

/* Dark mode - not just inverted */
:root.dark {
    --bg-base: oklch(0.15 0.02 265);
    --fg-base: oklch(0.93 0.01 265);
    --shadow: oklch(0 0 0 / 0.3);
}

Reduce Chroma in Dark Mode#

Saturated colors feel harsh on dark backgrounds:

:root {
    --accent: oklch(0.65 0.2 250);
}

:root.dark {
    --accent: oklch(0.70 0.15 250); /* Higher L, lower C */
}

Practical Tips#

Start with grayscale - Establish hierarchy first
Use color sparingly - It's more impactful when rare
Test with colorblind simulators - ~8% of men are colorblind
Consider cultural meanings - Colors mean different things globally
Document your palette - Create a single source of truth

Conclusion#

Color is both art and science. By understanding the technical foundations—color models, contrast ratios, perceptual uniformity—we make more informed creative decisions. The best color choices feel intuitive to users because they're grounded in solid principles.