A procedural color palette generator built in JavaScript.
This project explores color as a system rather than a set of isolated values — how contrast, harmony, and balance can be shaped intentionally rather than discovered by chance. The goal was to translate core principles of color theory into a constrained, repeatable framework that produces usable palettes.
Colors positioned opposite each other on the color wheel create the strongest perceptual tension — a useful starting point for building contrast into a system.
A baseline approach selects a seed color, derives its complement, and interpolates between the two to generate a range of intermediate values. While straightforward, this method tends to produce linear gradients that lack hierarchy and practical application.
To move beyond that, the tool shifts from purely interpolated outputs to structured palettes. Instead of treating all colors equally, it introduces roles — anchor, accent, and supporting tones — with controlled variation in lightness and saturation. This creates palettes that feel intentional, with enough contrast to be functional while maintaining overall cohesion.
Using perceptual color spaces such as OKHSL and OKLAB further reinforces this structure. By decoupling lightness from hue, the system maintains consistent perceived contrast across the palette, avoiding the uneven behavior typical of HSL-based interpolation.
Using perceptual color spaces such as OKHSL and OKLAB further reinforces this structure. By decoupling lightness from hue, the system maintains consistent perceived contrast across the palette, avoiding the uneven behavior typical of HSL-based interpolation.
This approach makes the output less about generating “nice gradients” and more about producing palettes that can be applied directly to UI, branding, or visual systems — where hierarchy, readability, and balance matter.
The same logic can be applied to existing brand colors, extending them into flexible systems that remain coherent across different contexts and use cases.
The tool below exposes these rules in a simplified, interactive form.
Type
Personal Project — Generative / Interactive Tool
Personal Project — Generative / Interactive Tool
Tools
JavaScript × HTML × CSS
JavaScript × HTML × CSS