Créer une palette de couleurs

Outils recommandés

• Coolors : générateur de palettes
• Adobe Color : roue chromatique et harmonies
• Color Hunt : palettes prêtes à l’emploi

---

Règles pour une bonne palette

1. Couleur principale : identité de votre site
2. Couleur secondaire : complément ou contraste
3. Couleurs neutres : texte, fonds, bordures
4. Couleurs d’état : succès (vert), erreur (rouge), warning (orange)

Structure d’une palette complète

:root {
  /* Couleurs principales */
  --color-primary: /* Couleur d'identité */;
  --color-secondary: /* Couleur complémentaire */;
  --color-accent: /* Couleur d'accentuation */;

  /* Couleurs neutres */
  --color-text: /* Texte principal */;
  --color-text-light: /* Texte secondaire */;
  --color-background: /* Fond principal */;
  --color-background-alt: /* Fond alternatif */;
  --color-border: /* Bordures */;

  /* Couleurs d'état (optionnel) */
  --color-success: #2ECC71; /* Vert */
  --color-error: #E74C3C; /* Rouge */
  --color-warning: #F39C12; /* Orange */
}

---

Palettes par public cible

Palette 6-8 ans : Colorée et énergique

:root {
  --color-primary: #FF6B6B;      /* Rouge vif */
  --color-secondary: #4ECDC4;    /* Cyan */
  --color-accent: #FFE66D;       /* Jaune */
  --color-success: #95E1D3;      /* Vert menthe */

  --color-text: #2C3E50;         /* Bleu foncé */
  --color-background: #FFFFFF;    /* Blanc */
  --color-background-alt: #FFF9E6; /* Crème */
}

Caractéristiques :

• ✨ Couleurs vives et joyeuses
• 🎨 Fort contraste pour faciliter la lecture
• 🌈 Plusieurs couleurs pour dynamiser
• 😊 Palette accueillante et ludique

Aperçu visuel :

Primary
#FF6B6B

Secondary
#4ECDC4

Accent
#FFE66D

Success
#95E1D3

---

Palette 8-12 ans : Équilibrée

:root {
  --color-primary: #3498DB;      /* Bleu */
  --color-secondary: #E74C3C;    /* Rouge */
  --color-accent: #F39C12;       /* Orange */
  --color-success: #2ECC71;      /* Vert */

  --color-text: #2C3E50;         /* Gris foncé */
  --color-background: #ECF0F1;    /* Gris très clair */
  --color-background-alt: #FFFFFF; /* Blanc */
}

Caractéristiques :

• 🎯 Équilibre entre fun et sérieux
• 📘 Couleurs moins saturées
• ⚖️ Contraste modéré mais suffisant
• 👦 Adapté aux lecteurs confirmés

Aperçu visuel :

Primary
#3498DB

Secondary
#E74C3C

Accent
#F39C12

Success
#2ECC71

---

Palette ados : Sobre et moderne

:root {
  --color-primary: #5D5FEF;      /* Violet */
  --color-secondary: #FF6584;    /* Rose */
  --color-accent: #00D9FF;       /* Cyan */

  --color-text: #1A1A2E;         /* Presque noir */
  --color-text-light: #7F8C8D;   /* Gris */
  --color-background: #F8F9FA;    /* Gris très clair */
  --color-background-alt: #FFFFFF; /* Blanc */
}

Caractéristiques :

• 🎨 Palette sophistiquée
• 🌑 Couleurs plus sobres
• ✨ Design épuré et moderne
• 🎭 Contraste subtil mais efficace

Aperçu visuel :

Primary
#5D5FEF

Secondary
#FF6584

Accent
#00D9FF

---

Vérifier l’accessibilité des couleurs

Contraste texte/fond

Le contraste entre le texte et le fond doit être suffisant pour être lisible :

• Texte normal : ratio minimum de 4.5:1
• Texte large (18px+ ou 14px+ en gras) : ratio minimum de 3:1

Outil de vérification

Utilisez WebAIM Contrast Checker pour vérifier vos combinaisons.

Exemples :

/* ✅ Bon contraste : 12.63:1 */
.good-contrast {
  color: #2C3E50; /* Texte foncé */
  background-color: #FFFFFF; /* Fond blanc */
}

/* ⚠️ Contraste limite : 4.52:1 */
.limit-contrast {
  color: #7F8C8D; /* Texte gris */
  background-color: #FFFFFF; /* Fond blanc */
}

/* ❌ Mauvais contraste : 2.32:1 */
.bad-contrast {
  color: #FFE66D; /* Texte jaune */
  background-color: #FFFFFF; /* Fond blanc */
}

Attention

Évitez les combinaisons de couleurs avec un contraste insuffisant, surtout pour le texte principal. Cela nuit à la lisibilité et à l’accessibilité.

---

Conseils pratiques

Nombre de couleurs

• Minimum : 1 couleur principale + couleurs neutres
• Idéal : 2-3 couleurs principales + neutres
• Maximum : 5 couleurs au total

Trop de couleurs = confusion visuelle

Tester avec le daltonisme

Environ 8% des hommes et 0.5% des femmes ont une forme de daltonisme. Testez votre palette :

• Coblis Color Blindness Simulator
• Color Oracle (application)

Créer des variations

Pour créer des variations d’une couleur (hover, active, etc.), utilisez HSL :

:root {
  /* Couleur de base */
  --color-primary: hsl(220, 80%, 50%);

  /* Variations automatiques */
  --color-primary-dark: hsl(220, 80%, 40%); /* Même teinte, moins lumineux */
  --color-primary-light: hsl(220, 80%, 60%); /* Même teinte, plus lumineux */
  --color-primary-pale: hsl(220, 80%, 95%); /* Même teinte, très lumineux */
}

/* Utilisation */
button {
  background-color: var(--color-primary);
}

button:hover {
  background-color: var(--color-primary-dark);
}

---

Questions fréquentes

Combien de couleurs dans ma palette ?

• Minimum : 1 couleur principale + couleurs neutres (texte, fond)
• Idéal : 2-3 couleurs principales + neutres
• Maximum : 5 couleurs au total

Quelle est la différence entre primary, secondary et accent ?

• Primary : Couleur d’identité principale (boutons, liens, titres)
• Secondary : Couleur complémentaire (sous-titres, éléments secondaires)
• Accent : Couleur pour attirer l’attention (call-to-action, notifications)

Comment choisir ma couleur principale ?

Basez-vous sur :

• L’émotion que vous voulez transmettre (rouge = énergie, bleu = calme)
• Le public cible (enfants = vif, ados = sobre)
• Le thème de votre histoire

---