Palettes & Harmonies de Couleurs

Créer un système de couleurs accessible, contrasté et décliné en modes clair et sombre.

Le design d’une interface commence par le choix de ses teintes. Une palette de couleurs cohérente n’est pas qu’un choix artistique : c’est un outil ergonomique majeur qui hiérarchise l’information, guide le regard et renforce l’identité visuelle de votre application.

Le Cercle de Johannes Itten

Le peintre suisse Johannes Itten (1888-1967), enseignant au célèbre Bauhaus, a conçu un cercle chromatique pour modéliser la création et la relation des couleurs. Sa structure géométrique montre de manière limpide comment les 12 teintes fondamentales sont construites :

1.1. Les Couleurs Primaires (Le Triangle)

Au centre se trouve un triangle équilatéral contenant les trois teintes fondamentales : le Jaune, le Rouge, et le Bleu. Elles sont dites primaires car elles sont pures et ne peuvent être obtenues par aucun mélange.

1.2. Les Couleurs Secondaires (L’Hexagone)

En joignant les pointes du triangle central, on forme trois nouveaux triangles qui dessinent un hexagone. Ils accueillent les teintes obtenues par le mélange à parts égales de deux primaires :

• Jaune + Rouge = Orange
• Rouge + Bleu = Violet
• Bleu + Jaune = Vert

1.3. Les Couleurs Tertiaires (La Couronne)

La couronne externe est divisée en 12 secteurs alignés. Elle réunit les primaires, les secondaires et les teintes dites tertiaires, obtenues en combinant une primaire avec une secondaire adjacente (ex: Bleu-Vert, Jaune-Orange).

Modèle RYB de Johannes Itten

Théorie des Harmonies de Couleurs

Pour assembler des couleurs de manière harmonieuse dans une interface, les designers s’appuient sur des règles géométriques précises en traçant des formes (lignes, triangles, rectangles) à l’intérieur du cercle chromatique :

• Teinte de Base : Le point d’ancrage de votre palette, qui incarne souvent l’identité de marque.
• Harmonie Complémentaire : Utilise la couleur directement opposée (à 180°). Elle crée un fort contraste visuel, idéal pour mettre en valeur des appels à l’action.
• Harmonie en Triade : Associe trois couleurs réparties uniformément à 120°. Elle produit un équilibre dynamique et vivant.
• Harmonie en Tétrade : Combine quatre teintes formant un rectangle (deux paires de complémentaires). Idéal pour les interfaces complexes qui nécessitent de différencier plusieurs types d’informations.

💡 L’importance du contraste et de l’accessibilité (WCAG)

En UI/UX, le choix des couleurs doit être inclusif. La norme internationale WCAG (Web Content Accessibility Guidelines) recommande un rapport de contraste minimal de 4.5:1 pour le texte normal et 3:1 pour les gros textes ou éléments graphiques. Ne vous fiez pas uniquement à votre perception visuelle : mesurez mathématiquement la luminance de vos couleurs !

Atelier Interactif : Créez vos Harmonies

Choisissez une teinte de base sur le cercle chromatique, puis explorez les différentes harmonies géométriques en changeant d’onglet. Vous verrez instantanément s’afficher la palette générée et sa mise en situation sur une fausse interface logicielle.

Atelier de Colorimétrie

L’harmonie complémentaire utilise deux teintes opposées. Elle offre un contraste maximal et un dynamisme immédiat.

Cercle Chromatique Discret

#000000 Base

#000000 Complément

Interface Complémentaire

Action requise

Le contraste élevé attire instantanément l’œil sur le bouton principal. Utilisez la couleur complémentaire avec parcimonie pour maximiser son effet.

L’harmonie en triade (ternaire) répartit trois teintes à 120° l’une de l’autre. Elle propose un équilibre vivant et coloré.

Cercle Chromatique Discret

#000000 Base

#000000 Triade 1

#000000 Triade 2

Interface en Triade

Info système

Trois teintes permettent de mieux segmenter votre design : une couleur pour la structure principale, une pour les textes, et une pour les composants d’interaction.

L’harmonie en tétrade (quaternaire) associe quatre teintes à 90° d’écart. C’est la configuration la plus riche en variations.

Cercle Chromatique Discret

#000000 Base

#000000 Tétrade 1

#000000 Tétrade 2

#000000 Tétrade 3

Interface en Tétrade

Dashboard complexe

Filtre actif

Avec quatre teintes de caractères différents, assurez-vous d’avoir une nuance ultra-dominante et réservez les trois autres pour différencier des catégories de données distinctes.

mutable mode = "complementary"

_tabWatcher = {
  const w = aptitek.createTabsetWatcher(
    ".couleur-tabset",
    { "Complémentaire": "complementary", "Triade": "triadic", "Tétrade": "tetradic" },
    (val) => { mutable mode = val; }
  );
  invalidation.then(() => w.destroy());
  return null;
}

viewof colorWheel = {
  const container = document.getElementById("shared-color-wheel");
  const wheel = aptitek.createColorWheel(container, {
    mode: "complementary",
    baseHue: 0
  }, invalidation);
  return wheel;
}

updateWheelPosition = {
  // Dépend de `mode` pour s'exécuter à chaque changement d'onglet
  const activeMode = mode;
  const wheel = document.getElementById("shared-color-wheel");
  if (!wheel) return;

  let placeholderId = "";
  if (activeMode === "complementary") placeholderId = "placeholder-comp";
  else if (activeMode === "triadic") placeholderId = "placeholder-tri";
  else if (activeMode === "tetradic") placeholderId = "placeholder-tet";

  const placeholder = document.getElementById(placeholderId);
  if (placeholder && wheel.parentNode !== placeholder) {
    placeholder.appendChild(wheel);
  }
}

