Mix two colors in sass

user_1937021 0
Viewed 3714

Say I have these variables in a sass file:

$steel-blue: rgba(74, 148, 181,1)!default;
$black: rgba(0, 0, 0,1)!default;

$primary-color: $steel-blue;
$background-color: $black;

$primary-color-overlay: rgba($primary-color,8%);

I want to mix $background-color with $primary-color-overlay which should give me: #060C0E.

I tried using mix() function but to no avail. It should be as if I have a placed $primary-color-overlay on top of $background-color.

I'd like to saved the combined color as a variable too.

sass css
3 Answers

I think you need this :

background-color: #4e73df;
background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
user_145220470

It's not an easy way of doing it and takes some trial and error but you can achieve it with Mix by using the following:

background-color: mix($background-color, $primary-color, 92%);

You just need to work out the percentage of mixture you want from the two colours. #060C0E isn't a 50/50 mix of the two.

user_35599110

Just to be a little more explicit as to how this is working. Let's take this for example:

$mixed-color: mix($color1, $color2, 50%);

There are really 3 different ways to think about that percentage value — use whichever works best in your own brain or for the situation at hand. ;)

  1. Think of the percentage as a slider representing the amount of each color to mix in — with 0% being all the way to the "left" ($color1), 100% being all the way to the "right" ($color2), and 50% being in the middle (an equal amount of both colors).
  2. The percentage sets the opacity (100% being most opaque) of $color1 on top of $color2.
  3. The percentage sets the transparency (100% being most transparent) of $color2 on top of $color1.

So to get the color resulting from overlaying $primary-color at 8% opacity over $background-color either of the following will get you the same thing (although the first one is more how you were approaching it above):

$primary-color-overlay: mix($primary-color, $background-color, 8%);

$primary-color-overlay: mix($background-color, $primary-color, 92%);
user_61367740
Related