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.
Top comments (0)