Glassmorphic HSL Color Palette Generator

This Glassmorphic HSL Color Palette Generator is a production-grade design tool that combines advanced color theory logic with a modern, translucent UI. Unlike simple randomizers, it uses HSL (Hue, Saturation, Lightness) mathematics to generate mathematically harmonious schemes (Analogous, Triadic, Split-Complementary) while simultaneously calculating WCAG accessibility ratios in real-time.

Core Technique

The application is built using a “Clean Architecture” approach in Vanilla JavaScript, separating the logic into distinct services (ColorService, PaletteGenerator, StateManager).

1. Mathematical Harmony Engine

The core of the generation logic lies in manipulating the Hue ring. The PaletteGenerator calculates swatches based on the selected strategy. For example, a “Split Complementary” scheme takes the base hue and finds two colors adjacent to its opposite.

// Strategy for Split Complementary generation
split(baseHue, sat, lit, count, drift) {
  // Define angles: Base (0), and two opposites offset by 'drift'
  const angles = [0, 180 - drift * 2, 180 + drift * 2];
  
  return Array.from({ length: count }, (_, i) => ({
    // Use modulo 360 to keep the hue within the circle
    h: mod(baseHue + angles[i % 3], 360),
    s: sat,
    l: lit,
  }));
}

2. Real-time Contrast Calculation

To ensure accessibility, the app converts HEX values to RGB, calculates the Relative Luminance using the standard sRGB formula, and then determines the contrast ratio. This informs the UI whether to show “AA” or “AAA” badges.

function relativeLuminance({ r, g, b }) {
  // Normalize RGB values to 0-1 range and apply gamma correction
  const [rs, gs, bs] = [r, g, b].map(v => {
    v /= 255;
    return v <= 0.03928 
      ? v / 12.92 
      : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  // Standard luminance coefficients
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

3. Progressive CSS & Glassmorphism

The visual layer relies heavily on modern CSS. The background uses color-mix() with oklab interpolation for smoother gradients, wrapped in an @supports block for fallback. The “Glass” effect is achieved via backdrop-filter.

/* Progressive enhancement for background gradients */
@supports (background: color-mix(in oklab, white, black)) {
  body {
    background:
      radial-gradient(..., color-mix(in oklab, var(--c1) 55%, transparent), ...),
      /* ... layered gradients ... */
      linear-gradient(180deg, #070a12 0%, var(--bg-primary) 55%, #05070d 100%);
  }
}

Accessibility (A11y)

This component is A11y Ready and sets a high standard for tool accessibility.

• Contrast Badges: Automatically checks generated colors against white/black text to suggest the best foreground color.
• Keyboard Navigation: Includes custom shortcuts (Alt+R to randomize, Alt+C to copy), implemented via aria-keyshortcuts.
• Live Regions: Uses aria-live="polite" on the toast notifications to announce actions to screen readers.
• Semantic HTML: Proper use of <fieldset>, <legend>, <output>, and aria-labels on inputs.

Browser Support

The code uses standard JavaScript suitable for all modern browsers. The CSS utilizes CSS Color Module Level 5 (color-mix) and backdrop-filter.

While the core functionality (JavaScript logic) works in older browsers, the visual fidelity (gradients and color mixing) requires browsers from mid-2023 onwards. Fallbacks are provided for older engines.