Article
Outils de couleur pour le web : hex, palettes et accessibilité
Choisir des couleurs pour un site web semble simple jusqu'à ce que vous tombiez sur des codes hex, des triplets RGB et des angles HSL qui décrivent tous la même chose de façons différentes. Cet article explique comment ces formats sont liés, comment transformer une seule couleur de marque en palette utilisable, et comment garantir que le résultat reste lisible pour les personnes qui voient la couleur autrement.
Le hex, le RGB et le HSL décrivent la même couleur
Une couleur à l'écran est mélangée à partir de lumière rouge, verte et bleue. La notation hex écrit ces trois canaux sous la forme d'un code de six caractères comme #2563eb, où chaque paire de caractères correspond à un canal allant de 00 à ff. Le RGB écrit les trois mêmes nombres en décimal, de 0 à 255, ce qui est plus facile à lire mais n'apporte rien de plus. Le HSL adopte une autre approche : il décrit une couleur par sa teinte (une position sur la roue chromatique de 0 à 360 degrés), sa saturation (à quel point elle est vive) et sa luminosité (sa proximité avec le blanc ou le noir). Le HSL est le format vers lequel les designers se tournent quand ils veulent ajuster une couleur, car augmenter la luminosité ou décaler la teinte est un seul changement intuitif plutôt que trois nombres couplés. Un convertisseur vous laisse passer entre les trois, pour que vous puissiez lire une valeur dans un format et l'utiliser dans un autre.
Transformer une couleur en palette
Une seule couleur de marque suffit rarement. Une palette qui fonctionne a généralement besoin d'une couleur principale, d'un ou deux accents, et d'un ensemble de gris neutres pour le texte et les arrière-plans. Les relations entre les couleurs suivent des règles simples sur la roue chromatique : les couleurs complémentaires se font face, les couleurs analogues se trouvent côte à côte pour un effet apaisant, et un ensemble triadique répartit trois couleurs de façon égale pour offrir du contraste sans dissonance. Un outil de schéma de couleurs applique ces règles à votre couleur de départ et vous donne les codes hex correspondants, ce qui vous évite de calculer les angles à la main. Si vous avez déjà une image dont l'ambiance vous plaît, un extracteur de palette y lit les couleurs dominantes, une façon rapide de baser un site sur une photo ou un logo.
Contraste et daltonisme
Une palette qui rend bien sur votre écran peut tout de même échouer auprès de certains lecteurs. Environ un homme sur douze et une femme sur deux cents présentent une forme de déficience de la vision des couleurs, le plus souvent une difficulté à distinguer le rouge du vert. Si votre seul signal pour une erreur est un texte rouge sur un bouton vert, ces lecteurs ne le voient pas. La solution n'est pas d'éviter la couleur mais de ne jamais s'appuyer sur elle seule : associez-la à une icône, un libellé ou une forme, et conservez assez de contraste de luminosité entre le texte et son fond. Un simulateur de daltonisme vous montre comment votre palette apparaît selon les types courants de vision des couleurs, pour que vous puissiez repérer un problème avant la mise en ligne plutôt qu'après une plainte.
Faire tout cela dans le navigateur
Aucune de ces étapes n'a besoin d'un serveur. Convertir un code hex, générer un schéma, lire les couleurs d'une image et simuler le daltonisme sont tous de petits calculs qu'un navigateur traite instantanément. Cela compte quand l'image que vous échantillonnez est un design non publié ou le logo d'un client : avec les outils ici, le fichier reste sur votre appareil et rien n'est envoyé. Vous obtenez le même résultat qu'avec un service en ligne, sans confier votre création. Le convertisseur de couleurs, le générateur de schéma de couleurs, l'extracteur de palette et le simulateur de daltonisme fonctionnent tous en local et de la même manière hors ligne une fois la page chargée.
OKLCH et les espaces colorimétriques étendus
Hex, RGB et HSL décrivent tous des couleurs dans le gamut sRGB que les écrans utilisent depuis des années. Les écrans récents en affichent davantage, et le CSS peut désormais y accéder avec la fonction color() et l’espace Display P3, qui ajoute des verts et des rouges que le sRGB ne sait pas représenter. Le vrai changement est OKLCH, une façon d’écrire la couleur en clarté, chroma et teinte qui suit la manière dont l’œil perçoit réellement la luminosité. En HSL, un jaune et un bleu à la même clarté de 50 % n’ont rien à voir : le jaune paraît clair, le bleu paraît sombre. En OKLCH, garder la clarté fixe et ne changer que la teinte maintient la luminosité perçue stable. Cela rend possible une palette où chaque nuance atteint la même cible de contraste en verrouillant un seul nombre, au lieu d’ajuster chaque couleur à la main.
Outils mentionnés dans cet article
- Convertisseur de couleursConvertissez des couleurs entre HEX, RGB, HSL, HSV et CMYK. Vérificateur de contraste WCAG inclus. Aucun upload.
- Générateur de palettesGénérez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques depuis une couleur de base. Aucun upload.
- Extracteur de paletteExtrayez les couleurs dominantes d'une image sous forme de nuances HEX. Copiez n'importe quelle couleur. Aucun upload.
- Simulateur de daltonismeSimulez la protanopie, deutéranopie, tritanopie et achromatopsie sur une image. Aucun upload.
Questions fréquentes
Quelle est la différence entre le hex et le RGB ?
Ce sont deux manières d'écrire la même couleur. Le hex regroupe les canaux rouge, vert et bleu dans un code de six caractères en base 16, tandis que le RGB liste ces trois mêmes canaux sous forme de nombres décimaux de 0 à 255. #ff0000 et rgb(255, 0, 0) sont le même rouge. Le hex est compact et courant en CSS et dans les fichiers de design, le RGB se lit plus vite d'un coup d'œil, et passer de l'un à l'autre ne change rien à la couleur elle-même.
Comment savoir si mes couleurs sont lisibles pour les utilisateurs daltoniens ?
Passez votre palette dans un simulateur de daltonisme, qui redessine vos couleurs telles qu'une personne ayant chaque type courant de vision des couleurs les verrait. Surveillez les paires qui se fondent dans la même nuance, en particulier les rouges et les verts. L'habitude la plus sûre est de ne jamais utiliser la couleur comme seul repère : appuyez-la d'un texte, d'une icône ou d'un motif, et conservez une différence de luminosité nette entre le premier plan et l'arrière-plan, pour que le sens subsiste même quand la teinte disparaît.