Couleurs et psychologie : Créer une palette cohérente

Introduction

La couleur est l’un des outils les plus puissants du design web. Elle influence les émotions, guide l’attention, renforce l’identité de marque et impacte directement les conversions. Une étude de l’Université de Winnipeg révèle que 90% de l’évaluation initiale d’un produit est basée sur la couleur.

Dans cet article, vous apprendrez à créer des palettes cohérentes, comprendre la psychologie des couleurs, et appliquer ces connaissances pour créer des interfaces web percutantes et accessibles.

La psychologie des couleurs

Comprendre l’impact émotionnel

Chaque couleur évoque des émotions et des associations spécifiques, bien que ces perceptions puissent varier selon les cultures.

Rouge (#DC2626 – #EF4444)

Émotions : Passion, urgence, énergie, danger
Utilisation : Boutons CTA, alertes, promotions
Exemples : YouTube, Netflix, Coca-Cola, Pinterest

/* Utilisation du rouge dans l'interface */
.alert-error {
  background-color: #fef2f2;  /* Rouge très pâle */
  border-left: 4px solid #dc2626;  /* Rouge intense */
  color: #991b1b;  /* Rouge foncé pour le texte */
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

.button-urgent {
  background-color: #dc2626;
  color: #ffffff;
  padding: 0.875rem 1.75rem;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  transition: all 0.3s ease;
}

.button-urgent:hover {
  background-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* Badge de promotion */
.promo-badge {
  background-color: #dc2626;
  color: #ffffff;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
}

Attention : Le rouge augmente la pression artérielle et crée un sentiment d’urgence. Utilisez-le avec parcimonie.

Bleu (#2563EB – #3B82F6)

Émotions : Confiance, professionnalisme, calme, sécurité
Utilisation : Interfaces professionnelles, finance, santé, tech
Exemples : Facebook, Twitter, LinkedIn, PayPal, Stripe

/* Palette bleue professionnelle */
:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;  /* Couleur principale */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
}

/* Interface professionnelle */
.header-professional {
  background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%);
  color: #ffffff;
  padding: 1.5rem;
}

.link-primary {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.link-primary:hover {
  color: var(--blue-700);
  text-decoration: underline;
}

/* Carte avec accent bleu */
.card-trusted {
  background: #ffffff;
  border: 1px solid var(--blue-100);
  border-top: 4px solid var(--blue-600);
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

Fait : Le bleu est la couleur préférée de 40% de la population mondiale, ce qui explique son usage dominant dans le web.

Vert (#10B981 – #059669)

Émotions : Nature, croissance, succès, santé
Utilisation : Écologie, finance (positif), santé, confirmations
Exemples : Spotify, WhatsApp, Android, Starbucks

/* Système de notifications avec vert */
.success-message {
  background-color: #ecfdf5;  /* Vert pâle */
  border-left: 4px solid #10b981;
  color: #065f46;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.success-icon {
  width: 24px;
  height: 24px;
  background-color: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

/* Bouton d'action positive */
.button-confirm {
  background-color: #10b981;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-confirm:hover {
  background-color: #059669;
}

/* Indicateur de croissance */
.metric-positive {
  color: #059669;
  font-weight: 600;
}

.metric-positive::before {
  content: '↑';
  margin-right: 0.25rem;
  color: #10b981;
}

Jaune / Orange (#F59E0B – #FB923C)

Émotions : Optimisme, attention, chaleur, créativité
Utilisation : Warnings, highlights, marques joyeuses
Exemples : McDonald’s, IKEA, Snapchat

/* Système d'alertes avec jaune/orange */
.warning-alert {
  background-color: #fffbeb;  /* Jaune très pâle */
  border-left: 4px solid #f59e0b;
  color: #92400e;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

.highlight-text {
  background: linear-gradient(120deg, #fef3c7 0%, #fef3c7 100%);
  background-position: 0 80%;
  background-repeat: no-repeat;
  background-size: 100% 40%;
  padding: 0 0.25rem;
}

/* Bouton call-to-action énergique */
.button-energetic {
  background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.3s ease;
}

.button-energetic:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

Attention : Le jaune pur (#FFFF00) est difficile à lire. Privilégiez des tons ambre ou dorés.

Violet / Mauve (#7C3AED – #A78BFA)

Émotions : Luxe, créativité, spiritualité, innovation
Utilisation : Marques premium, créatifs, tech innovante
Exemples : Twitch, Yahoo, Hallmark

/* Palette violette premium */
:root {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #7c3aed;  /* Principal */
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;
}

/* Design premium */
.premium-card {
  background: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-700) 100%);
  color: #ffffff;
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}

.badge-premium {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  color: var(--purple-700);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid var(--purple-200);
}

.creative-accent {
  border-left: 4px solid var(--purple-500);
  padding-left: 1.5rem;
  color: var(--purple-900);
}

Gris / Neutre (#6B7280 – #1F2937)

Émotions : Neutralité, professionnalisme, sophistication
Utilisation : Textes, arrière-plans, interfaces minimalistes
Exemples : Apple, Nike, The New York Times

/* Palette de gris complète */
:root {
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* Hiérarchie de texte */
.text-primary {
  color: var(--gray-900);  /* Titres */
}

.text-secondary {
  color: var(--gray-700);  /* Corps de texte */
}

.text-tertiary {
  color: var(--gray-500);  /* Texte secondaire */
}

.text-disabled {
  color: var(--gray-400);  /* Désactivé */
}

/* Arrière-plans */
.bg-subtle {
  background-color: var(--gray-50);
}

.bg-medium {
  background-color: var(--gray-100);
}

/* Bordures */
.border-light {
  border: 1px solid var(--gray-200);
}

.border-medium {
  border: 1px solid var(--gray-300);
}

Théorie des couleurs : Les bases

Le cercle chromatique

Le cercle chromatique est l’outil fondamental pour créer des harmonies colorées.

Couleurs primaires

• Rouge : base chaude
• Bleu : base froide
• Jaune : base lumineuse

Couleurs secondaires

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

Couleurs tertiaires

Mélange d’une primaire et d’une secondaire adjacente.

Les harmonies colorées

1. Monochromatique

Une seule teinte avec différentes saturations et luminosités.

/* Palette bleue monochromatique */
.mono-palette {
  --color-base: #3b82f6;
  --color-lightest: #eff6ff;  /* Teinte + blanc */
  --color-lighter: #bfdbfe;
  --color-light: #60a5fa;
  --color-medium: #3b82f6;    /* Base */
  --color-dark: #1d4ed8;
  --color-darker: #1e40af;
  --color-darkest: #1e3a8a;   /* Teinte + noir */
}

/* Application cohérente */
.hero-mono {
  background: linear-gradient(180deg, var(--color-lightest) 0%, #ffffff 100%);
  color: var(--color-darkest);
}

.button-mono-primary {
  background-color: var(--color-medium);
  color: #ffffff;
}

.button-mono-secondary {
  background-color: var(--color-light);
  color: var(--color-darkest);
}

.text-mono-subtle {
  color: var(--color-dark);
}

.border-mono {
  border-color: var(--color-lighter);
}

Avantages : Extrêmement cohérent, facile à maîtriser, élégant
Inconvénients : Peut manquer de dynamisme, risque de monotonie

2. Complémentaire

Deux couleurs opposées sur le cercle chromatique.

/* Palette complémentaire : Bleu (#3B82F6) et Orange (#FB923C) */
:root {
  /* Couleur principale */
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-700: #1d4ed8;

  /* Couleur complémentaire */
  --complement-50: #fff7ed;
  --complement-500: #fb923c;
  --complement-700: #c2410c;
}

/* Contraste fort pour CTA */
.section-blue-bg {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  color: #ffffff;
  padding: 4rem 2rem;
}

.cta-orange {
  background-color: var(--complement-500);
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 700;
  /* Se démarque fortement sur fond bleu */
}

.cta-orange:hover {
  background-color: var(--complement-700);
}

/* Équilibre subtil */
.card-balanced {
  background: #ffffff;
  border-top: 4px solid var(--primary-500);
  padding: 2rem;
}

.card-balanced .accent {
  color: var(--complement-500);
  font-weight: 600;
}

Avantages : Contraste maximum, dynamique, énergique
Inconvénients : Peut être agressif si mal dosé

3. Analogue

Trois couleurs adjacentes sur le cercle chromatique.

/* Palette analogue : Bleu-Violet-Rose */
:root {
  --analog-blue: #3b82f6;
  --analog-violet: #8b5cf6;
  --analog-pink: #ec4899;
}

/* Dégradé harmonieux */
.hero-analogous {
  background: linear-gradient(135deg,
    var(--analog-blue) 0%,
    var(--analog-violet) 50%,
    var(--analog-pink) 100%
  );
  color: #ffffff;
  padding: 6rem 2rem;
}

/* Boutons variés mais cohérents */
.button-blue {
  background-color: var(--analog-blue);
  color: #ffffff;
}

.button-violet {
  background-color: var(--analog-violet);
  color: #ffffff;
}

.button-pink {
  background-color: var(--analog-pink);
  color: #ffffff;
}

/* Interface colorée mais harmonieuse */
.tag-blue { background: #eff6ff; color: #1e40af; }
.tag-violet { background: #f5f3ff; color: #5b21b6; }
.tag-pink { background: #fdf2f8; color: #9f1239; }

Avantages : Harmonieux, riche, naturel
Inconvénients : Moins de contraste, nécessite maîtrise

4. Triadique

Trois couleurs équidistantes sur le cercle chromatique.

/* Palette triadique : Rouge-Jaune-Bleu (couleurs primaires) */
:root {
  --triadic-red: #ef4444;
  --triadic-yellow: #f59e0b;
  --triadic-blue: #3b82f6;
}

/* Application équilibrée */
.triadic-interface {
  /* Couleur dominante : 60% */
  background-color: #eff6ff;  /* Bleu pâle */

  /* Couleur secondaire : 30% */
  border-left: 8px solid var(--triadic-yellow);

  /* Couleur accent : 10% */
  padding: 2rem;
}

.triadic-interface h2 {
  color: var(--triadic-blue);  /* Dominant */
}

.triadic-interface .highlight {
  background-color: #fef3c7;  /* Jaune pâle - secondaire */
  color: #92400e;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.triadic-interface .cta {
  background-color: var(--triadic-red);  /* Accent */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

Règle 60-30-10 :

Créer votre palette de couleurs

Méthode étape par étape

Étape 1 : Choisir la couleur principale

Basez-vous sur :

/* Exemple : Startup technologique - Bleu moderne */
:root {
  --primary: #2563eb;  /* Bleu confiance + innovation */
}

Étape 2 : Générer les nuances

Créez 9 nuances de votre couleur principale (50 à 900).

/* Méthode manuelle : ajuster HSL */
:root {
  /* Base : hsl(217, 91%, 60%) = #3b82f6 */
  --primary-50: hsl(217, 91%, 95%);   /* Très clair */
  --primary-100: hsl(217, 91%, 90%);
  --primary-200: hsl(217, 91%, 80%);
  --primary-300: hsl(217, 91%, 70%);
  --primary-400: hsl(217, 91%, 65%);
  --primary-500: hsl(217, 91%, 60%);  /* Base */
  --primary-600: hsl(217, 91%, 50%);
  --primary-700: hsl(217, 91%, 40%);
  --primary-800: hsl(217, 91%, 30%);
  --primary-900: hsl(217, 91%, 20%);  /* Très foncé */
}

Outil recommandé : Tailwind Color Generator génère automatiquement des nuances équilibrées.

Étape 3 : Ajouter les couleurs neutres

Créez une palette de gris complète.

:root {
  /* Gris chauds (légère teinte jaune/rouge) */
  --neutral-50: #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1c1917;
}

Astuce : Les gris légèrement teintés (chauds ou froids) sont plus élégants que les gris purs.

Étape 4 : Ajouter les couleurs sémantiques

Les couleurs pour les états de l’interface.

:root {
  /* Succès - Vert */
  --success-50: #f0fdf4;
  --success-500: #10b981;
  --success-700: #047857;

  /* Erreur - Rouge */
  --error-50: #fef2f2;
  --error-500: #ef4444;
  --error-700: #b91c1c;

  /* Avertissement - Ambre */
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;

  /* Information - Bleu */
  --info-50: #eff6ff;
  --info-500: #3b82f6;
  --info-700: #1d4ed8;
}

Étape 5 : Définir l’utilisation

Créez des variables sémantiques.

:root {
  /* Texte */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: #ffffff;

  /* Arrière-plans */
  --bg-primary: #ffffff;
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-100);
  --bg-inverse: var(--neutral-900);

  /* Bordures */
  --border-light: var(--neutral-200);
  --border-medium: var(--neutral-300);
  --border-strong: var(--neutral-400);

  /* Interactivité */
  --link-default: var(--primary-600);
  --link-hover: var(--primary-700);
  --link-visited: var(--primary-800);

  /* Focus (accessibilité) */
  --focus-ring: var(--primary-500);
  --focus-ring-offset: #ffffff;
}

Palette complète : Exemple réel

/* Palette pour une application SaaS moderne */
:root {
  /* Couleur de marque - Indigo */
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* Neutrals - Gris froids */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Sémantiques */
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  /* Application */
  --color-primary: var(--brand-600);
  --color-text: var(--gray-900);
  --color-text-light: var(--gray-600);
  --color-bg: #ffffff;
  --color-bg-subtle: var(--gray-50);
  --color-border: var(--gray-200);
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--brand-400);
    --color-text: var(--gray-50);
    --color-text-light: var(--gray-400);
    --color-bg: var(--gray-900);
    --color-bg-subtle: var(--gray-800);
    --color-border: var(--gray-700);
  }
}

Accessibilité des couleurs

Ratios de contraste WCAG

Les Web Content Accessibility Guidelines définissent des ratios minimum.

Standards WCAG 2.1

Niveau AA (minimum) :

Niveau AAA (optimal) :

/* Exemples de combinaisons conformes AA */

/* Excellent : ratio 15.9:1 */
.text-dark-on-white {
  color: #1f2937;  /* Gris très foncé */
  background: #ffffff;
}

/* Bon : ratio 7.2:1 */
.text-medium-on-white {
  color: #4b5563;  /* Gris moyen */
  background: #ffffff;
}

/* Limite AA pour texte normal : ratio 4.6:1 */
.text-light-on-white {
  color: #6b7280;  /* Gris */
  background: #ffffff;
  font-size: 1rem;
}

/* Non conforme : ratio 2.8:1 - À éviter */
.text-too-light {
  color: #9ca3af;  /* Trop clair */
  background: #ffffff;
  /* OK uniquement pour texte très large ou décoratif */
}

/* Texte blanc sur bleu : ratio 8.6:1 - Excellent */
.text-white-on-blue {
  color: #ffffff;
  background: #2563eb;
}

/* Bouton avec bon contraste */
.button-accessible {
  background: #2563eb;  /* Bleu */
  color: #ffffff;       /* Blanc */
  /* Ratio : 8.6:1 - Conforme AAA */
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

/* État focus visible */
.button-accessible:focus {
  outline: 3px solid #93c5fd;  /* Bleu clair */
  outline-offset: 2px;
  /* Ratio focus ring : 3.4:1 minimum requis pour éléments UI */
}

Ne jamais utiliser la couleur seule

La couleur ne doit jamais être le seul indicateur d’information.

/* Mauvais exemple - Couleur seule */
.status-bad {
  color: #10b981;  /* Vert = succès */
}

/* Bon exemple - Couleur + icône + texte */
.status-good {
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-good::before {
  content: '✓';  /* Icône visuelle */
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
}

/* État d'erreur accessible */
.form-error {
  border: 2px solid #ef4444;  /* Bordure rouge */
  background-color: #fef2f2;  /* Fond teinté */
}

.form-error-message {
  color: #991b1b;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.form-error-message::before {
  content: '⚠';  /* Icône d'avertissement */
  flex-shrink: 0;
}

/* Graphique accessible */
.chart-line-1 {
  stroke: #3b82f6;
  stroke-width: 3;
  stroke-dasharray: none;  /* Ligne pleine */
}

.chart-line-2 {
  stroke: #10b981;
  stroke-width: 3;
  stroke-dasharray: 5 5;  /* Ligne pointillée - différenciation visuelle */
}

Tester votre palette

<!-- Outil de test de contraste intégré -->
<div class="contrast-checker">
  <div class="swatch-container">
    <div class="swatch" style="background: #2563eb; color: #ffffff;">
      <p class="swatch-text">Aa</p>
      <p class="swatch-info">Ratio: 8.6:1 - AAA</p>
    </div>
    <div class="swatch" style="background: #ffffff; color: #6b7280;">
      <p class="swatch-text">Aa</p>
      <p class="swatch-info">Ratio: 5.4:1 - AA</p>
    </div>
    <div class="swatch fail" style="background: #ffffff; color: #9ca3af;">
      <p class="swatch-text">Aa</p>
      <p class="swatch-info">Ratio: 2.8:1 - Fail</p>
    </div>
  </div>
</div>

Outils recommandés :

Exemples du monde réel

Stripe

Palette : Bleu violet (#635bff) + neutrals
Stratégie :

/* Inspiré de Stripe */
:root {
  --stripe-purple: #635bff;
  --stripe-purple-light: #7a73ff;
  --stripe-purple-dark: #0a2540;
  --stripe-gray: #425466;
  --stripe-gray-light: #8898aa;
  --stripe-bg: #f6f9fc;
}

Airbnb

Palette : Rausch Rose (#FF5A5F) + neutrals
Stratégie :

/* Inspiré d'Airbnb */
:root {
  --airbnb-rausch: #FF5A5F;
  --airbnb-fog: #767676;
  --airbnb-hof: #484848;
  --airbnb-background: #ffffff;
}

Spotify

Palette : Vert vif (#1DB954) + noir
Stratégie :

/* Inspiré de Spotify */
:root {
  --spotify-green: #1DB954;
  --spotify-black: #191414;
  --spotify-white: #FFFFFF;
  --spotify-gray: #535353;
}

Notion

Palette : Système multicolore équilibré
Stratégie :

/* Inspiré de Notion */
:root {
  --notion-red: #eb5757;
  --notion-orange: #f2994a;
  --notion-yellow: #f2c94c;
  --notion-green: #27ae60;
  --notion-blue: #2d9cdb;
  --notion-purple: #9b51e0;
  --notion-pink: #e91e63;
  --notion-gray: #9b9a97;

  /* Versions pâles pour backgrounds */
  --notion-red-bg: #ffe2dd;
  --notion-orange-bg: #ffddb0;
  --notion-yellow-bg: #fff4c2;
  --notion-green-bg: #d4eee2;
  --notion-blue-bg: #d3e5ef;
  --notion-purple-bg: #e8defc;
  --notion-pink-bg: #ffd9e5;
  --notion-gray-bg: #f1f1ef;
}

Outils et ressources

Générateurs de palettes

– Appuyez sur espace pour générer
– Verrouillez les couleurs que vous aimez
– Exporte en CSS, SCSS, SVG

– Basé sur les règles du cercle chromatique
– Extraction de couleurs depuis images
– Accessibilité intégrée

– Entrez une couleur, obtient 10 nuances
– Algorithme sophistiqué
– Export direct en CSS

– Palettes créées par des designers
– Tendances actuelles
– Like et sauvegarde

Outils d’accessibilité

Inspiration

Mise en pratique : Dashboard d’analytics

Créons une interface complète avec une palette cohérente.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboard - Palette Cohérente</title>
</head>
<body>
  <div class="dashboard">
    <!-- En-tête -->
    <header class="dashboard-header">
      <h1 class="dashboard-title">Tableau de bord Analytics</h1>
      <div class="header-actions">
        <button class="button button-secondary">Exporter</button>
        <button class="button button-primary">Nouveau rapport</button>
      </div>
    </header>

    <!-- Cartes de métriques -->
    <div class="metrics-grid">
      <div class="metric-card metric-card-success">
        <div class="metric-icon">↑</div>
        <div class="metric-content">
          <h3 class="metric-label">Visiteurs</h3>
          <p class="metric-value">45,289</p>
          <p class="metric-change positive">+12.5% vs mois dernier</p>
        </div>
      </div>

      <div class="metric-card metric-card-warning">
        <div class="metric-icon">→</div>
        <div class="metric-content">
          <h3 class="metric-label">Taux de rebond</h3>
          <p class="metric-value">42.3%</p>
          <p class="metric-change neutral">-0.3% vs mois dernier</p>
        </div>
      </div>

      <div class="metric-card metric-card-primary">
        <div class="metric-icon">⬆</div>
        <div class="metric-content">
          <h3 class="metric-label">Conversions</h3>
          <p class="metric-value">1,284</p>
          <p class="metric-change positive">+23.1% vs mois dernier</p>
        </div>
      </div>

      <div class="metric-card metric-card-error">
        <div class="metric-icon">↓</div>
        <div class="metric-content">
          <h3 class="metric-label">Temps de chargement</h3>
          <p class="metric-value">2.4s</p>
          <p class="metric-change negative">+0.8s vs mois dernier</p>
        </div>
      </div>
    </div>

    <!-- Tableau de données -->
    <div class="data-table-container">
      <h2 class="section-title">Pages populaires</h2>
      <table class="data-table">
        <thead>
          <tr>
            <th>Page</th>
            <th>Vues</th>
            <th>Taux de rebond</th>
            <th>Statut</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>/accueil</td>
            <td>12,450</td>
            <td>32.1%</td>
            <td>Excellent</td>
          </tr>
          <tr>
            <td>/produits</td>
            <td>8,920</td>
            <td>45.6%</td>
            <td>Moyen</td>
          </tr>
          <tr>
            <td>/blog</td>
            <td>6,430</td>
            <td>68.2%</td>
            <td>À améliorer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

/* Palette de couleurs cohérente */
:root {
  /* Primaire - Indigo (confiance, professionnalisme) */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;

  /* Succès - Vert */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  /* Erreur - Rouge */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;

  /* Avertissement - Ambre */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  /* Neutres */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.6;
}

.dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* En-tête */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
}

.dashboard-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
}

.header-actions {
  display: flex;
  gap: 1rem;
}

/* Boutons avec hiérarchie claire */
.button {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-primary {
  background-color: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

.button-primary:hover {
  background-color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.button-secondary {
  background-color: #ffffff;
  color: var(--gray-700);
  border: 2px solid var(--gray-300);
}

.button-secondary:hover {
  background-color: var(--gray-50);
  border-color: var(--gray-400);
}

/* Grille de métriques */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.metric-card {
  background: #ffffff;
  padding: 1.75rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-card-success {
  border-left-color: var(--success-500);
}

.metric-card-warning {
  border-left-color: var(--warning-500);
}

.metric-card-primary {
  border-left-color: var(--primary-500);
}

.metric-card-error {
  border-left-color: var(--error-500);
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.metric-card-success .metric-icon {
  background-color: var(--success-50);
  color: var(--success-600);
}

.metric-card-warning .metric-icon {
  background-color: var(--warning-50);
  color: var(--warning-600);
}

.metric-card-primary .metric-icon {
  background-color: var(--primary-50);
  color: var(--primary-600);
}

.metric-card-error .metric-icon {
  background-color: var(--error-50);
  color: var(--error-600);
}

.metric-content {
  flex: 1;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--gray-500);
  font-weight: 500;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.metric-change {
  font-size: 0.875rem;
  font-weight: 500;
}

.metric-change.positive {
  color: var(--success-600);
}

.metric-change.negative {
  color: var(--error-600);
}

.metric-change.neutral {
  color: var(--gray-500);
}

/* Tableau de données */
.data-table-container {
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}

.data-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

.data-table tbody tr:hover {
  background-color: var(--gray-50);
}

/* Badges de statut */
.status-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-success {
  background-color: var(--success-100);
  color: var(--success-700);
}

.status-warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.status-error {
  background-color: var(--error-100);
  color: var(--error-700);
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard {
    padding: 1rem;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .data-table-container {
    overflow-x: auto;
  }
}

Checklist finale

Avant de valider votre palette :

Cohérence :

Accessibilité :

Psychologie :

Technique :

Conclusion

La couleur est un outil puissant mais qui nécessite méthode et rigueur. En maîtrisant la psychologie des couleurs, la théorie chromatique et les standards d’accessibilité, vous créerez des interfaces visuellement cohérentes et efficaces.

Points clés à retenir :

Prochaines étapes :

La maîtrise de la couleur transformera vos designs d’amateurs en créations professionnelles. Pratiquez régulièrement et n’ayez pas peur d’expérimenter !

Ressources complémentaires :

À propos de l'auteur

Pascal

Pascal — SRE & Observability Engineer. J'applique les pratiques SRE (SLI/SLO, alerting, observabilité) à mon homelab Proxmox, avec les mêmes exigences qu'en production.

À propos nines.arewel.com LinkedIn GitHub X Tous les articles