How can I invert color using CSS?

colors, css

Solution

Add the same color of the background to the paragraph and then invert with CSS:

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

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

Problem

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?

Original source

Related problems