Color Theory

Create stunning color combinations that tell stories

Interactive Color Exploration

What is Color Theory?

HSL & RGB

Understanding hue, saturation, lightness, and RGB values is fundamental to creating vibrant digital color schemes

Color Wheels

Learn to use complementary, analogous, and triadic color schemes to create visual harmony in your designs.

Accessibility

Create color combinations that meet accessibility standards and work for all users including those with color vision deficiencies.

Color Generator Code

// Generate random HSL color function
function getRandomColor() {
  const h = Math.floor(Math.random() * 360);
  const s = Math.floor(Math.random() * 50 + 40) + '%';
  const l = Math.floor(Math.random() * 30 + 30) + '%';
  return `hsl(${h}, ${s}, ${l})`;
}

// Update color palette
function shuffleColors() {
  const colors = document.querySelectorAll('.color-swatch');
  colors.forEach(card => {
    const bg = `radial-gradient(circle, ${getRandomColor()} 0%, ${getRandomColor()} 100%)`;
    card.style.background = bg;
  });
}