How can I invert color using CSS?

Question

HTML

    
inverted color

CSS

div {
    background-color: #f00;
}
p { 
    color:         


        

Answer 1

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%);
}

    
inverted color