Color Theory Docs - Moby Demos

Color Theory Overview

Effective color usage in web design balances aesthetics, accessibility, and emotional impact. This documentation covers essential principles for creating visually harmonious interfaces that work across lighting conditions and user preferences.

Color Models

Understanding HSL/RGB/HEX systems

Accessibility

Ensuring color contrast compliance

Implementation

Code patterns and best practices

HSL Color Model

HSL Fundamentals

Hue (H) determines the base color. Saturation (S) controls intensity. Lightness (L) adjusts brightness. This model allows for easy color variations through mathematical operations.

Component	Value Range	Function
Hue	0-360	Base color selector
Saturation	0-100%	Color intensity
Lightness	0-100%	Brightness level

HSL in CSS

/* Base color */
.color {
  background-color: hsl(217, 80%, 70%);
}

/* Adjusted brightness */
.dull-color {
  background-color: hsl(217, 80%, 40%);
}

/* SRGB to HSL conversion */
function toHSL(r, g, b) {
  // Implementation here
}

Interactive Preview

HSL(217, 80%, 70%)

Accessibility Standards

WCAG Compliance

WCAG AA

At least 4.5:1 contrast ratio for normal text and 3:1 for large text.

WCAG AAA

7:1 contrast ratio for normal text, 4.5:1 for large text.

Always ensure color is not the only means of conveying information.

Quick Contrast Calculator

#123456

Contrast Ratio: 6.8:1

AAA Compliant

Colors should never be used alone to indicate success/failure states.

Code Integration

HTML + CSS

<button class="color-button"><span class="gradient-text">Click Me</span></button>

<style>
.color-button {
  background: hsl(217, 80%, 70%);
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.color-button:hover {
  transform: scale(1.02) translate3d(0, -2px, 0);
}

.gradient-text {
  background: linear-gradient(45deg, hsl(36, 100%, 50%), hsl(200, 100%, 50%));
  background-size: 400% 400%;
  animation: gradient 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

JavaScript Manipulation

// Dynamic color generation
function generatePalette(baseHue) {
  return {
    primary: `hsl(${baseHue}, 80%, 70%)`,
    secondary: `hsl(${(baseHue + 100) % 360}, 50%, 60%)`,
    tertiary: `hsl(${(baseHue + 160) % 360}, 60%, 55%)`,
    accent: `hsl(${(baseHue + 220) % 360}, 40%, 80%)`
  };
}

// Apply palette to document
const palette = generatePalette(217);
document.documentElement.style.setProperty('--primary', palette.primary);
document.documentElement.style.setProperty('--secondary', palette.secondary);

// Color animation
function rainbowEffect(elementId, speed = 1000) {
  const el = document.getElementById(elementId);
  let hue = 0;
  setInterval(() => {
    el.style.color = `hsl(${hue}, 100%, 50%)`;
    hue = (hue + 1) % 360;
  }, speed / 60);
}

Best Practices

Accessibility First

Prioritize contrast ratios and avoid relying on color alone to convey meaning. Always provide text alternatives for color-coded information.

Color Consistency
Maintain coherent color schemes based on brand identity. Use design systems to ensure consistency across your application.

Responsive Colors

Adapt colors based on user preferences and lighting conditions. Consider using CSS color functions to handle dynamic color adjustments.

Color Theory Documentation