updateWheelMode = {
  if (viewof colorWheel) {
    (viewof colorWheel).update({ mode });
  }
}

updateUIElements = {
  const data = colorWheel;
  if (!data || !data.palette) return;

  const updateTabElements = (swatchIds, mockupId) => {
    swatchIds.forEach((id, index) => {
      const item = document.getElementById(id);
      if (!item) return;
      const colorInfo = data.palette[index];
      if (colorInfo) {
        const box = item.querySelector(".swatch-color-box");
        const label = item.querySelector(".swatch-hex");
        if (box) box.style.setProperty("--swatch-color", colorInfo.hex);
        if (label) label.textContent = colorInfo.hex;
      }
    });

    const mockup = document.getElementById(mockupId);
    if (mockup) {
      mockup.style.setProperty("--palette-color-0", data.colors[0]);
      mockup.style.setProperty("--palette-color-1", data.colors[1] || data.colors[0]);
      mockup.style.setProperty("--palette-color-2", data.colors[2] || data.colors[0]);
      mockup.style.setProperty("--palette-color-3", data.colors[3] || data.colors[0]);
    }
  };

  if (mode === "complementary") {
    updateTabElements(["swatch-comp-0", "swatch-comp-1"], "mockup-comp");
  } else if (mode === "triadic") {
    updateTabElements(["swatch-tri-0", "swatch-tri-1", "swatch-tri-2"], "mockup-tri");
  } else if (mode === "tetradic") {
    updateTabElements(["swatch-tet-0", "swatch-tet-1", "swatch-tet-2", "swatch-tet-3"], "mockup-tet");
  }
}

_ittenWheel = {
  aptitek.createIttenWheel("#itten-wheel-container");
}

Le Modèle CIELAB et l’Uniformité Perceptive

Bien que les modèles RGB (synthèse additive pour les écrans) et HSL (plus intuitif pour les humains) soient très pratiques en développement, ils souffrent d’un défaut majeur : ils ne sont pas perceptivement uniformes.

En HSL, par exemple, un jaune pur (\(H=60^\circ\)) et un bleu pur (\(H=240^\circ\)) à saturation et luminosité égales (\(S=100\%\), \(L=50\%\)) paraissent radicalement différents en termes de clarté perçue : le jaune semble extrêmement lumineux tandis que le bleu semble sombre. Cette distorsion complique le calcul automatisé des contrastes pour l’accessibilité numérique.

Pour résoudre ce problème, la Commission Internationale de l’Éclairage (CIE) a créé en 1976 le modèle CIELAB (\(L^*a^*b^*\)). Ce modèle est basé sur la théorie de l’opposition des couleurs de la vision humaine :

• \(L^*\) (Luminosité) : Varie de \(0\) (noir complet) à \(100\) (blanc pur). Elle correspond fidèlement à la sensation physique de clarté.
• \(a^*\) (Axe Vert/Rouge) : Représente la chromaticité du Vert (valeurs négatives) au Rouge (valeurs positives).
• \(b^*\) (Axe Bleu/Jaune) : Représente la chromaticité du Bleu (valeurs négatives) au Jaune (valeurs positives).

🔬 Pourquoi utiliser CIELAB en UI/UX ?

Grâce à son uniformité perceptive, la distance géométrique (Euclidienne) entre deux couleurs dans l’espace CIELAB (\(\Delta E^*\)) correspond exactement à la différence visuelle perçue par l’œil humain. C’est l’outil de référence pour générer des gammes de nuances équilibrées et valider des contrastes d’accessibilité avec une rigueur mathématique absolue.

Explorateur d’Espace Colorimétrique CIELAB

Visualisation Tridimensionnelle Projetée

Coordonnées Perceptives

viewof sliderL = aptitek.createCielabSlider({ label: "L*", value: 70, min: 0, max: 100, step: 1, className: "slider-l" })
viewof sliderA = aptitek.createCielabSlider({ label: "a*", value: 20, min: -128, max: 127, step: 1, className: "slider-a" })
viewof sliderB = aptitek.createCielabSlider({ label: "b*", value: 20, min: -128, max: 127, step: 1, className: "slider-b" })

// Montage des curseurs dans les conteneurs dédiés
mountSliders = {
  const containerL = document.getElementById("slider-l-container");
  const containerA = document.getElementById("slider-a-container");
  const containerB = document.getElementById("slider-b-container");

  if (containerL && containerL.childElementCount === 0) containerL.appendChild(viewof sliderL);
  if (containerA && containerA.childElementCount === 0) containerA.appendChild(viewof sliderA);
  if (containerB && containerB.childElementCount === 0) containerB.appendChild(viewof sliderB);
}

// Initialisation de la sphère CIELAB interactive
viewof cielabSphere = aptitek.createCielabSphere("#cielab-sphere-container", {
  l: sliderL,
  a: sliderA,
  b: sliderB
})

// Synchronisation réactive : de la sphère vers les curseurs verticaux
syncSphereToSliders = {
  const coords = cielabSphere;
  if (!coords) return;

  if (viewof sliderL) (viewof sliderL).update(coords.l);
  if (viewof sliderA) (viewof sliderA).update(coords.a);
  if (viewof sliderB) (viewof sliderB).update(coords.b);
}

// Synchronisation réactive : des curseurs verticaux vers la sphère
syncSlidersToSphere = {
  const l = sliderL;
  const a = sliderA;
  const b = sliderB;
  if (viewof cielabSphere) {
    (viewof cielabSphere).update({ l, a, b });
  }
}