Trois écritures pour la même couleur
Sélectionnez une couleur et l'outil vous en donne le code dans les trois notations usuelles du web. Ce sont trois manières d'écrire exactement la même chose, chacune adaptée à un usage différent.
HEX, la notation en dièse suivi de six caractères, est la plus répandue. Compacte, universellement reconnue, c'est celle qu'on copie-colle entre un outil de maquette et une feuille de style.
RGB décrit la couleur par ses composantes rouge, verte et bleue. Son intérêt est la variante avec canal alpha, qui gère la transparence — indispensable pour une superposition ou un voile sur une image.
HSL décrit la teinte, la saturation et la luminosité. C'est de loin la plus utile quand on travaille une palette, pour une raison simple : elle est lisible. Vous pouvez éclaircir une couleur en changeant une seule valeur, ce qui est impossible en HEX sans tâtonner.
Pourquoi HSL change la façon de travailler
Prenez une couleur de marque et déclinez-la : une version claire pour les fonds, une version sombre pour le survol des boutons, une version désaturée pour les éléments désactivés.
En HEX, chaque variante est une valeur sans rapport apparent avec les autres, trouvée à l'estime. En HSL, vous gardez la même teinte et vous ne bougez que la luminosité : la parenté visuelle est garantie, et la palette entière se lit comme une progression.
C'est aussi ce qui permet de construire un thème sombre cohérent sans repartir de zéro.
Le contraste, seul critère non négociable
Une couleur choisie parce qu'elle est jolie sur l'écran du concepteur peut être illisible pour une partie des visiteurs. Ce n'est pas une question de goût mais d'accessibilité.
Les règles d'accessibilité fixent un rapport de contraste minimal entre un texte et son fond, plus exigeant pour le petit texte que pour les grands titres. Le gris clair sur blanc, très à la mode, échoue régulièrement à ce test.
Vérifiez systématiquement le contraste de vos couleurs de texte avant de valider une palette. Un site que 8 % de la population masculine perçoit mal — la proportion de daltonisme — n'est pas un site élégant, c'est un site inutilisable pour ces visiteurs.
Construire une palette qui tient
L'erreur du débutant est de multiplier les couleurs. Une interface cohérente en utilise peu.
Une base solide tient en trois familles : une couleur principale qui porte l'identité, une gamme de neutres — gris, blancs cassés, noirs adoucis — qui occupe l'essentiel de la surface, et une couleur d'accent réservée aux actions importantes.
Ajoutez les couleurs de statut, qui obéissent à des conventions qu'il vaut mieux respecter : vert pour la réussite, rouge pour l'erreur, orange pour l'avertissement. Un site qui affiche ses erreurs en vert désoriente son visiteur, aussi original soit-il.
Deux pièges courants
Le noir pur et le blanc pur. Un texte noir absolu sur fond blanc absolu produit un contraste dur et fatigant à la lecture prolongée. Un gris très sombre sur un blanc légèrement cassé est plus confortable, sans rien perdre en lisibilité.
La couleur comme seule information. Signaler un champ en erreur uniquement par une bordure rouge exclut les visiteurs qui distinguent mal cette couleur. Doublez toujours l'information par un texte ou une icône.
Centraliser ses couleurs
Dès qu'un projet dépasse quelques pages, déclarez vos couleurs comme variables CSS plutôt que de répéter les codes partout.
Changer une teinte devient alors une modification à un seul endroit, et le passage en thème sombre se résume à redéfinir ces variables. Sans cela, la moindre retouche de charte impose de parcourir toutes les feuilles de style à la recherche des occurrences.