Aller au contenu principal

📚 Les couleurs

Maintenant que vous savez comment intégrer du CSS à vos pages, voyons de façon plus précise comment géréer les couleurs.

Formats de couleurs​

Noms de couleurs prédéfinis​

CSS propose plusieurs noms de couleurs prédéfinis. En voici quelques exemples:

.rouge { color: red; }
.bleu { color: blue; }
.vert { color: green; }
.noir { color: black; }
.blanc { color: white; }
.gris { color: gray; }
.orange { color: orange; }
.violet { color: purple; }

Vous pouvez trouver une liste exhaustive ici: https://www.w3.org/wiki/CSS/Properties/color/keywords

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="rouge">Texte rouge</p>
  <p class="bleu">Texte bleu</p>
  <p class="vert">Texte vert</p>
  <p class="orange">Texte orange</p>
  <p class="violet">Texte violet</p>
  <p class="gris">Texte gris</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Format RGB et RGBA​

Le format RGB spécifie les valeurs Rouge, Vert, Bleu (0-255). RGBA ajoute un canal alpha pour la transparence (0-1).

/* Format RGB */
.rouge-rgb { color: rgb(255, 0, 0); }      /* Rouge pur */
.vert-rgb { color: rgb(0, 128, 0); }       /* Vert foncé */
.bleu-rgb { color: rgb(0, 0, 255); }       /* Bleu pur */

/* Format RGBA avec transparence */
.rouge-transparent { color: rgba(255, 0, 0, 0.5); }    /* Rouge 50% transparent */
.vert-transparent { color: rgba(0, 128, 0, 0.7); }     /* Vert 30% transparent */
.bleu-transparent { color: rgba(0, 0, 255, 0.3); }     /* Bleu 70% transparent */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="rouge-rgb">Rouge RGB(255, 0, 0)</p>
  <p class="vert-rgb">Vert RGB(0, 128, 0)</p>
  <p class="bleu-rgb">Bleu RGB(0, 0, 255)</p>
  
  <h3>Avec transparence (RGBA)</h3>
  <p class="rouge-transparent">Rouge avec 50% transparence</p>
  <p class="vert-transparent">Vert avec 30% transparence</p>
  <p class="bleu-transparent">Bleu avec 70% transparence</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Format hexadécimal​

Le format hexadécimal utilise le symbole # suivi de 6 caractères représentant les valeurs Rouge-Vert-Bleu.

Le système hexadécimal (base 16) utilise:

  • Chiffres : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • Lettres : A, B, C, D, E, F (équivalent à 10, 11, 12, 13, 14, 15)

Décomposition de couleurs hexadécimales

Voici un exemple de décomposition de différentes couleurs hexadécimales, avec leur équivalent décimal en RGB.

Couleur hexRouge (RR)Vert (GG)Bleu (BB)Équivalent RGB
#FF0000FF = 25500 = 000 = 0rgb(255, 0, 0)
#00FF0000 = 0FF = 25500 = 0rgb(0, 255, 0)
#0000FF00 = 000 = 0FF = 255rgb(0, 0, 255)
#FF8C00FF = 2558C = 14000 = 0rgb(255, 140, 0)
#80808080 = 12880 = 12880 = 128rgb(128, 128, 128)
astuce

Chaque groupe de deux caractères représente un chiffre entre 0 et 255. Le premier groupe de 2 représente l'intensité de la couleur rouge, puis le groupe suivant la couleur vert et finalement la couleur bleue. Il

