La gestion de la couleur en CSS

Les notations de couleur en CSS

Par son nom (mots-clés)

En CSS, une couleur peut s’exprimer de plusieurs façons. Toutes produisent le même résultat visuel — le choix dépend du contexte et de vos préférences de travail. Le CSS reconnaît environ 150 noms de couleurs prédéfinis en anglais. C’est la notation la plus lisible, mais elle est limitée aux couleurs disponibles.

h1 {
  color: red;
}

p {
  color: navy;
}

body {
  background-color: whitesmoke;
}

En hexadécimal

C’est la notation la plus courante en production. Un code hexadécimal commence par toujours par le signe # suivi de 6 caractères (chiffres 0-9 et lettres A-F), groupés par paires : RR (rouge), GG (vert), BB (bleu). Chaque paire va de 00 (aucune intensité) à FF (intensité maximale).

h1 {
  color: #FF0000; // rouge pur
}

h2 {
  color: #336699; // un bleu acier
}

body {
  background-color: #F5F5F5;//gris très clair
}

En RGB (Red, Green, Blue)

La notation fonctionnelle rgb() exprime la couleur avec trois valeurs de 0 à 255, correspondant aux canaux rouge, vert et bleu.

h1 {
  color: rgb(255, 0, 0); // rouge pur
}

div {
  border: solid 3px rgb(45, 117, 144); // un bleu canard
}

En RGBA : RGB avec transparence

En ajoutant un quatrième paramètre (le canal alpha), on contrôle l’opacité de la couleur. La valeur va de 0 (totalement transparent) à 1 (totalement opaque).

/* Un fond bleu canard semi-transparent */
.bandeau {
  background-color: rgba(45, 117, 144, 0.4);
}

/* Un fond noir à 70% d'opacité — utile pour un overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

En HSL (Teinte, Saturation, Luminosité)

La notation hsl() est plus intuitive pour construire des palettes harmonieuses. Elle décrit la couleur par sa teinte (angle sur le cercle chromatique, de 0° à 360°), sa saturation (pureté, intensité, de 0% gris à 100% vif) et sa luminosité (de 0% noir à 100% blanc). Le HSL est pratique pour créer des variations d’une même couleur (plus claire, plus foncée, plus terne) sans changer la teinte.

h1 {
  color: hsl(210, 60%, 40%); // un bleu moyen
}

/* Comme pour RGB, on peut ajouter un canal alpha */
.bandeau {
  background-color: hsla(210, 60%, 40%, 0.5); // le même bleu, semi-transparent
}

Récapitulatif des notations

Les propriétés de couleur essentielles

En CSS, la couleur s’applique principalement via trois propriétés :

color : la couleur du texte

p {
  color: #333333;    /* gris foncé — plus doux que le noir pur */
}

a {
  color: #2563EB;    /* bleu vif pour les liens */
}

background-color : la couleur de fond

body {
  background-color: #FAFAFA;     /* fond gris très clair */
}

.alerte {
  background-color: #FEF2F2;    /* fond rouge pâle */
  color: #991B1B;                /* texte rouge foncé */
  padding: 1rem;
  border-radius: 8px;
}

border-color : la couleur de la bordure

/* La couleur de bordure peut être définie séparément... */
.carte {
  border: 2px solid;
  border-color: #E5E7EB;
}

/* ...ou directement dans la propriété raccourcie border */
.carte {
  border: 2px solid #E5E7EB;
}

Les dégradés CSS

Le CSS permet de créer des dégradés directement, sans image. Ils s’appliquent via la propriété background (et non background-color).

