Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project?
I’ve been exploring using the relatively new CSS color-mix() function for this purpose. It’s been fun to see the different palette variations I could generate! In this article for MDN we’ll explorer how color-mix() can be a game-changer for your design process.
Read the article on MDN
