Skip to content

Instantly share code, notes, and snippets.

@dhlavaty
Created May 30, 2017 11:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dhlavaty/720e76db83b25cb6b77f18c7e630f441 to your computer and use it in GitHub Desktop.
Save dhlavaty/720e76db83b25cb6b77f18c7e630f441 to your computer and use it in GitHub Desktop.
SASS color difference calculations
// Use https://www.sassmeister.com/ to try it out
$have: #dfe2e5;
$need: #e1e4e6;
//$need: #d8dbe1;
//$out: saturate(darken($have, 2.15), 2.7);
$out: desaturate(lighten($have, 0.58), 1.25);
.test {
color-------need: $need;
color-calculated: $out;
// hue
hue: hue($have);
hue: hue($need);
hue: hue($out);
diff: saturation($need) - saturation($out);
// saturation
saturation: saturation($have);
saturation: saturation($need);
saturation: saturation($out);
diff: saturation($need) - saturation($out);
// lightness
lightness: lightness($have);
lightness: lightness($need);
lightness: lightness($out);
diff: lightness($need) - lightness($out);
// overalldiff
// color-diff($need, $out);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment