[css] How can I invert color using CSS?

HTML

<div>
    <p>inverted color</p>
</div>

CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

Is there any way to invert the p color with CSS?

There is color: transparent; why not color: invert; even in CSS3?

This question is related to css colors

The answer is


I think the only way to handle this is to use JavaScript

Try this Invert text color of a specific element

If you do this with css3 it's only compatible with the newest browser versions.


Here is a different approach using mix-blend-mode: difference, that will actually invert whatever the background is, not just a single colour:

_x000D_
_x000D_
div {_x000D_
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);_x000D_
}_x000D_
p {_x000D_
  color: white;_x000D_
  mix-blend-mode: difference;_x000D_
}
_x000D_
<div>_x000D_
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>_x000D_
</div>
_x000D_
_x000D_
_x000D_