Les couleurs

Formats usuels :

• HEX : #0ea5e9
• RGB : rgb(14, 165, 233)
• HSL : hsl(199, 89%, 48%)
• Alpha : rgba(...) / hsla(...)

h1 { color: #0f172a; }
.badge { background: rgb(14, 165, 233); }
.overlay { background: rgba(2, 6, 23, 0.6); }

Choisir une palette courte et cohérente.

Bonnes pratiques :

• limiter le nombre de couleurs principales
• garder un contraste suffisant entre texte et fond
• utiliser l'alpha pour des overlays et effets subtils

A retenir

Une bonne palette est courte, cohérente et lisible. Mieux vaut 4 couleurs bien choisies que 15 couleurs sans logique.

Mini pratique

Définis une palette simple : primaire, secondaire, texte, fond. Applique-la à une mini carte (titre, paragraphe, bouton).

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.