*{
    --base-color:red;
}

/*Ajouter de la transparence*/
.transparent{
    hsl(from var(--base-color) h s calc(l + 12));
}

/* désaturer une couleur de base*/
.desat{
    color: hsl(from var(--base-color) h calc(s + -50) l);
}

/* complémentaire*/
.complementaire{
    hsl(from var(--base-color) calc(h + 180) s l);
}

/* plus loin : primary, seconday, tertiary*/
.primary{
    hsl(from var(--base-color) calc(h + 90) s l);
}
.secondary{
    hsl(from var(--base-color) calc(h + 180) s l);
}
.tertiary{
    hsl(from var(--base-color) calc(h + 270) s l);
}