CSS color value currentColor

on Apr 1, 2016

CSS property color can have a special value currentColor. Its computed value is same as the computer value of color property. One possible use case if to specify fill color value in SVG based on current color.

Examples – color currentColor

In the following code, CSS property color can be changed to the following values

red
green
orange

<style>
div {color:red;}
</style>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <rect width="100" height="100" style="fill:currentColor" />
    <text x="30" y="60" style="font-size:36px;fill:white;">
       IH
    </text>
</svg>
</div>

color refresh

try it online