Color Interpolation

August 10, 2011

A smooth transition between two colors can be created by linearly interpolating the color coordinates. Interpolating between colors CA and CB can be written algebraically as

C(λ) = (1 - λ)CA + λCB, where 0 ≤ λ ≤ 1.

The result will vary depending on the color space used and whether the color is described in Cartesian coordinates or polar coordinates. Polar coordinates describe hue as an angle, so the path between two colors is different from the Cartesian path. This is very noticeable for complementary colors.

Color Spaces

The color spaces I have examined are:

sRGB
A color space constructed to model computer displays.
CIE 1931 XYZ
A color space constructed to model the eye’s response to color.
HSV, HSL, and HSI
Loosely defined transforms of an RGB color space mostly used for image analysis. I have applied the transforms to sRGB.
CIELAB, CIELUV
Uniform color spaces.
RLAB
A color appearance space for color reproduction in different media and surrounds.
CIECAM02
A color appearance space for color reproduction in different media and surrounds.

Color Gradients

All images are encoded with an embedded sRGB ICC profile and should be approximately accurate when viewed on most displays.

Cyan to pink interpolation.
Cyan to pink linear gradient in the sRGB color space.sRGB
Cyan to pink linear gradient in the CIE 1931 XYZ color space.CIE 1931 XYZ
Cyan to pink linear gradient in the sRGB HSV color space.HSVsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSV color space.HSVsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSL color space.HSLsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSL color space.HSLsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSI color space.HSIsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSI color space.HSIsRGB (Cartesian)
Cyan to pink linear gradient in the CIELAB color space.CIELAB L*a*b*
Cyan to pink linear gradient in the CIELAB polar color space.CIELAB L*Cabhab
Cyan to pink linear gradient in the CIELUV color space.CIELUV L*u*v*
Cyan to pink linear gradient in the CIELUV polar color space.CIELUV L*Cuvhuv
Cyan to pink linear gradient in the RLAB Cartesian color space.RLAB LRaRbR
Cyan to pink linear gradient in the RLAB polar color space.RLAB LRCRhR
Cyan to pink linear gradient in the CIECAM02 color space.CIECAM02 JCh
Cyan to pink linear gradient in the CIECAM02 Cartesian color space.CIECAM02 JaCbC
Red to green interpolation.
Cyan to pink linear gradient in the sRGB color space.sRGB
Cyan to pink linear gradient in the CIE 1931 XYZ color space.CIE 1931 XYZ
Cyan to pink linear gradient in the sRGB HSV color space.HSVsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSV color space.HSVsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSL color space.HSLsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSL color space.HSLsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSI color space.HSIsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSI color space.HSIsRGB (Cartesian)
Cyan to pink linear gradient in the CIELAB color space.CIELAB L*a*b*
Cyan to pink linear gradient in the CIELAB polar color space.CIELAB L*Cabhab
Cyan to pink linear gradient in the CIELUV color space.CIELUV L*u*v*
Cyan to pink linear gradient in the CIELUV polar color space.CIELUV L*Cuvhuv
Cyan to pink linear gradient in the RLAB Cartesian color space.RLAB LRaRbR
Cyan to pink linear gradient in the RLAB polar color space.RLAB LRCRhR
Cyan to pink linear gradient in the CIECAM02 color space.CIECAM02 JCh
Cyan to pink linear gradient in the CIECAM02 Cartesian color space.CIECAM02 JaCbC
Green to black interpolation.
Cyan to pink linear gradient in the sRGB color space.sRGB
Cyan to pink linear gradient in the CIE 1931 XYZ color space.CIE 1931 XYZ
Cyan to pink linear gradient in the sRGB HSV color space.HSVsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSV color space.HSVsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSL color space.HSLsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSL color space.HSLsRGB (Cartesian)
Cyan to pink linear gradient in the sRGB HSI color space.HSIsRGB
Cyan to pink linear gradient in the Cartesian sRGB HSI color space.HSIsRGB (Cartesian)
Cyan to pink linear gradient in the CIELAB color space.CIELAB L*a*b*
Cyan to pink linear gradient in the CIELAB polar color space.CIELAB L*Cabhab
Cyan to pink linear gradient in the CIELUV color space.CIELUV L*u*v*
Cyan to pink linear gradient in the CIELUV polar color space.CIELUV L*Cuvhuv
Cyan to pink linear gradient in the RLAB Cartesian color space.RLAB LRaRbR
Cyan to pink linear gradient in the RLAB polar color space.RLAB LRCRhR
Cyan to pink linear gradient in the CIECAM02 color space.CIECAM02 JCh
Cyan to pink linear gradient in the CIECAM02 Cartesian color space.CIECAM02 JaCbC

Conclusion

I prefer CIELAB L*a*b* as it provides a uniform transition without introducing additional hues. But the circumstances of each specific application has to be considered fully.

References

  1. A Standard Default Color Space for the Internet - sRGB, M. Stokes, M. Anderson, S. Chandrasekar, R. Motta 1996. http://www.color.org/sRGB.xalter
  2. HSL and HSV, Wikipedia. http://en.wikipedia.org/wiki/HSL_and_HSV
  3. CIE 1931 color space, Wikipedia. http://en.wikipedia.org/wiki/CIE_1931_color_space
  4. Lab color space, Wikipedia. http://en.wikipedia.org/wiki/Lab_color_space
  5. CIELUV, Wikipedia. http://en.wikipedia.org/wiki/CIELUV
  6. CIECAM02, Wikipedia. http://en.wikipedia.org/wiki/CIECAM02
  7. Color Appearance Models, 2nd Edition, M. Fairchild 2005. ISBN 0-470-01216-1.
  8. Digital Image Processing, 2nd Edition, R. Gonzales, R. Woods 2002. ISBN 0-13-094650-8.
  9. Color Science, 2nd Edition, G. Wyszecki, W.S. Stiles 2000. ISBN 978-0-471-39918-6.

© 2024 Mats Mattsson