What you need to know about CSS Color Interpolation | CSS tricks

Color interpolation, loosely spoken, is the process of determining the colors between two color points. This allows us to make unique colors, beautiful palettes, better gradients and flexible transitions.

I recently wrote a guide for CSS color functions, but did not have the chance to explain color interpolation in a great depth – which is a shame, because it enables us to make cool demos like this:

Have you noticed how oklch(80% 0.3 340) interpolates for oklch(80% 0.3 60)than oklch(80% 0.3 180)than oklch(80% 0.3 270) and back to oklch(80% 0.3 340) Use CSS -animation? Well, I did! And that is just a powerful use of interpolation.

Where can we use color interpolation?

Again, color interpolation is everywhere in 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:

 = in [  |  ? ]

 =  | 
   = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
   = hsl | hwb | lch | oklch
   = [ shorter | longer | increasing | decreasing ] hue

Yes, that is a complicated definition, but if we continue and inspect how this syntax works color-mix()For example, we would have something like that:

.element{
  color: color-mix(in lch longer hue, red, blue);
}

The CSS color-mix() Function offers a way for us to mix different colors in every color space, which is everything that color interpolation is about: from color to another.

Our most important focus is the in lab longer hue Share, indicating how color-mix() does the interpolation. This actually says: “Hey CSS, interpol the following colors in the Cielch color space with the help of a longer tintbog.” Yes, the in lab Part means that the interpolation is done in Cielch, one of the many CSS color spaces, but we will come longer hue Means exactly later.

Just remember:

• The in Keyword always precedes the interpolation method for color.
• The second value is the color space that is used for mixing.
• The third value is an optional shade interpolation method that ends with the hue Keyword.

This same syntax appears in all gradient functions, where colors are gradually interpolated to get a smooth gradient. See how adjusting the gradient with the color interpolation syntaxis can give us a completely new gradient:

.element {
  background: linear-gradient(in oklch longer hue 90deg, magenta, cyan);
}

However, let’s go back a bit. Interpolation can occur in two important color spaces: rectangular And polar.

Rectangular color spaces

Rectangular color spaces represent colors using Cartesian coordinates on a three -dimensional plane, which you may already know as the X (horizontal), Y (vertical) and Z (depth) axes on a graph.

Rectangular color spaces are like the same type of graph, but is a card with color points instead. For example, the SRGB color space has three axes, responsible for the amount of redness, bluity and greenness of a color.

Polar color spaces

Polar color spaces also represent colors in a three -dimensional surface, just like rectangular color spaces, but it has the shape of a cylinder instead of a rectangular. A color point is displayed by three values:

• The height from the point to the middleUsually assigned to lightness or brightness.
• The Radial distance from the middleUsually assigned to Chroma or saturation.
• The Angle around the middleassigned to the shade.

What makes polar color spaces unique is the shade corner. Because it is a corner and they are cyclical (such as a continuous circle), we have more options for how it can be interpolated.

Tint interpolation

Think of tint interpolation such as finding the distance between the two times on a clock.

Let’s assume that the clock can go clockwise (forward) or against the clock in (backwards) in time.

The minute is 10 minutes (2). If we want to take the shortest distance between 50 minutes (10), we would make a turn against the clock, as go back in time, because that is shorter than to move forward with the clock.

That’s because if you have the longer Route, you have to go through 3, 4, 5, etc. to 10. shorter Route against the clock) Route, you would reach 10 in less time (15 minutes).

Tint interpolation works in the same way. It is a CSS algorithm that determines how you want tint colors to be mixed in polar color spaces and the direction you want to take between two tint points.

There are four types of tint interpolation in CSS. Let’s go through that next.

shorter And longer

The shorter (standard value) Hue interpolation method easily takes the shorter Route, while the longer Tint interpolation method takes the longer Route when mixing colors between two tint points.

Imagine that you combine two shade values ​​red (0deg) and blue (240deg). There are two ways to do this:

• Go the longer route (distance from 240deg).
• Go the shorter route (distance from 120deg).

When shorter is used, the browser takes the shorter Route (120deg). Different if longer is used, the browser takes the longer Route (240deg).

This offers a beautiful and unique mix of colors, depending on your preferences. Tint -interpolation is useful in creating flexible color transitions and gradients, so that the websites give a lot of life colour.

The shorter or longer interpolation, depending on the shortest or longest distances between two tint value points, can either go clockwise or against the clock. We can also set this automatically without actually using one of these keywords, which we will then look at.

increasing And decreasing

Stick to our clock analogy, the increasing Tint interpolation method is as the movement of the minutes hand from 2 to 10, always in the clock. Even if the final value is 1, it would still go clockwise and almost take a full turn.

However, if the TINT interpolation method is set to decreasingThe minutes hand always goes against the clock. As the Specification says” ‘[d]Opping to the difference between the two corners, this looks either the same as shorter or so longer. “

When the corner goes from 20deg Unpleasant 50deg use of the increasing Tint interpolation value, the value will move clockwise by 20deg Unpleasant 50degDisplaying the colors in between. However, if the interpolation method is set to the shade decreasingThen the algorithm takes the value of 20deg Unpleasant 50deg in the direction of the clock.

Since increasing means that the minute hand of the clock is constantly progressing, this means that the value can reach 360degA complete circle. When the corner reaches 360degthe reset back to 0deg Until it reaches the next point. But if decreasing reach 0degThen it is reset 360degKeeping the tinting change consistent.

How is this useful?

Yes, all this theory is great: we can use interpolation to get the intermediary color (s) between two colors and make new types of colors, but how can we actually use it to create better color experiences in CSS?

Distances

Color interpolation is often done in all CSS gradient functions. Take the conic-gradient() Function, making it easy to create a smooth transition of colors that rotate around a center:

background: conic-gradient(
  from 0deg,
  oklch(70% 0.3 0deg),
  oklch(70% 0.3 120deg),
  oklch(70% 0.3 240deg),
  oklch(70% 0.3 360deg)
);

Note how the shade mixes smoothly between each color stop point? It’s beautiful.

Color mixing

Read about color-mix() In the CSS tricks, Almanac gives you a basic idea of ​​how this is done, but if you are the way I am and want the raw code, it is here:

/* First Box */
background-color: color-mix(in oklch, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);

/* Second Box */
background-color: color-mix(in oklch longer hue, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);

A big advantage of color-mix() Is that you get the opportunity to mix colors in different color rooms in a different color space, producing a unique color. Again, it moves from one color to the other and the direction we use for mixing colors is important.

Animation

We can animate the transition between colors! So instead of mixing two specific points, we can view the color movement between all colors between the two points!

@keyframes bg-shift {
  from {
    background-color: oklch(30% 0.3 20deg); /* dark pink */
  }
  to {
    background-color: oklch(70% 0.3 200deg); /* Cool bluish */
  }
}

References