/* Dégradé linéaire : du haut vers le bas par défaut */
.bandeau {
  background: linear-gradient(#336699, #66CCFF);
}

/* Dégradé avec direction */
.bandeau-horizontal {
  background: linear-gradient(to right, #FF6B6B, #FFE66D);
}

/* Dégradé avec angle */
.bandeau-diagonal {
  background: linear-gradient(135deg, #667EEA, #764BA2);
}

/* Dégradé radial : du centre vers l'extérieur */
.rond {
  background: radial-gradient(circle, #FFE66D, #FF6B6B);
}

Les variables CSS pour gérer sa palette

En début de projet, prenez le temps de définir votre palette en variables CSS. Vous gagnerez un temps considérable par la suite, et la cohérence de vos couleurs sera garantie.. On déclare les variables dans le sélecteur :root (qui cible la page entière), puis on les utilise avec la fonction var().

/* Je définis ma palette une seule fois */
:root {
  --couleur-primaire: #2563EB;
  --couleur-secondaire: #7C3AED;
  --couleur-texte: #1F2937;
  --couleur-fond: #F9FAFB;
  --couleur-bordure: #E5E7EB;
}

/* Je les utilise partout dans mon CSS */
body {
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
}

h1, h2 {
  color: var(--couleur-primaire);
}

a {
  color: var(--couleur-secondaire);
}

.carte {
  border: 1px solid var(--couleur-bordure);
}

Accessibilité et contraste

Un bon design est un design lisible par tous. Le contraste entre le texte et son fond est un critère fondamental d’accessibilité, encadré par les normes WCAG (Web Content Accessibility Guidelines).

Les règles de contraste WCAG

Les normes d’accessibilité définissent des ratios de contraste minimum entre le texte et son arrière-plan :

• Texte normal : ratio minimum de 4.5:1 (niveau AA)
• Texte large (18px gras ou 24px) : ratio minimum de 3:1 (niveau AA)
• Niveau AAA (optimal) : ratio de 7:1 pour le texte normal

/* ❌ Contraste insuffisant — difficile à lire */
.mauvais {
  color: #AAAAAA; // gris clair */
  background-color: #FFFFFF; // fond blanc
  // Ratio : 2.3:1 — très en dessous du minimum
}

// ✅ Contraste suffisant — lisible par tous 
.bon {
  color: #1F2937; // gris très foncé
  background-color: #FFFFFF; // fond blanc
  // Ratio : 15.4:1 — excellent contraste
}

Vérifier son contraste

Plusieurs outils gratuits permettent de tester le ratio de contraste de vos combinaisons de couleurs :

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — saisissez deux couleurs et vérifiez instantanément le ratio
• L’inspecteur du navigateur — dans Chrome et Firefox, survolez une propriété color dans l’onglet Styles : le ratio de contraste s’affiche automatiquement
• Adobe Color Accessibility Tools — dans Adobe Color, l’onglet “Accessibilité” vérifie votre palette complète

Construire une harmonie colorée

Les types d’harmonies

Une harmonie colorée est un ensemble de couleurs qui s’associent bien ensemble. On les nomme et catégorise de la façon suivante :

• Complémentaire : deux couleurs opposées sur le cercle chromatique (ex : bleu et orange). Fort contraste, dynamique.
• Analogue : deux ou trois couleurs voisines sur le cercle (ex : bleu, bleu-vert, vert). Doux, harmonieux.
• Triadique : trois couleurs équidistantes sur le cercle (ex : rouge, jaune, bleu). Vivant, équilibré.
• Monochromatique : une seule teinte déclinée en différentes saturations et luminosités. Sobre, élégant.

Les outils pour créer sa palette

• Adobe Color : pour créer des harmonies à partir du cercle chromatique, explorer des palettes existantes
• Coolors : pour générer des palettes aléatoires ou personnalisées, et les exporter
• HTML Color Codes : sélectionner des couleurs avec leurs codes hex, RGB et HSL
• Realtime Colors : pour prévisualiser sa palette directement sur un faux site Web, très utile pour juger du rendu final

Une méthode simple pour débuter

Pour un premier projet, définissez 5 couleurs maximum :

1. Couleur primaire : votre couleur principale, celle qui identifie votre site (ex : le bleu d’un site corporate)
2. Couleur secondaire : une couleur d’accent pour les éléments interactifs ou les mises en avant
3. Couleur de texte : un gris très foncé
4. Couleur de fond : un blanc cassé ou gris très clair
5. Couleur de bordure/séparateur : un gris léger pour structurer visuellement

/* Exemple de palette minimaliste en variables CSS */
:root {
  --primaire: #2563EB;       /* bleu vif */
  --secondaire: #F59E0B;     /* ambre / orange */
  --texte: #1F2937;          /* gris charbon */
  --fond: #F9FAFB;           /* blanc cassé */
  --bordure: #E5E7EB;        /* gris clair */
}

Bonnes pratiques

• Évitez le noir pur (#000000) et le blanc pur (#FFFFFF) pour le texte et les fonds : un gris très foncé sur un blanc cassé est plus agréable à lire
• Vérifiez toujours le contraste de vos combinaisons texte/fond avec un outil dédié : c’est un réflexe à prendre dès le premier projet
• Ne transmettez jamais une information uniquement par la couleur ; pensez aux personnes daltoniennes
• Limitez votre palette à 4-5 couleurs maximum pour éviter un effet trop bariolé
• Utilisez la notation hexadécimale comme standard dans votre projet pour la cohérence, sauf si vous avez besoin de transparence (auquel case, rgba() ou hsla())
• Pour aller plus loin, définissez votre palette en variables CSS dès le début du projet pour garantir la cohérence et facilite les modifications futures