How to mix colors in CSS?


Tags: html,css

Problem :

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.



Solution :

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


    CSS Howto..

    How to css this?

    css for mobile devices how to make '@media all' work on wordpress child theme

    How to add CSS to my HTML code on Notepad++

    How to use CSS' “rotateX()” with jQuery's animate() on multiple elements with delay

    How to change lines in an angularJS+Bootstrap?

    how to use namespaces in css?

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    How to layer box-shadows using z-index?

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • How to stretch text in CSS like microsoft word?

    CSS how to align vertically center div floating elements of menu?

    How to design a ordered list inside a selection drop down menu

    how to bypass style in element that is automatically applied through class?

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How would I change the code to work with a table instead of body? [closed]

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to keep div height fixed during changing its content?

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    How to position a drop down list nav bar inside header in html css

    How to place text/content below Navbar in CSS/HTML

    How to Create Responsive Web Page With Static Header?

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    How to make a jQuery script and CSS responsive?

    How to implement a navbar with HTML / CSS

    How to draw image dynamically on a canvas line between two cells

    How to achieve table's centering capabilities without tables

    How do I select all elements of a specific class name?

    How to float elements in rows.

    Background image cut off outside of item. How can I make it show?