Color

CSS Color
Categories:
Tags:

currentColor

section 1
section 2
section 3

All the section color is the currentColor. When we change the color of the section 2 to the blue, then the currentColor of the section 3 will update to the blue too.

<style>
  .test-current-color {
    border: 1px solid #000;
    padding:5px;
    color: currentColor;
  }
  .test-section-2 {
    color: blue;
  }
</style>

<div class="test-current-color test-section-1">
  section 1
  <div class="test-current-color test-section-2">
    section 2
    <div class="test-current-color test-section-3">
      section 3
    </div>
  </div>
</div>

change color of SVG images from <img> tag

<style>
  .img-red {
      filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
  }

  .img-purple {
      filter: invert(5%) sepia(78%) saturate(6858%) hue-rotate(276deg) brightness(97%) contrast(101%);
  }

  .img-blue {
      filter: invert(12%) sepia(63%) saturate(6234%) hue-rotate(246deg) brightness(87%) contrast(156%);
  }
</style>


<img width="100" src="./images/color-svg.svg" />
<img class="img-purple" width="100" src="./images/color-svg.svg" />
<img class="img-blue" width="100" src="./images/color-svg.svg" />
<img class="img-red" width="100" src="./images/color-svg.svg" />

Reference

Filter Color