Partie 12 — Couleurs & backgrounds : contrastes, gradients et images de fond

Les couleurs donnent une identité à un site. Elles influencent l’émotion, la compréhension et la lisibilité.

Un mauvais choix de couleurs peut rendre un site difficile à lire, même si le contenu est excellent.

Dans cette partie, nous allons apprendre à utiliser les couleurs et les arrière-plans en CSS de manière simple, logique et efficace.

👉 Les couleurs doivent servir le contenu, pas le masquer.

1) La propriété color : couleur du texte

La propriété color définit la couleur du texte.

p {
  color: #333333;
}
  

Le texte gris foncé est souvent plus agréable à lire que le noir pur.

2) Les formats de couleurs en CSS

CSS propose plusieurs formats pour définir une couleur.

Noms de couleurs

h1 {
  color: blue;
}
  

Hexadécimal (le plus courant)

h1 {
  color: #2563eb;
}
  

RGB / RGBA

p {
  color: rgb(34, 34, 34);
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
}
  

3) background-color : couleur de fond

background-color définit la couleur de fond d’un élément.

.card {
  background-color: #f1f5f9;
}
  

Les arrière-plans clairs sont souvent utilisés pour les zones de contenu.

4) Le contraste : lisibilité avant tout

Le contraste entre le texte et le fond est essentiel.

Exemple lisible :

.section {
  background-color: #ffffff;
  color: #111827;
}
  

Exemple à éviter :

.section {
  background-color: #fef3c7;
  color: #fde68a;
}
  

❌ Manque de contraste = fatigue visuelle.

5) Gradients CSS : transitions de couleurs

Les gradients permettent de créer des transitions entre plusieurs couleurs.

.header {
  background: linear-gradient(135deg, #2563eb, #1e40af);
}
  

Les gradients sont souvent utilisés pour :

• headers
• bannières
• boutons modernes

6) background-image : image de fond

Les images de fond se définissent avec background-image.

.hero {
  background-image: url("images/hero.jpg");
}
  

Ajuster l’image

.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  

7) Overlay : améliorer la lisibilité sur image

Un overlay est souvent utilisé pour rendre le texte lisible sur une image.

.hero {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("images/hero.jpg");
}
  

8) Erreurs fréquentes avec les couleurs

• trop de couleurs différentes
• contraste insuffisant
• images de fond trop chargées
• texte directement sur image sans overlay

Vous savez maintenant utiliser les couleurs et arrière-plans en CSS : contrastes, gradients et images de fond.

Dans la Partie 13, nous allons découvrir Flexbox : aligner et organiser les éléments facilement.

✅ Des couleurs bien choisies rendent un site clair et professionnel.