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'à 256³ = 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;
}

Modèle HSL

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

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

La propriété CSS opacity permet de régler la transparence d'un élément HTML. Par défaut, Cette transparence s'applique à tous les éléments HTML (texte, image, vidéo) imbriqués dans l'élément HTML concerné.
Les fonction CSS rgba() et hsla() permettent de préciser la valeur du canal alpha d'une couleur. Comme pour l'opacité, cette valeur est comprise entre 0 (transparent) et 1 (opaque). Avec cette technique, il est possible d'avoir des éléments HTML d'opacités différentes au sein d'un même élément HTML parent.

p {
  background-color: white;
  color: yellow;
  opacity: 0.5;
}

<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(255, 255, 255, 0.5);
  color: yellow;
}

<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>

Outils en ligne

Exercice

Ajoutez de la couleur dans les documents Web emoticons.html et twitter.html.