CODEWITHSUNDEEP
htmlcss
Vladimir
Vladimir

Reputation: 176

How to mix colors in CSS?

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.

Upvotes: 10

Views: 36863

Answers (4)

Salman Arshad
Salman Arshad

Reputation: 272446

If you are using a CSS preprocessor e.g. SASS/LESS you can simply define two color variables and use color mixing functions to generate the third color.

SASS example:

$color1: rgba(228, 225, 219, 1);
$color2: red;

.reviewed {
  background-color: $color1;
}
.deleted {
  background-color: $color2;
}
.reviewed.deleted {
  background-color: mix($color1, $color2);
}

LESS Example

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

`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

Upvotes: 10

Atal Kishore
Atal Kishore

Reputation: 4758

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

.deleted {
    background-color:red;
}
.reviewed.deleted {
    background-color:/*use color code for something dark red*/
}

.reviewed.deleted means the element having class reviewedanddeleted

Upvotes: 5

Jayendra Manek
Jayendra Manek

Reputation: 148

you can set the css background to a gradient and produce a similiar effect as in photoshop

example gradient

background-image: -webkit-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -ms-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -o-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -moz-linear-gradient(to bottom right, red, rgba(255,0,0,0));

Upvotes: 2

Related Questions