Color Harmony
A fast, elegant web application for generating beautiful and precise color harmony palettes from a single base color.
I built Color Harmony to solve the complexity of calculating exact UI palettes mathematically. By using HSL color space transformations, it automatically provides comprehensive color relations—from Triadic to Split Complementary—all with zero external APIs and complete privacy running right in the browser.
The Goal
Creating robust color systems can often rely too heavily on "eyeballing" rather than mathematical precision.
Need For Precise
Scientific Palettes
Finding the perfect complementary or analogous colors across large design systems is an inexact science when done manually. Most free tools require sign-ups, are heavily layered with ads, or send color preferences to external APIs causing unnecessary latency.
Fast & Local
Geometric Logic
Built an interactive Canvas-powered color wheel that runs 100% locally. Using math formulas to adjust the Hue value, it instantly auto-calculates Complementary (180°), Analogous (±30°), Triadic (120°), and more, making the design process exceptionally fast.
Under the Hood
State Management
Leveraged React 19 to maintain lightning-fast state synchronization between the Hex inputs, the Canvas wheel, and the dynamic palette swatches.
Canvas Drawing
Utilized the native HTML Canvas API to draw the multi-layered HSL gradient wheel, capturing pixel data for interactive drag-and-drop color picking.
URL Syncing
Implemented hash-based URL synchronization so that color palettes are instantly bookmarkable and shareable without using any centralized database.
Premium Glass UI
Encapsulated the logic within a sleek Tailwind CSS v4 frosted-glass UI framework to deliver an engaging, app-like visual experience for the user.
The Result
Color Harmony functions as an indispensable pocket-tool for finding exact HSL geometric color pairings. The smooth native canvas rendering, coupled with instantaneous React 19 state updates and private client-side logic, empowers a friction-free design process.