Color Hues

Overview

Color Hues is a real-time color system generator built for modern UI development. It enables designers and developers to generate, preview, and export fully customizable design systems—including color palettes, gradients, and typography—in milliseconds.

The core focus of the project was to create a low-latency, highly interactive system where every change (e.g. dragging a color picker) is reflected instantly across the entire UI without compromising performance or accuracy.

System Design & Architecture

Color Hues is built as a client-first, computation-heavy UI system:

Client (Next.js)

• Handles all palette generation and transformations
• Drives real-time preview updates
• Exports configurations for multiple ecosystems

State Layer (Zustand)

• Lightweight global store for palette state
• Fine-grained subscriptions to avoid unnecessary re-renders
• Enables instant propagation of updates across components

Rendering Layer

• Dynamic UI driven entirely by derived state
• Visual preview acts as a live representation of the generated design system

---

Key Engineering Decisions

1. Real-Time State Synchronization

Decision: Use Zustand instead of heavier state solutions.

Why:

• Frequent updates (color dragging) require minimal overhead
• Zustand's lightweight subscriptions handle this without overhead.

Outcome:

• Near-instant UI updates with minimal re-render cost

2. Client-Side Color Computation

Decision: Perform all color calculations in the browser.

Why:

• Eliminates API latency
• Enables true real-time interactivity

3. Derived State Architecture

Decision: Compute palettes, gradients, and harmonies as derived values.

Why:

• Prevents duplication of logic
• Ensures consistency across previews and exports

Outcome:

• Single source of truth for all generated outputs
• Easier extensibility for new formats and features

4. Accessibility as a First-Class Constraint

Decision: Integrate contrast checking directly into the generation pipeline.

Why:

• Accessibility is often an afterthought in design tools
• Real-time feedback improves usability and correctness

Implementation:

• Contrast ratio calculations during palette generation
• Visual indicators for accessible/inaccessible combinations

---

Challenges

Ensuring Mathematical Correctness

Color harmony generation requires precise calculations.

Solution:

• Built reusable utility functions for color space conversions
• Standardized transformations for harmony rules (complementary, analogous, etc.)

Keeping Preview and Export in Sync

Generated themes must match exactly across UI and exported configs.

Solution:

• Centralized generation logic
• Shared transformation pipeline for preview and export

---

Impact

• Sub-16ms updates during continuous color input
• Single source of truth powers both the live preview and all export formats
• Eliminates manual palette work for developers

Learnings

This project focused heavily on performance-first frontend engineering:

• Designing systems for high-frequency updates
• Managing derived state efficiently
• High-frequency UI updates demand fine-grained state architecture
• Tools that bridge design and dev workflows are genuinely hard to get right