Dynamic Color System

Overview

Theme changes kept breaking consistency: every new character/UI tint required manually rebuilding highlight, base, and shadow colors. I designed and built a browser-based Dynamic Color System that samples a reference image and applies the same highlight/midtone/shadow relationship to any new base color (so themes stay coherent across UI states and motion).

Role

• Interaction design (sampling, direct manipulation, live preview)
• Color system logic (highlight/base/shadow deltas in LAB/HSL)
• Front-end prototyping (HTML/CSS/JS)
• Micro-interactions for clarity (hover/press states, instant feedback)
• Export workflow for real reuse (ACO + PDF spec)

Process / Approach

• Mapped the manual workflow (eyedrop → hand-tune → document → repeat) and turned it into a repeatable system.
• Built three core flows: sample from an image → generate a palette from a new base → save options as color cards.
• Implemented LAB/HSL switching so designers can choose perceptual accuracy (LAB) or familiar controls (HSL).
• Added export paths (ACO swatches + PDF) so the output plugs into Adobe tools and review/handoff docs.

Result

Reduced palette creation from a manual, error-prone process to a fast repeatable workflow, improving consistency across themed UI and motion studies. The tool outputs reusable color cards and exportable specs, making theme changes easier to review, share, and apply without deriving relationships each time.