Appliquer des couleurs sur des éléments HTML grâce à CSS

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

De façon générale, la propriété color permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété background-color permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

color

Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlignement, les rayures, etc.).

background-color

Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.

text-shadow

Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.

text-decoration-color

Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.

text-emphasis-color

Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.

caret-color

Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple <input> et <textarea> ou les éléments dont l'attribut contenteditable est activé).

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

Bordures

Voir la section Bordures pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.

background-color

Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.

column-rule-color

Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.

outline-color

Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

Il est possible d'utiliser la propriété raccourcie border qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

border-color

Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.

border-left-color, border-right-color, border-top-color, border-bottom-color

Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.

border-block-start-color et border-block-end-color

Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas. Ces propriétés sont complétées par les propriétés border-inline-* qui agissent sur l'autre axe.

border-inline-start-color et border-inline-end-color

Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés writing-mode, direction, and text-orientation qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

L'API Canvas

Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <canvas>. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.

SVG (Scalable Vector Graphics)

Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <img>.

WebGL

L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir le tutoriel WebGL afin d'en savoir plus.

Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <color>.

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que red pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

Il existe trois façons de représenter une couleur RGB en CSS.

La notation hexadécimale

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, red, green, blue qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

"#rrggbb"

Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).

"#rrggbbaa"

Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).

"#rgb"

Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.

"#rgba"

Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaque à 25%, on utilisera "#0000ff44" ou "#00f4".

La notation fonctionnelle RGB

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS rgb(). Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

red, green et blue

Chaque composante doit être un entier (type <integer>) compris entre 0 et 255 (inclus) ou un pourcentage (type <percentage>) compris entre 0% et 100%.

alpha

Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

D'autres personnes préfèrent manipuler la notation HSL ou aussi appelée « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.

La valeur de la teinte (H) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <angle> et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

On peut faire une analogie avec la conception d'une couleur pour une peinture :

1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

Exemples avec HSL

Voici quelques exemples utilisant la notation HSL :

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}

<table>
  <thead>
    <tr>
      <th scope="col">Couleur en notation HSL</th>
      <th scope="col">Exemple</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)</code></td>
      <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)</code></td>
      <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)</code></td>
      <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
    </tr>
  </tbody>
</table>

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

Prenons un exemple et commençons par le résultat :

HTML

Voici le fragment de code HTML utilisé pour cet exemple :

<div class="conteneur">
  <div class="boite boiteGauche">
    <p>Voici la première boîte.</p>
  </div>
  <div class="boite boiteDroite">
    <p>Voici la seconde boîte.</p>
  </div>
</div>

Ce fragment est plutôt simple : on utilise un élément <div> qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <p>).

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

CSS

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

.conteneur {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément <div> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété width et une hauteur avec la propriété height, on définit aussi une marge et une zone de remplissage avec margin et padding.

La règle la plus intéressante est celle où on manipule la propriété border afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

.boite {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec display: flex et on paramètre les propriétés justify-content et align-items avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

.boiteGauche {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

• La couleur de l'arrière-plan est définie grâce à la propriété background-color pour laquelle on fournit la valeur rgb(245, 130, 130).
• Un contour est défini autour de la boîte grâce à la propriété outline. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé darkred) de deux pixels.
• On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété color sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.

.boiteDroite {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

• La propriété background-color est définie avec la notation fonctionnelle HSL : hsl(270deg, 50%, 75%). Cela correspond à un violet.
• La propriété outline permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB rgb(110, 20, 120) (violet foncé).
• La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété color et la valeur hsl(0deg, 100%, 100%) qui correspond au blanc.
• On ajoute une ligne verte ondulée sous le texte avec text-decoration.
• Enfin, on ajoute une ombre au texte avec la propriété text-shadow dont le paramètre de couleur vaut black (noir).

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <input> dont l'attribut type vaut "color".

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

HTML

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <label>) ainsi qu'un paragraphe (<p>) vide dans lequel nous placerons plus tard du texte avec JavaScript.

<div id="box">
  <label for="colorPicker">Couleur de la bordure :</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>

CSS

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    "sans-serif";
}

JavaScript

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  function (event) {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  function (event) {
    output.innerText = "Couleur choisie : " + colorPicker.value;
  },
  false,
);

L'évènement input est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

L'évènement change est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

La couleur de base

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

• Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept ou une émotion dont il serait question sur le site.
• Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.

Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

Agrémenter la palette

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

• Le sélecteur de couleur MDN
• Paletton (en anglais)
• La roue des couleurs en ligne d'Adobe Color CC

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :

La science des couleurs (en anglais) (Khan Academy en association avec Pixar)

Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.

La théorie des couleurs sur Wikipédia (en anglais)

La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

• Medline Plus: Color Blindness
• American Academy of Ophthamology: What Is Color Blindness?
• Color Blindness & Web Design

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

Ensuite, on saisit le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "add complementary" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété color-adjust afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

• Dessiner des graphiques
• Le graphisme sur le Web
• Un outil de sélection de couleur sur MDN