Forked from @HugoGiraudel
See the code in action on SassMeister
8674490
Forked from @HugoGiraudel
See the code in action on SassMeister
8674490
// ---- | |
// 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%; | |
} |