{"id":3020,"date":"2022-04-07T04:54:44","date_gmt":"2022-04-07T04:54:44","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3020"},"modified":"2023-06-12T14:32:04","modified_gmt":"2023-06-12T14:32:04","slug":"css-tutorial-mixing-colors-in-pure-css","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-mixing-colors-in-pure-css\/","title":{"rendered":"CSS Tutorial – Mixing Colors in Pure CSS"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Red + Blue = Purple\u2026 right? Is there some way to express that in CSS? Well, not easily. There is a\u00a0proposal draft for a\u00a0color-mix<\/code>\u00a0function<\/a>\u00a0and\u00a0some degree of interest<\/a>\u00a0from Chrome, but it doesn\u2019t seem right around the corner. It would be nice to have native CSS color mixing, as it would give designers greater flexibility when working with colors. One example is to create tinted variants of a single base color to form a design palette.<\/p>\n

But this is CSS-Tricks so let\u2019s do some CSS tricks.<\/p>\n

We have a\u00a0calc()<\/code>\u00a0function in CSS\u00a0for manipulating numbers.<\/em>\u00a0But we have very few ways to operate directly on colors, even though some color formats (e.g.\u00a0hsl()<\/code>\u00a0and\u00a0rgb()<\/code>) are based on numeric values.<\/p>\n

Mixing colors with animation<\/h2>\n

We can transition from one color to another in CSS. This works:<\/p>\n

div {\r\n  background: blue;\r\n  transition: 0.2s;\r\n}\r\ndiv:hover {\r\n  background: red; \r\n}<\/pre>\n
And here\u2019s that with animations:<\/p>\n
div {\r\n  background: blue;\r\n  transition: 0.2s;\r\n}\r\ndiv:hover {\r\n  animation: change-color 0.2s forwards;\r\n}\r\n\r\n@keyframes change-color {\r\n  to {\r\n    background: red;\r\n  }\r\n}<\/pre>\n
This is an keyframe animation that runs infinitely, where you can see the color moving between red and blue. Open the console and click the page \u2014 you can see that even JavaScript can tell you the current color at any exact point in the animation.
\n