Search code examples
csscolorssassrgbuicolor

Implement color formula in sass to define color palette

So through the 'graphic design' stack exchange, I found that I need to use this color formula to calculate the color shades of my color palette:

Y=255 - P*(255-X) where X is a RGB number, P=opacity (0...1), Y=new RGB number

Basically I have a number of base colors, where I need to find some lighter versions of it, based on how the color look with opacity on a white background. The theory behind this formula should work, but I don't know how to implement this in sass (I haven't properly tested the formula yet).

to make this simple lets say i have 1 base color:

$primary: #FFA789;

and I want my tint of that color to be the same as the output of a opacity level of 50%. 

$primary-light: rgba(#FFA789, .5);

however I don't want the color to be opaque at all. But I want the same tint as the $primary-light value. - This should be achievable with the formula.

Solution

  • I'm guessing you were having trouble getting the R, G, and B values for the defined color. You can do that using the red(), green() or blue() functions.

    So, you will have to do,

    $active-color: #0074D9;
$opacity: 0.5;
$sec-color: rgb(255 - $opacity*(255 - red($active-color)), 255 - $opacity*(255 - green($active-color)), 255 - $opacity*(255 - blue($active-color)));

    If you only need to modify one or two of the RGB values you can use the change_color() function like,

    $secondary-color: change-color($active-color, $blue: 255 - $opacity*(255 - blue($active-color)), $green: 255 - $opacity*(255 - green($active-color)));