Gestion avancée des couleurs avec SCSS

Problème classique : valeurs répétées et incohérentes

Dans un projet CSS classique, tu finis souvent avec plusieurs bleus proches : #7aa7ff, #79a6ff, #7ca8ff… juste parce que quelqu'un a "ajusté".

Résultat : le design perd sa cohérence, et les changements deviennent pénibles.

Les grandes familles de fonctions de couleur

Sass propose plusieurs fonctions pour manipuler des couleurs :

• Éclaircir / assombrir : lighten(), darken()
• Mélanger : mix()
• Transparence : rgba(), transparentize(), opacify()
• Composantes : red(), green(), blue()

Palette et "design tokens"

Une bonne pratique consiste à définir une palette :

• Couleurs "brand" (primary, secondary)
• Couleurs d'état (success, warning, danger)
• Couleurs neutres (fond, texte, bordures)

Ensuite, tu construis tes composants à partir de ces tokens.

Créer une couleur principale + variante hover

SCSS :

$primary: #7aa7ff;

.button {
  background: $primary;
  color: white;

  &:hover {
    background: darken($primary, 8%);
  }
}

CSS généré (extrait) :

.button {
  background: #7aa7ff;
  color: white;
}

.button:hover {
  background: #5b95ff; /* valeur calculée par Sass */
}

Ajouter une transparence proprement

Pour des overlays, des ombres ou des bordures "soft", la transparence est très utile.

SCSS :

$primary: #7aa7ff;

.card {
  border: 1px solid rgba($primary, .35);
  background: rgba($primary, .08);
}

Utiliser mix() pour créer une couleur intermédiaire

mix() mélange deux couleurs. Très utile pour créer des teintes "neutres" cohérentes.

SCSS :

$primary: #7aa7ff;
$black: #000;

$primary-dark: mix($primary, $black, 80%);

.title {
  color: $primary-dark;
}

Cas pro 1 : map de couleurs + fonction d'accès

On structure les couleurs dans une map, puis on crée une fonction pour les récupérer. Ça évite d'utiliser map-get partout.

SCSS :

$colors: (
  primary: #7aa7ff,
  secondary: #ffb703,
  success: #22c55e,
  warning: #f59e0b,
  danger:  #ef4444,
  text:    #ffffff,
  bg:      #0b1020
);

@function color($name) {
  @if map-has-key($colors, $name) {
    @return map-get($colors, $name);
  } @else {
    @warn "Couleur inconnue : #{$name}";
    @return #ffffff;
  }
}

body {
  background: color(bg);
  color: color(text);
}

.btn {
  background: color(primary);
  color: color(text);
}

Cas pro 2 : générer automatiquement des variantes (hover, active, border)

Plutôt que de définir à la main toutes les variantes, on les dérive.

SCSS :

$colors: (
  primary: #7aa7ff,
  success: #22c55e,
  danger:  #ef4444
);

@function variant($c, $type) {
  @if $type == hover {
    @return darken($c, 8%);
  } @else if $type == active {
    @return darken($c, 14%);
  } @else if $type == soft {
    @return rgba($c, .12);
  } @else if $type == border {
    @return rgba($c, .35);
  } @else {
    @return $c;
  }
}

@each $name, $value in $colors {
  .btn--#{$name} {
    background: $value;
    color: white;
    border: 1px solid transparent;

    &:hover { background: variant($value, hover); }
    &:active { background: variant($value, active); }

    &.is-soft {
      background: variant($value, soft);
      color: $value;
      border-color: variant($value, border);
    }
  }
}

Tu obtiens un système cohérent : chaque couleur a les mêmes variantes calculées.

Cas pro 3 : thèmes (dark/light) avec tokens couleur

Un pattern fréquent : deux thèmes avec les mêmes tokens (bg, text, etc.).

SCSS :

$themes: (
  dark: (
    bg: #0b1020,
    text: #ffffff,
    surface: rgba(255,255,255,.08)
  ),
  light: (
    bg: #ffffff,
    text: #111827,
    surface: rgba(17,24,39,.06)
  )
);

@function theme($mode, $token) {
  @return map-get(map-get($themes, $mode), $token);
}

body[data-theme="dark"] {
  background: theme(dark, bg);
  color: theme(dark, text);
}

body[data-theme="light"] {
  background: theme(light, bg);
  color: theme(light, text);
}

.card {
  background: theme(dark, surface);
}

• Centraliser les couleurs dans une map (tokens).
• Créer des fonctions d'accès (color(), theme()) pour éviter les répétitions.
• Dériver les variantes (hover/active/border) plutôt que créer des nouvelles couleurs "à la main".
• Limiter le nombre de couleurs "brand" : mieux vaut une palette courte et cohérente.
• Penser contraste et accessibilité (texte lisible sur fond).

Erreur 1 : multiplier les couleurs légèrement différentes

C'est le piège numéro 1 : tu perds la cohérence visuelle et tu compliques la maintenance.

Erreur 2 : calculer des variantes partout, sans centraliser

Si tu fais darken(...) dans tous les composants, tu recrées de la duplication. Centralise la logique dans une fonction (ex. variant()).

Erreur 3 : oublier le contraste

Une belle couleur ne suffit pas : il faut un texte lisible. Prévois des tokens text et bg cohérents.