Easily Create a Color Palette Using color-mix()

Hello 😀

In this article, I would like to try creating a color palette like this one using the CSS color-mix() function.

The color-mix() function is still an experimental feature.
Before using it in production, please check whether it is supported by your target browsers on sites like Caniuse.

What is color-mix()?

To put it simply, color-mix() is a CSS function that returns the result of combining two colors.

Well, seeing is believing, so let's take a look at a sample right away.

The percentages shown represent the mixing ratios of the two colors, and each result is displayed on the left.

Here are the parts to focus on in the code:

styles.css

.mixed-1 {
  background-color: color-mix(in srgb, blue 10%, red);
}

.mixed-2 {
  background-color: color-mix(in srgb, blue 30%, red);
}

.mixed-3 {
  background-color: color-mix(in srgb, blue, red);
}

.mixed-4 {
  background-color: color-mix(in srgb, blue 70%, red);
}

.mixed-5 {
  background-color: color-mix(in srgb, blue 90%, red);
}

color-mix() is used in the format color-mix(color interpolation method, color 1, color 2), and you can specify the proportion you want for each color. In the example shown earlier, you can see that by increasing the proportion of blue, the blue component of the resulting color becomes stronger.

Also, the color interpolation method refers to things like #ffffff or rgb(255, 255, 255) in the RGB color model, or hsl(0, 0%, 100%) in the HSL color model. In color-mix(), this is called colorspace, and you must specify one from srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, or oklch.

If you want to learn more about colorspace, this page is a great reference.

Creating a Color Palette

Now, let's try creating a color palette. As explained earlier, since we can adjust the proportions of the two colors being mixed, we can use this to generate colors in a gradient-like manner.

style.css

:root {
  --original-color: #04174f;
}

li:nth-child(1) div {
  background-color: color-mix(in srgb, var(--original-color) 10%, white);
}

li:nth-child(2) div {
  background-color: color-mix(in srgb, var(--original-color) 25%, white);
}

li:nth-child(3) div {
  background-color: color-mix(in srgb, var(--original-color) 50%, white);
}

li:nth-child(4) div {
  background-color: color-mix(in srgb, var(--original-color) 75%, white);
}

li:nth-child(5) div {
  background-color: color-mix(in srgb, var(--original-color) 100%, white);
}

By specifying a base color as shown above and mixing it with white while adjusting the proportions, you can easily generate a color palette.

Conclusion

What did you think? Knowing about color-mix() might make color generation and management a bit easier.

Thank you for reading until the end.