Sass: Korrekter Farbton- und Sättigungsunterschied zwischen drei HSL-Farben

Question

Ich habe drei Farben, die ich entsättigen/sättigen möchte, Helligkeit anpassen und Farbton anpassen, weil die hellere und dunklere Schattierung HSL von der Grundfarbe abweicht.

So kann ich am Ende eine andere Farbe als primäre hinzufügen und ein neues Farbschema basierend auf diesem haben. Hoffe, das macht Sinn.

Wie kann ich das mit HSL Farben machen? Hier sind meine Farben in HSL:

$primary: hsl(204, 64%, 44%); 
$primary-dark: hsl(203, 64%, 23%); 
$primary-light: hsl(204, 51%, 55%); 

Und hier sind sie in hex:

$primary: #2980B9; 
$primary-dark: #154360; 
$primary-light: #5499C7; 

Und das ist, was ich versucht habe, so weit, aber nichts davon funktioniert - es ist nicht mir geben die richtigen Farbcodes. Es ist immer mit ein paar Nummern los. Im Beispiel zum Beispiel wird ein $ primary-light # 5298c7, wenn ich möchte, dass es # 5499C7 ist.

Example one, example two.

EDIT: Ich habe festgestellt, dass in Beispiel zwei, adjust-hue-Funktion, wo ich 1deg subtrahiert, tut überhaupt nichts. Was bedeutet, dass ich das Format ändern muss, in dem ich diese Farbfunktionen anwende, oder? Gibt es eine Möglichkeit, sie alle in einer Funktion/Mixin zu integrieren? Entschuldigung, wenn das am Ende verwirrend klingen würde, nur um es herauszufinden.

Answer 1

Sie können Build color functions verwenden, um Farbkomponenten zu extrahieren.
Zum Beispiel:

// Your base color 
$primary: hsl(204, 64%, 44%); 

// Get all color components and store them to variables 
$hue:  hue($primary); 
$saturation: saturation($primary); 
$lightness: lightness($primary); 

// New color hue 
$new-hue: 200; 

// Create new color from existing color components 
// using hsl() constructor 
$color: hsl(
    $new-hue, 
    $saturation, 
    $lightness 
); 

a { 
    // Use new color 
    color: $color; 
} 

können Sie extrahieren Farbton (zum Beispiel) Komponente von Farbe, die als RGB eingestellt ist: $hue: hue(#f00);.