This example demonstrates the hue interpolation methods available to the color-mix() function. When using hue interpolation, the resulting hue is between the hue values of the two colors being mixed. The value will be different based on which route is taken around the color wheel.
For more information, see <hue-interpolation-method>.
CSS
The shorter hue interpolation method takes the shorter route around the color wheel, whereas the longer hue interpolation method takes the longer route. With increasing hue, the route starts with increasing values. With decreasing hue the value decreases. We mix two <named-color> values to create a series of lch() intermediary colors that differ based on which route is taken around the color wheel. The mixed colors include red, blue, and yellow with LCH hue values of approximately 41deg, 301deg, and 100deg, respectively.
To reduce code redundancy, we used CSS custom properties for both colors and for the interpolation method, setting different values on each <ul>.
ul:nth-of-type(1) {
--distance: longer; /* 52 degree hue increments */
--base: red;
--mixin: blue;
}
ul:nth-of-type(2) {
/* 20 degree hue decrements */
--distance: shorter;
--base: red;
--mixin: blue;
}
ul:nth-of-type(3) {
/* 40 degree hue increments */
--distance: increasing;
--base: yellow;
--mixin: blue;
}
ul:nth-of-type(4) {
/* 32 degree hue decrements */
--distance: decreasing;
--base: yellow;
--mixin: blue;
}
li:nth-child(1) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 100%,
var(--mixin)
);
}
li:nth-child(2) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 80%,
var(--mixin)
);
}
li:nth-child(3) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 60%,
var(--mixin)
);
}
li:nth-child(4) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 40%,
var(--mixin)
);
}
li:nth-child(5) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 20%,
var(--mixin)
);
}
li:nth-child(6) {
background-color: color-mix(
in lch var(--distance) hue,
var(--base) 0%,
var(--mixin)
);
}
Result
With longer hue the increments or decrements between colors will always be the same or larger than when using shorter hue. Use increasing hue or decreasing hue when the direction of the hue value change is more important than the length between values.