Question 204451 in CSS Question posted in
Some basic documentation can be found here.

CSS color-mix result

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.

Tags:

2

Answers


  1. 0

    You can do it with color-mix():

    color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

    color-mix()

    Example:

    body{
background:color-mix(in lch, red, blue);
}
    Login or Signup to reply.
  2. 0

    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.

    document.write(getComputedStyle(document.body).backgroundColor);
    body {
  background: color-mix(in lch, red, blue);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search