The perceptual path problem
When CSS transitions between two hex values, the browser interpolates through RGB space — each channel moves linearly from its start value to its end value. This is mathematically simple but perceptually unpredictable. A transition from a warm tan to a cool gray through RGB space may pass through a muddy olive or an unexpected brown at the midpoint, because the R, G, and B channels are moving at different rates. A more reliable approach is to transition in a perceptually uniform space — either HSL with hue locked and lightness transitioning, or a CSS color-mix() call with explicit interpolation settings. For design tokens, this means writing transitions as CSS custom property swaps with a transition property on the relevant element, rather than animating the hex value directly.