Color Input Debounce Demo

Interactive demonstration comparing color input performance with and without debounce.

Two color inputs side-by-side: one updates state immediately, the other uses debounce. Each input performs heavy computations on every change:

• Color space conversions (RGB, HSL, LCH)
• Palette generation (complementary, triadic, analogous)
• Color variations (tints, shades, tones)
• Contrast ratio calculations
• Background color updates

The update counter shows the performance difference: non-debounced triggers on every change, debounced batches updates.

http://metaory.github.io/color-input-debounce-demo/

• React 19
• Vite
• Vanilla JavaScript

npm install
npm run dev

npm run build

MIT