Mixing 2 Colors in CSS with color-mix()

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

One Byte Explainer:

 
Maintaining color palettes with hard-coded values in CSS can be a burden. With color-mix(), developers can mix 2 colors with different percentages to obtain a new one. It can be handy when lighter, darker, or opaque versions of a brand color are needed.

Additional Context:

 
The simple usage of color-mix with percentages:
color-mix(in srgb, green %30, red 70%)
 
The sum of the percentages gives the alpha value:
color-mix(in srgb, green %30, red %30)
 
If one of the percentages is omitted, the sum will be 100%:
color-mix(in srgb, green %30, red)
 
If both the percentages are omitted, each one will be 50%:
color-mix(in srgb, green, red)

As of March 2024, color-mix() works across the latest browser versions.