css - SASS calculate HSL Difference between 2 colours

Question

I'm using SASS for some styling. I have a base colour, and I want all other colours to change relative to the base colour. I have set the colours up how I want them but the colours are hard coded and not calculated from the base colour.

Is there a tool that quickly generates SASS colour functions for the difference between two colours? There is this tool: http://sassme.arc90.com/ - but it only allows me to generate the output colour with sliders, instead of setting output colour myself and it generate the function.

Hope this makes sense.

Answer 1

You can check out the following resource:

Building Color Palettes with SASS

Basically, here's the meat of it:

@function color-diff($a, $b) {
  $sat: saturation($a) - saturation($b);
  $lig: lightness($a) - lightness($b);
  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
  $fn-lig: if($lig > 0, 'darken', 'lighten');
 
  @return (
    adjust-hue: -(hue($a) - hue($b)),
    #{$fn-sat}: abs($sat),
    #{$fn-lig}: abs($lig)
  );
}

You want to do this with a function in SASS (or a parameterized mixin in LESS), and you can see the structure of one above.

Hope this helps.