How to mix colors in CSS?

Question

I have the following code:

.reviewed {
  background-color: rgba(228, 225, 219, 1);
}
.deleted {
  background-color: red;
}

<table>
  <tr>
    <td>№</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Ivan</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Andrey</td>
  </tr>
</table>

How can I make it so that when both the classes .deleted and .reviewed are set on an element the background-color of .deleted takes into account the background-color of .reviewed?

When using the two classes the color should be darker than if it was just using the class .deleted.

Answer 1

`background-blend-mode` can allow you to blend two backgrounds together

In this instance background-blend-mode: mulitply; can give you the desired effect of darkening the background-color of .deleted.

The following changes are required:

• Change background-color:rgba(228, 225, 219, 1); to background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1)); in .reviewed. This will give .reviewed the same background colour but will enable background-blend-mode to work with the background-color set on .deleted
• Add background-blend-mode: multiply; to .deleted to enable the background colour to blend with the "background image" set on .reviewed

.reviewed {
  background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1));
}
.deleted {
  background-blend-mode: multiply;
  background-color: red;
}

<table>
  <tr>
    <td>Number</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Reviewed</td>
  </tr>
  <tr class="reviewed deleted">
    <td>2</td>
    <td>Reviewed and deleted</td>
  </tr>
  <tr class="deleted">
    <td>3</td>
    <td>Deleted</td>
  </tr>
</table>

The advantage to this is that you don't have to specify a third colour as the calculation is done by CSS. The disadvantage is the there is currently no support for this in IE or Edge.

background-blend-mode is supported by Firefox, Chrome and partially supported by Safari. http://caniuse.com/#feat=css-backgroundblendmode