Measurements & formulas

Color interpolation

Functionally calculating a color value in between two known colors. Color interpolation is included in most color libraries, and is linear by default.

The known colors, desired result, choice of color space, and intended use for the color are important factors in color interpolation.

Color interpolation is conceptually similar to color mixing.

Example

Choose two colors to interpolate between. Gradients will display all colors interpolated between them (within the sRGB gamut).

lab
jab
oklab
rgb
lch
jch
oklch
hsluv
hsl
hsv
xyz
p3
hwb
ictcp
jzazbz
jzczhz
rec2020

How it affects UI design

In most cases, use cartesian color spaces for interpolating between monochromatic colors.

In most cases, use cylindrical transformations of a color space for interpolating between multi-hue, or analogous colors.

Interpolation in a uniform color space will provide colors that are mathematically based on models of human color perception.

Scientific models of human perception of color are not necessarily reflective of aesthetic. Finding proper interpolation paths and color spaces is equal parts art and science. Don't rely on color space interpolation to create aesthetic and perceptually balanced color out-of-the-box.

Linear interpolation does not always provide the best colors. Use color tools that provide curves or smoothing to refine interpolation paths.

There is no single color space that is best. Experiment to find the best result with your colors.