Guide des palettes et combinaisons de couleurs : de la théorie des couleurs à la combinaison professionnelle d'UI en pratique

Fondements de la théorie des couleurs

Modèle de couleur HSL

H (Hue) Teinte : 0-360°, angle sur le cercle chromatique
S (Saturation) Saturation : 0-100%, gris → couleur pure
L (Lightness) Luminosité : 0-100%, noir → blanc

Valeur de teinte	Couleur
0° / 360°	Rouge
60°	Jaune
120°	Vert
180°	Cyan
240°	Bleu
300°	Magenta

Cercle chromatique

         0° Rouge
    300°       60°
   Magenta     Jaune
  240°         120°
    Bleu       Vert
        180° Cyan

Cinq schémas classiques de combinaison de couleurs

1. Combinaison monochromatique (Monochromatic)

Même teinte, saturation et luminosité différentes.

:root {
  --primary-50: hsl(220, 100%, 97%);   /* Bleu très clair */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* Bleu de base */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* Bleu très foncé */
}

Application : Épuré, professionnel, forte identité de marque

2. Combinaison analogue (Analogous)

Couleurs adjacentes à 30° sur le cercle chromatique.

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* Bleu */
  --analogous-2: hsl(220, 80%, 50%);  /* Bleu-violet */
  --analogous-3: hsl(240, 80%, 50%);  /* Violet */
}

Application : Harmonieux, naturel, chaleureux

3. Combinaison complémentaire (Complementary)

Couleurs opposées à 180° sur le cercle chromatique.

:root {
  --primary: hsl(220, 80%, 55%);    /* Bleu */
  --complement: hsl(40, 80%, 55%);  /* Orange */
}

Application : Contraste élevé, accrocheur, boutons CTA

4. Combinaison triadique (Triadic)

Trois couleurs équidistantes à 120° sur le cercle chromatique.

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* Rouge */
  --triadic-2: hsl(120, 70%, 55%);  /* Vert */
  --triadic-3: hsl(240, 70%, 55%);  /* Bleu */
}

Application : Vivant, coloré, produits pour enfants

5. Combinaison complémentaire divisée (Split-Complementary)

30° de chaque côté de la couleur complémentaire.

:root {
  --primary: hsl(220, 80%, 55%);     /* Bleu */
  --split-1: hsl(10, 80%, 55%);      /* Rouge-orange */
  --split-2: hsl(50, 80%, 55%);      /* Jaune-orange */
}

Application : Riche mais sans confusion, plus doux que le complémentaire

Normes de contraste WCAG

Calcul du contraste

Contraste = (L1 + 0,05) / (L2 + 0,05)

L1 = Luminance relative de la couleur la plus claire
L2 = Luminance relative de la couleur la plus sombre

Calcul de la luminance relative :
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R/G/B doivent d'abord être linéarisés en sRGB)

Norme WCAG 2.1

Niveau	Texte courant	Grand texte	Composants UI
AA	4,5:1	3:1	3:1
AAA	7:1	4,5:1	-

Grand texte : ≥18pt (24px) ou ≥14pt gras

Vérifier le contraste avec JavaScript

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

Génération de palettes professionnelles

Échelles de couleurs style Tailwind CSS

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// Générer une palette bleue
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

Espace colorimétrique OKLCH (plus uniforme)

/* OKLCH est perceptuellement plus uniforme que HSL */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}

Espace colorimétrique	Uniformité perceptuelle	Support navigateurs
HSL	❌ Non uniforme	Tous
OKLCH	✅ Uniforme	Chrome 111+, Safari 15.4+
OKLAB	✅ Uniforme	Chrome 111+, Safari 15.4+

Combinaison de couleurs en mode sombre

/* Mode clair */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Mode sombre : ne pas simplement inverser, mais réduire le contraste */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

Principes de combinaison en mode sombre

Ne pas utiliser le noir pur #000 : Utiliser des gris foncés comme #111827
Réduire la saturation de la couleur principale : Saturation élevée en mode sombre est éblouissante
Maintenir le contraste ≥ 4,5:1 : Standard WCAG AA
Remplacer les ombres par des couches de fond plus sombres : Les ombres ne sont pas visibles en mode sombre

Référence de palettes classiques

Technologie/SaaS

Couleur principale : #3b82f6 (Bleu 500)
Couleur secondaire : #8b5cf6 (Violet 500)
Accent : #06b6d4 (Cyan 500)
Fond : #f8fafc
Texte : #0f172a

E-commerce/Consommation

Couleur principale : #f97316 (Orange 500)
Couleur secondaire : #ef4444 (Rouge 500)
Accent : #22c55e (Vert 500)
Fond : #ffffff
Texte : #1f2937

Finance/Professionnel

Couleur principale : #1e40af (Bleu 800)
Couleur secondaire : #059669 (Vert 600)
Accent : #d97706 (Ambre 600)
Fond : #f9fafb
Texte : #111827

Génération de combinaisons avec ToolsKu

Ouvrez l'outil de conversion de couleur ou le générateur de dégradés
Sélectionnez la couleur de base
Générez automatiquement l'échelle de couleurs (50-900)
Vérifiez si le contraste respecte WCAG AA
Prévisualisez l'effet en mode sombre
Copiez le code des variables CSS

Questions fréquentes

Pourquoi ma combinaison de couleurs paraît-elle « sale » ?

HSL a une perception de saturation incohérente à luminosité élevée/faible. Utilisez l'espace colorimétrique OKLCH pour générer des échelles de couleurs plus propres.

Les couleurs sont trop éblouissantes en mode sombre ?

Réduisez la saturation de 20-30%, augmentez la luminosité de 5-10% :

/* Mode clair */
--primary: hsl(220, 80%, 55%);

/* Mode sombre : réduire la saturation */
--primary: hsl(220, 60%, 65%);

Comment garantir la compatibilité avec les daltoniens ?

Ne pas dépendre uniquement de la couleur pour transmettre l'information (ajouter des icônes/texte)
La combinaison rouge-vert n'est pas adaptée aux daltoniens, utiliser le bleu-orange comme alternative
Tester avec le simulateur de daltonisme

Résumé

Une bonne combinaison de couleurs résulte de la théorie des couleurs + des normes de contraste + de tests pratiques. Maîtriser les cinq schémas classiques de combinaison, les normes de contraste WCAG et l'espace colorimétrique OKLCH permet de générer des palettes de niveau professionnel. Rappelez-vous : la combinaison de couleurs n'est pas un art, c'est de l'ingénierie — il y a des normes à suivre, des outils pour mesurer.