Create a gist now

Instantly share code, notes, and snippets.

How to programmatically go from #BADA55 to #B0BCA7"
// ----
// 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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment