# Creating color palettes with the CSS color-mix() function

DevFeed: [Creating color palettes with the CSS color-mix() function](<https://devfeed.tech/articles/creating-color-palettes-with-the-css-color-mix-function-4030.md>)

Original publisher: [Read original article](<https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/>)

Author: michelle-barker

Published: 2024-03-08T00:00:00Z

Content type: article

Language: en

Sources: [MDN Blog](<https://devfeed.tech/sources/mdn-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [article](<https://devfeed.tech/tags/article.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [examples](<https://devfeed.tech/tags/examples.md>), [how-to](<https://devfeed.tech/tags/how-to.md>)

## AI overview

This article explains how to use the CSS color-mix() function to create color palette variations. It covers mixing colors, interpolation spaces, percentage normalization, alpha effects, and using white or black to create lighter or darker variations. It also shows how custom properties can make these colors reusable in code.

## Source excerpt

Working with colors on the web just got more interesting! In this article, we'll explore how to use the CSS color-mix() function to create variations in color palettes.