csscolors

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?


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>