Couleur

Propriétés CSS

Puisque l'utilisation de la couleur influe sur l'apparence visuelle d'un document Web, elle est du ressort de la feuille de style. Voici la liste des principales propriétés CSS qui permettent de faire usage de la couleur.

color

Couleur du texte d'un élément HTML.

background-color

Couleur du fond d'un élément HTML.

border-color

Couleur du bord d'un élément HTML. La taille du bord (propriété border-width) ne doit pas être nulle.

opacity

Opacité d'un élément HTML. Valeur décimale comprise entre 0 (transparent) et 1 (opaque).

Modèles de couleur

Couleurs prédéfinies

Il existe un ensemble de 16 couleurs prédéfinies dans les spécifications de CSS. Chaque couleur est identifiée par un mot clé. Cette liste a été complétée avec CSS3 par 131 nouvelles couleurs.

Modèle RGB

Selon le principe de la synthèse additive, on peut générer une grande variété de couleurs à partir des trois couleurs rouge, vert et bleu. En utilisant 256 nuances pour chaque couleur, on peut ainsi produire jusqu'à 2563 = 16 777 216 couleurs différentes.

la fonction CSS rgb() permet de définir une couleur à partir des quantités de rouge, de vert et de bleu. Une couleur peut aussi être représentée par son écriture hexadécimale (chaque composante est alors exprimée en base 16).

h1 {
  /* couleur du texte en jaune */
  color: rgb(255, 255, 0);
}

h2 {
  /* couleur du texte en jaune aussi */
  color: #FFFF00;
}
RGB
Figure 1. Cube RGB.
HSL
Figure 2. Cylindre HSL.

Modèle HSL logo CSS3

HSL est un modèle de couleur alternatif à RGB. La teinte (hue) est représentée par un angle exprimé en degrés couvrant tout le spectre colorimétrique. La saturation, exprimée en pourcentage, permet de jouer sur le contraste, enfin la luminance (lightness) permet de définir une couleur plus ou moins claire. La fonction CSS hsl() permet de définir une couleur à l'aide de ce modèle.

h1 {
  /* couleur du texte en ? */
  color: hsl(225, 96%, 66%);
}

En résumé, vous disposez de quatre manières pour exprimer une couleur en CSS. Pour le rose par exemple :

pink = rgb(255, 192, 203) = #FFC0CB = hsl(350, 100%, 88%)

Transparence : alpha channel vs. opacity logo CSS3

Il est désormais possible de jouer sur la transparence des éléments HTML en CSS.

p {
  background-color: black;
  color: yellow;
  opacity: 0.2;
}
<p>
  L'étranger arriva en février, par une matinée brumeuse, dans un tourbillon
  de vent et de neige. Il venait, à pied, par la dune, de la station de
  Bramblehurst, portant de sa main couverte d'un gant épais, une petite valise
  noire. Il était bien enveloppé des pieds à la tête, et le bord d'un chapeau
  de feutre mou ne laissait apercevoir de sa figure que le bout luisant de son
  nez. La neige s'était amoncelée sur ses épaules, sur sa poitrine ; elle ajoutait
  aussi une crête blanche au sac dont il était chargé.
</p>

L'étranger arriva en février, par une matinée brumeuse, dans un tourbillon de vent et de neige. Il venait, à pied, par la dune, de la station de Bramblehurst, portant de sa main couverte d'un gant épais, une petite valise noire. Il était bien enveloppé des pieds à la tête, et le bord d'un chapeau de feutre mou ne laissait apercevoir de sa figure que le bout luisant de son nez. La neige s'était amoncelée sur ses épaules, sur sa poitrine ; elle ajoutait aussi une crête blanche au sac dont il était chargé.

p {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 0, 0.4);
}

span {
  color: rgba(255, 255, 0, 1)
}
<p>
  L'étranger arriva en février, par une matinée brumeuse, dans un tourbillon
  de vent et de neige. Il venait, à pied, par la dune, de la station de
  Bramblehurst, portant de sa main couverte d'un gant épais, <span>une petite valise
  noire</span>. Il était bien enveloppé des pieds à la tête, et le bord d'un chapeau
  de feutre mou ne laissait apercevoir de sa figure que le bout luisant de son
  nez. La neige s'était amoncelée sur ses épaules, sur sa poitrine ; elle ajoutait
  aussi une crête blanche au sac dont il était chargé.
</p>

L'étranger arriva en février, par une matinée brumeuse, dans un tourbillon de vent et de neige. Il venait, à pied, par la dune, de la station de Bramblehurst, portant de sa main couverte d'un gant épais, une petite valise noire. Il était bien enveloppé des pieds à la tête, et le bord d'un chapeau de feutre mou ne laissait apercevoir de sa figure que le bout luisant de son nez. La neige s'était amoncelée sur ses épaules, sur sa poitrine ; elle ajoutait aussi une crête blanche au sac dont il était chargé.

6.4. Outils en ligne

Exercice 15

Ajoutez de la couleur dans les documents Web conditions_generales_itunes.html et figaro.html.