# Color Interpolation
> Smooth color transitions between multiple color values using Svelte Motion. Demonstrates interpolation across the full color spectrum.
**Source:** [https://motion.svelte.page/examples/color-interpolation](https://motion.svelte.page/examples/color-interpolation)
**Markdown mirror:** [https://motion.svelte.page/examples/color-interpolation.md](https://motion.svelte.page/examples/color-interpolation.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: rgb vs hsl.
The browser`s Web Animations API and motion`s `animate()` interpolate colours differently. Watch them side by side: the left swatch sweeps through hue (HSL), the right takes a straight line in RGB space.
**Metadata:** tag: `COLOR` | pattern: `interpolation comparison`
### Notes
- Same start (`#ff0088`) and end (`#0d63f8`) colour for both swatches — only the interpolation path differs.
- The left swatch (WAAPI) sweeps through HSL space, so the midpoint takes a detour through orange / green / cyan before reaching blue. The right swatch (motion) walks straight through RGB space — magenta dims, blue brightens, no hue detour.
- Pure motion call: `animate(element, {backgroundColor: […]}, …)` binds an imperative animation lifecycle to the element. The returned controls let you `cancel()` on cleanup so the animation doesn't outlive the component.
### Source
#### Default.svelte
Source file: [src/lib/examples/color-interpolation/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/color-interpolation/demos/Default.svelte)
```svelte