Colour Scheme Generator

This colour scheme generator allows designers to build structurally cohesive palettes tailored to specific design requirements. Users can shift from fully randomized generation to strict colour theory harmonies, including analogous, monochromatic, complementary, and triadic relationships. Additionally, contrast controls dictate the variance in lightness and saturation across the generated scheme. Each colour block permanently displays its approximate human-readable name alongside its hex code. The interface provides granular control, enabling users to lock down specific anchor colours, type in manual hex overrides, adjust the total count via the slider, and instantly copy values to the clipboard.

The logic is powered by vanilla JavaScript operating entirely in the browser. When a harmony generation event triggers, the algorithm checks the state array for a locked colour to establish a foundational HSL (Hue, Saturation, Lightness) anchor. Crucially, unlocked colours receive controlled randomization on every generation click. This ensures that even when an anchor colour is locked, the surrounding palette continues to dynamically cycle through fresh, mathematically harmonious variants rather than remaining static. The script then calculates a Euclidean distance matrix against a hardcoded dictionary to assign the closest standard human-readable name to each generated hex code.

A technical limitation of this client-side approach is the inherent subjectivity of colour naming and the mathematical rigidity of standard HSL harmony models. The named colours are based on nearest-neighbour matching to a limited dictionary, meaning highly saturated or exceptionally dark shades might default to broad categorical names rather than precise industry nomenclatures. Furthermore, mathematical HSL shifts do not account for human perceptual differences in colour intensity; a mathematically correct triadic yellow might visually overpower its blue counterpart. Users should manually fine-tune the lightness of generated anchors when preparing palettes for accessible web production.