What You Need to Know About CSS Color Interpolation | CSS-Tricks

"Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows us to create unique colors, beautiful palettes, better gradients, and smooth transitions. I recently wrote a Guide to CSS Color Functions but didn't have the chance to explain color interpolation in any great depth - which is a shame, since it allows us to create cool demos like this one:"

"Again, color interpolation is all over CSS. These properties and functions support color interpolation either through direct mixing, gradients, or transitions: In gradients and the color-mix() function, we even have a formal syntax for color interpolation: <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ] <color-space> = <rectangular-color-space> | <polar-color-space> <rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 <polar-color-space> = hsl | hwb | lch | oklch <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue"

"Yes, that's a convoluted definition, but if we go ahead and inspect how this syntax works in color-mix(), for example, we would have something like this: .element{ color: color-mix(in lch longer hue, red, blue); } The CSS color-mix() function provides a way for us to mix different colors in any color space, which is all what color interpolation is about: going from color to another."

Color interpolation determines intermediate colors between two color points to create palettes, gradients, smooth transitions, and animated color changes. CSS exposes color interpolation through gradients, transitions, and the color-mix() function. The syntax distinguishes rectangular color spaces (srgb, display-p3, lab, oklab, etc.) and polar color spaces (hsl, hwb, lch, oklch) and adds hue-interpolation methods (shorter, longer, increasing, decreasing). Specifying a color space and hue method controls angular interpolation and mixing behavior. Using appropriate color spaces and hue directives produces perceptually smoother mixes and avoids artifacts when animating or blending colors across gamuts.

Read at CSS-Tricks