This topic contains the following sections:
A web demo of this example can be found here.
Make It Colorful includes an example scene which will allow you to explore the color spaces and their lerping behavior in more depth.
You may select which color space you want to work with using the toggle buttons along the top. Drag the hue spectrum slider to choose a base color. The lerp source and target can be activated at the bottom left and bottom right, respectively. When the source or target is active, that end of the spectrum will be set whenever you select a specific color.
To select a color, you may click (or click and drag) anywhere within the slice of the color space on the right. For the RGB, CMY, and CMYK color spaces, you make alternatively use the sliders that appar on the left when one of those color spaces is selected.
For each of the hue-based color spaces, a 3D model of that color space will be shown on the left. The angle around the cylindrical shape indicates hue. The distance from the central vertical axis indicates vividness (either chroma or saturation), while the height indicates luminance (value, lightness, or luma). A wedge is cut out at the front revealing the slice that is visible on the right. Changing the hue will rotate the colors around the vertical axis, and consequently will change the coloration of the slice where the wedge is cut out.
Hue-based color spaces also include some options for how the hue is to be interpolated. By default it figures out which direction around the color wheel is shorter and interpolates in that direction. If you would like to force it to interpolate forward or backward, you may select the corresponding toggle at the bottom instead.
If you want to just pull vibrant colors directly from the one-dimensional color wheel, it's as simple as constructing an instance of ColorHSV with a hue in the range [0, 1) and a saturation and value both equal to 1.
Color c = new ColorHSV(0.37823f, 1, 1);
Inversely, if you just want to figure out the hue of a color and ignore everything else, simply convert to any of the hue-based color spaces and pull its hue field.
float hue = ((ColorHSV)color).h;
Like with hue, if you are most interested in the apparent luminance of a color, you can find out what it is by converting to one of the luma-based color spaces and pulling the luma field.
float luma = ((ColorHCY)color).l;
If you want to force one color to have a matching apparent luminance of another color, you can figure out the hue and chroma of the first color, the luma of the second color, and then construct a third color using those three values. The chroma may need to be adjusted for it to be convertible to a valid RGB color, so the color space bound functions can come in handy here.
var hcy = (ColorHCY)firstColor; hcy.y = ((ColorHCY)secondColor).y; hcy.c = Mathf.Min(hcy.c, ColorHCY.GetMaxChroma(hcy.h, hcy.y)); var rgb = (Color)hcy;
If you'd rather less then potential change in chroma in case of an out-of-range color, you can use GetNearestValid instead. This will adjust both chroma and luma if necessary, compromising between the two.
var hcy = (ColorHCY)firstColor; hcy.y = ((ColorHCY)secondColor).y; var rgb = (Color)hcy.GetNearestValid();
Another useful method of forcing colors to match on a single component value is known as "K-lock", which is forcing the key component of the the CMYK color space to a constant value while the other components are free to change. This is as easy to implement as converting to CMYK, setting the key, and converting back.
var cmyk = (ColorCMYK)color; cmyk.k = fixedKey; color = cmyk;
When blending from one color to another during an animation, you may want to use a different color space to do the blend, especially if you're encountering unwanted muddy greys in the middle of the blend, or noticing uneven changes in apparent luminance. You can achieve this by usig the following during each frame of animation (as an example, this is applied to a sprite renderer):
spriteRenderer.color = ColorHCY.Lerp(startColor, finalColor, animTime / animDuration);