How can I get the value of the result of color-mix
two colors?
I need to use a hard-coded value for browsers that do not support the color-mix
feature.
How can I get the value of the result of color-mix
two colors?
I need to use a hard-coded value for browsers that do not support the color-mix
feature.
2
Answers
You can do it with
color-mix()
:color-mix()
Example:
I’m not aware of a SASS function that directly corresponds to the CSS
color-mix
function but is performed at compile-time, though other functions exist for color manipulation. You could look into other CSS preprocessor tools that can transpile modern CSS into a syntax compatible with older browsers, but I don’t know one myself (and exchanging tool recommendations is beyond the scope of this site).Otherwise, if you just need to do it for a few colors you can use JavaScript in your browser console to run
getComputedStyle(element).backgroundColor
which should return the color assigned to the given element. This will likely return the color in the format passed to the color-mix CSS function.