How to programmatically go from #BADA55 to #B0BCA7"

color-diff.md

Forked from @HugoGiraudel

See the code in action on SassMeister

8674490

color-diff.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Ever wanted to know what would be the color operations to apply to a color 
// in order to find a second color, just out of curiosity?
// Like, "how to programmatically go from #BADA55 to #B0BCA7"?
// --------------------------------------------------------------------------------
// @param (color) $a: first color
// @param (color) $b: second color
// --------------------------------------------------------------------------------
// @return (map) returns the color operations to do in order to find $b from $a
//   where keys are the color functions to apply
//   and values are the values to pass to these functions

@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)
  );
}

// Apply differences returned from `color-diff` function to a color
// In order to retrieve the second color
// --------------------------------------------------------------------------------
// @param (color) $color: color to transform
// @param (map) $diff: diff map
// --------------------------------------------------------------------------------
// @return (color) transformed color

@function apply-diff($color, $diff) {
  // We call the $key (function), 
  // passing the $color and the $value as parameters
  // e.g. `call(adjust-hue, #BADA55, 42)`
  @each $key, $value in $diff {
    $color: call($key, $color, $value);
  }
  @return $color;
}

// --------------------------------------------------------------------------------
// Example
// --------------------------------------------------------------------------------

// Pick two random colors
$a: #BADA55;
$b: #B0BCA7;

// Calculate the diff map between those 2
$diff: color-diff($a, $b);
// This is a map looking like this:
// $diff: (
//   adjust-hue: 42,
//   saturation: 13.37%,
//   lightness: 1.5%
// );

// Apply the diff to one of the two colors to find the second one
$c: apply-diff($a, $diff); 

// Is everything okay?
sass {
  a: $a;
  b: $b;
  c: $c; // $b == $c, awesome!
}

// Visual representation if you prefer
// left part is $a
// middle part is $b
// third part is $c, generated from $a
html {
  background: -webkit-linear-gradient(left, $a 33%, $b 33%, $b 66%, $c 66%);
  height: 100%;
}