/* Format long (6 caractères) */
.rouge-hex { color: #FF0000; }    /* Rouge pur */
.vert-hex { color: #00FF00; }     /* Vert pur */
.bleu-hex { color: #0000FF; }     /* Bleu pur */
.gris-hex { color: #808080; }     /* Gris moyen */

/* Format court (3 caractères) - équivalent au format long */
.rouge-court { color: #F00; }     /* Équivaut à #FF0000 */
.vert-court { color: #0F0; }      /* Équivaut à #00FF00 */
.bleu-court { color: #00F; }      /* Équivaut à #0000FF */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="rouge-hex">Rouge #FF0000</p>
  <p class="vert-hex">Vert #00FF00</p>
  <p class="bleu-hex">Bleu #0000FF</p>
  <p class="violet-hex">Violet #9932CC</p>
  <p class="orange-hex">Orange #FF8C00</p>
  <p class="gris-hex">Gris #808080</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Propriétés utilisant les couleurs​

Voici les principales propriétés pour contrôler les couleurs de votre contenu.

Couleur du texte (color)​

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

.texte-rouge { color: #e74c3c; }
.texte-bleu { color: rgb(52, 152, 219); }

Couleur de fond (background-color)​

La propriété background-color définit la couleur d'arrière-plan d'un élément.

body { background-color: #333333; }
.fond-jaune { background-color: #f1c40f; }
.fond-rouge { background-color: rgba(231, 76, 60, 0.8); }
.fond-vert { background-color: hsl(141, 71%, 48%); }
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="exemple-1">
      <p>Texte blanc sur fond bleu</p>
  </div>
  
  <div class="exemple-2">
      <p>Texte bleu foncé sur fond jaune</p>
  </div>
  
  <div class="exemple-3">
      <p>Texte blanc sur fond vert semi-transparent</p>
  </div>
  
  <div class="exemple-4">
      <p class="texte-rouge">Texte rouge sur fond gris clair</p>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Couleur d'arrière-plan de la page​

Il est fréquent d'utiliser background-color sur le body de la page pour changer la couleur d'arrière-plan de la page entière. Pour cela, il suffit de:

body {
  background-color: #cacaca;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>La couleur de fond de la apge a été changée pour du gris (#cacaca).</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Couleur des bordures (border-color)​

Les bordures peuvent avoir des couleurs spécifiques pour chaque côté.

On définit une bordure avec la syntaxe border: [largeur] [type] [couleur];.

Par exemple:

.bordure-rouge { border: 2px solid #e74c3c; }
.bordure-multiple { 
    border-top: 3px solid red;
    border-right: 3px solid blue;
    border-bottom: 3px solid green;
    border-left: 3px solid orange;
}

Autres propriétés utilisant les couleurs​

/* Couleur du soulignement */
.souligne-rouge { 
    text-decoration: underline;
    text-decoration-color: #e74c3c;
}

/* Couleur de l'ombre */
.ombre-coloree { 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* Couleur du contour */
.contour-bleu { 
    outline: 2px solid #3498db;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="bordure-simple">
      <p>Bordure rouge simple</p>
  </div>
  
  <div class="bordure-multiple">
      <p>Bordures multicolores</p>
  </div>
  
  <p class="souligne-rouge">Texte avec soulignement rouge</p>
  
  <div class="ombre-coloree">
      <p>Boîte avec ombre bleue</p>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Palettes de couleurs​

Il est important d'avoir une palette de couleurs cohérente pour votre site web. Une bonne palette contient généralement:

  • 1-2 couleurs principales à tonalité modérée (pas de rouge éclatant, par exemple)
  • 1-2 couleurs d'accent (des couleurs qui "ressortent)
  • Quelques nuances de gris pour les textes, arrière-plans ou éléments d'interface secondaires

Outil recommandé pour générer des palettes​

L'outil Coolors.co est excellent pour générer des palettes de couleur!

palette

Couleurs monochromatiques​

Une palette monochromatique utilise différentes nuances d'une même couleur.

/* Palette bleue monochromatique */
.bleu-tres-clair { color: hsl(220, 50%, 90%); }
.bleu-clair { color: hsl(220, 50%, 70%); }
.bleu-moyen { color: hsl(220, 50%, 50%); }
.bleu-fonce { color: hsl(220, 50%, 30%); }
.bleu-tres-fonce { color: hsl(220, 50%, 10%); }
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h3>Palette monochromatique</h3>
  <div class="couleur bleu-1">Très clair</div>
  <div class="couleur bleu-2">Clair</div>
  <div class="couleur bleu-3">Moyen</div>
  <div class="couleur bleu-4">Foncé</div>
  <div class="couleur bleu-5">Très foncé</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Couleurs complémentaires​

Les couleurs complémentaires créent un contraste élevé et sont visuellement attrayantes ensemble.

/* Exemples de couleurs complémentaires */
.bleu-complementaire { color: hsl(220, 100%, 50%); }    /* Bleu */
.orange-complementaire { color: hsl(40, 100%, 50%); }   /* Orange */

.rouge-complementaire { color: hsl(0, 100%, 50%); }     /* Rouge */
.cyan-complementaire { color: hsl(180, 100%, 50%); }    /* Cyan */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h3>Couleurs complémentaires</h3>
  <div class="couleur comp-1">Bleu</div>
  <div class="couleur comp-2">Orange</div>
  <div class="couleur comp-3">Rouge</div>
  <div class="couleur comp-4">Cyan</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Transparence et opacité​

Propriété opacity​

La propriété opacity affecte la transparence de tout l'élément et ses enfants.

.transparent-50 { opacity: 0.5; }    /* 50% transparent */
.transparent-25 { opacity: 0.25; }   /* 75% transparent */
.opaque { opacity: 1; }              /* Complètement opaque (défaut) */
.invisible { opacity: 0; }           /* Complètement transparent */

Transparence avec rgba​

Pour une transparence sélective, utilisez rgba() sur des propriétés spécifiques.

/* Fond transparent, texte opaque */
.fond-transparent {
    background-color: rgba(52, 152, 219, 0.3);
    color: rgb(44, 62, 80);
}

/* Texte transparent, fond opaque */
.texte-transparent {
    background-color: rgb(241, 196, 15);
    color: rgba(44, 62, 80, 0.6);
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="fond-image">
      <div class="boite opacity-100">
          <p>Opacité 100%</p>
      </div>
      
      <div class="boite opacity-50">
          <p>Opacité 50%</p>
      </div>
      
      <div class="boite opacity-25">
          <p>Opacité 25%</p>
      </div>
  </div>
  
  <div class="fond-transparent">
      <p>Fond transparent, texte opaque</p>
  </div>
  
  <div class="texte-transparent">
      <p>Fond opaque, texte semi-transparent</p>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox