Sass color conversion calculation

Question

I have two shades of blue (# 1E95EF → # 1988DD), and you need to figure out the color conversion that happened to reproduce it in other colors in my palette (red, green, etc.).

I used combinations of darken()/lighten()both saturate()/desaturate()to view the transformation and got it pretty close:

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

But I need to get it right, so the small mistakes that I make with percentage decimal points are not replicated in all colors. How can I pinpoint what happened?

Here is what I tried:

sassmeister gist

In this snippet, the corresponding classes in my example are: .ga-primaryand.ga-primary-hover

Answer 1

-, /. Hex- RGB, HSL . 3 : Hue, Saturation Lightness.

SASS HSL , , :

$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)

: http://codepen.io/anon/pen/bqOaZZ

, - , /, ( , "" - ' ). , !