Sass color transform calculation

Question

I have two shades of the color blue (#1E95EF -> #1988DD), and need to figure out the color transformation that has happened in order to replicate it across other colors in my palette (red, green etc).

I've used combinations of darken()/lighten() & saturate()/desaturate() to eyeball the transformation, and have gotten it pretty close:

desaturate(darken(#1E95EF, 4.5%), 8%); === #1A88DC

But I need to get it exactly right, so that the small errors that I make with the percentage decimal points are not replicated across all of the colors. How can I figure out exactly what transformation has occurred?

Here is what I've tried:

sassmeister gist

In this snippet, the relevant classes to my example are .ga-primary and .ga-primary-hover

score 3 · Accepted Answer · answered Mar 31 '17 at 13:03

You can measure the differences between colors in different ways, depending on the color model/space you're using. Hex colors use RGB, but the HSL model will be more useful here. It records a color as 3 values: Hue, Saturation and Lightness.

We can use SASS's HSL functions to work out how each value of the color differs, and then selectively apply that difference to other colors:

$start-color: #1E95EF
$end-color: #1988DD

//We won't need the hue-difference in practice
$hue-difference: hue($start-color) - hue($end-color)

//These express the difference as a percentage
$saturation-difference: saturation($start-color) - saturation($end-color)
$lightness-difference: lightness($start-color) - lightness($end-color)

@function color-adjust($base-color)
  //Apply the lightness and saturation changes but keep the original Hue
  @return hsl(hue($base-color), saturation($base-color) + $saturation-difference, lightness($base-color) + $lightness-difference)

//To find the adjusted color, just pass whatever base color you like to the color-adjust function:
background: color-adjust(red)

Here's a demo with a few colors: http://codepen.io/anon/pen/bqOaZZ

Obviously that code can be compacted a lot - I'm thinking that what you really want is to define your variants as a set of Saturation/Lightness changes, and then apply them to your whole palette (rather than trying to 'reverse-engineer' it from one example pair). If you want help with something to do that, let me know!

Sass color transform calculation

1 Answers1