Exploring Algorithmic Design with Color Theory

This project explores the concept of using Pantone's Color of the Year as algorithmic input to generate adaptive web graphics through complimentary color algorithms. By leveraging the cultural significance and design influence of Pantone's annual color selection, we create dynamic visual systems that respond to this influential design trend.

The core algorithm takes a hex color value (like Pantone's Cloud Dancer #F0EEE9) and generates a harmonious 8-color palette using established color theory principles. The system converts between color spaces and applies mathematical transformations to create complementary, analogous, and split-complementary colors.

function generateComplementaryColors(baseHex) {
  const baseHSL = hexToHSL(baseHex);
  const colors = [];

  // Enhanced visibility settings
  const targetSaturation = 70; // Higher saturation for visibility
  const targetLightness = 40;  // Darker for contrast

  // Complementary color (180° opposite)
  const complementary = (baseHSL.h + 180) % 360;
  colors.push(HSLToHex(complementary, targetSaturation, targetLightness));

  // Analogous colors (±30° from base)
  const analogous1 = (baseHSL.h + 30) % 360;
  const analogous2 = (baseHSL.h - 30 + 360) % 360;
  colors.push(HSLToHex(analogous1, targetSaturation, targetLightness));
  colors.push(HSLToHex(analogous2, targetSaturation, targetLightness));

  // Split-complementary colors (150° and 210° from base)
  const splitComp1 = (baseHSL.h + 150) % 360;
  const splitComp2 = (baseHSL.h + 210) % 360;
  colors.push(HSLToHex(splitComp1, targetSaturation, targetLightness));
  colors.push(HSLToHex(splitComp2, targetSaturation, targetLightness));

  return colors;
}

The algorithm relies on color space conversion utilities that transform hex colors to HSL (Hue, Saturation, Lightness) for mathematical manipulation, then convert back to hex for web display.

function hexToHSL(hex) {
  hex = hex.replace(/^#/, "");
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }

  return { h: h * 360, s: s * 100, l: l * 100 };
}

Through this experimental approach, we examine how cultural design trends can be translated into computational processes, creating a bridge between human aesthetic judgment and algorithmic generation. The resulting system showcases the potential for adaptive design systems that respond to external cultural inputs.

The implementation demonstrates real-time color adaptation capabilities, where web graphics and interface elements dynamically adjust their color schemes based on the algorithmic interpretation of the Pantone selection. This creates a living design system that evolves with cultural color trends.

This concept opens up possibilities for more responsive and culturally-aware design systems, where aesthetic decisions can be influenced by external trends and preferences while maintaining design coherence through algorithmic consistency.