Convertisseur de couleurs

HEX, RGB, HSL, HSV et CMYK avec contrôle de contraste WCAG en direct et tokens CSS.

Ce convertisseur de couleurs prend n'importe quelle couleur CSS que tu colles et ressort le HEX, le RGB, le HSL, le HSV et le CMYK en une seule passe, pour que tu arrêtes de deviner comment la même teinte s'écrit d'un format à l'autre. Il lance un contrôle de contraste WCAG en direct de ton texte sur ton fond, te dit si le noir ou le blanc se lit le mieux par-dessus, et note le résultat face à AA et AAA. De là il déroule les tons clairs et foncés, propose des harmonies complémentaires, analogues et triadiques, enregistre les palettes dans ton navigateur, et écrit des CSS custom properties prêtes à coller sous un préfixe que tu choisis. Tout tourne en local, rien ne quitte la page, et un bouton de rapport remet un résumé propre à un collègue.

100% dans votre navigateur. Rien de ce que vous tapez ne quitte cette page.

Convertisseur de couleurs, labo de contraste WCAG, générateur de palette et de tokens CSS

Trois onglets ouverts. Un pour convertir un HEX en HSL, un pour vérifier qu'on n'aveugle personne, un pour le CSS. J'en ai eu marre, alors voilà tout réuni dans une seule boîte. Colle une couleur comme tu l'écris. Ça te ressort le HEX, le RGB, le HSL, le HSV, le CMYK, un contrôle de contraste en direct sur ton fond, des tons clairs et foncés, quelques harmonies, et des CSS custom properties prêtes à coller telles quelles. Les palettes s'enregistrent directement dans ton navigateur. Et quand tu passes la main à un collègue (ou, soyons honnêtes, quand tu doutes de toi à 23h), le bouton de rapport te sort quelque chose de propre.

Couleur principale

Couleur du texte

Couleur de fond

Préfixe des tokens CSS

Nombre d'étapes

Mode d'harmonie

Palette enregistrée

Formats acceptés : #0f766e, 0f766e, rgb(15 118 110), rgb(15,118,110), hsl(176 77% 26%) et hsl(176,77%,26%). Le contraste est calculé avec la luminance relative WCAG.

Un convertisseur de couleurs devrait t'aider à décider, pas seulement à traduire des valeurs

Ce convertisseur de couleurs fait plus que changer de format : savoir que #0f766e correspond aussi à hsl(176 77% 26%) ne te dit à peu près rien sur le fait de l'utiliser ou pas. La vraie question que je me pose est ailleurs. Est-ce que ça restera lisible une fois transformé en bouton, ou réduit à une légende sur une carte sombre que personne n'a demandée ? Un simple convertisseur te laisse là, sans réponse. Moi, je voulais celui qui me file le CSS exact, qui calcule le contraste, et qui me montre les couleurs côte à côte avant que j'engage la moindre ligne dans une feuille de style.

Et c'est tout le boulot ici. Donne-lui n'importe lequel des formats de couleur CSS habituels. Ça ressort le HEX, le RGB, le HSL, le HSV, le CMYK, puis ça lance le contraste sur le fond que tu lui as passé et ça te dit si le texte noir ou blanc l'emporte en haut. Ça déroule les tons clairs et foncés. Ça te propose des couleurs complémentaires et analogues. Ça retient les palettes d'une visite à l'autre, et ça écrit les CSS custom properties pour que tu les colles directement dans ta feuille ou dans une note de design, sans rien retaper.

Comment lire le résultat de contraste

Sous le capot, ça compare juste la luminosité de deux couleurs l'une par rapport à l'autre, rien de plus sorcier. Le texte courant veut 4.5:1 pour valider AA, 7:1 pour AAA. Le grand texte passe à 3:1. Et c'est peut-être moi, mais je trouve qu'on abuse de cette tolérance des 3:1 en permanence. J'ai vu passer des étiquettes gris pâle et des liens de nav fins comme un fil que personne au-dessus de quarante ans ne peut lire. Alors ne teste pas ta couleur de marque flottant dans le vide. Teste-la à la taille et à la graisse qu'elle aura vraiment en prod, sur le fond où elle se posera vraiment.

Texte normal AA veut 4.5:1 ou mieux. C'est la barre que je tiens pour la plupart des textes, sans exception que je puisse défendre.
Grand texte AA s'en sort de justesse à 3:1. Très bien pour un titre. Pas un permis de rétrécir le corps de texte.
Texte normal AAA demande 7:1, et ça vaut le coup de viser ça sur tout ce que les gens lisent vraiment sur la longueur.
Les états de focus doivent tenir tout seuls. Ne t'appuie pas sur la teinte, parce que pas mal de monde ne percevra tout simplement pas le changement.
Les noms de tokens devraient dire ce que fait la couleur, pas à quoi elle ressemble. Le toi de dans six mois te dira merci.

Exemples courants de débogage couleur

Couleur de marque qui rate sur du blanc ? Tu as des options. Assombris-la d'un cran. Ou inverse, fais-en le fond, texte blanc par-dessus. Ou alors range-la sagement dans les bordures et les icônes, où le contraste n'a presque aucune importance. Quand chaque nuance se fond dans la suivante, joue sur la lightness et laisse la saturation où elle est. C'est presque toujours le bon réflexe. Une palette qui semble morte a en général juste besoin de quelques neutres discrets sur lesquels s'appuyer, en gardant les teintes voyantes en réserve pour les actions et les alertes. Et pour les graphiques, par pitié, ne laisse pas la couleur porter tout le message à elle seule. Appuie-la avec une étiquette ou une forme. Toute personne daltonienne dans la pièce te remerciera, et la prochaine personne qui imprimera le truc en niveaux de gris aussi.

Questions fréquentes

Le HEX est-il plus précis que le RGB ou le HSL ?

Non. C'est un mythe répandu, pourtant. Ce sont trois façons d'écrire exactement la même couleur sRGB, et ce sont les mêmes pixels qui s'affichent à l'écran dans tous les cas. Je prends le HSL quand je veux jouer sur la lightness à la main, le HEX ou le RGB quand je dépose des valeurs dans du CSS. Celui qui rend l'édition la moins pénible, prends celui-là.

Un ratio de contraste garantit-il un bon design ?

Loin de là. C'est un plancher, pas une ligne d'arrivée. Passer 4.5:1 veut dire que le texte est lisible. Point. La taille de police, l'interlignage, l'état au survol, tout ce qui se bouscule autour sur la page, tout ça décide encore si le truc se lit bien ou se contente de passer techniquement.

Les palettes générées sont-elles prêtes pour la prod ?

Considère-les comme un solide premier jet. Elles te mèneront une bonne partie du chemin, mais je ne les figerais pas en tokens finaux sans les avoir d'abord posées dans de vrais boutons et de vraies cartes. Une couleur a une certaine allure dans une grille de swatches bien rangée et une tout autre sur un vrai écran.

Comment convertir une couleur HEX en RGB ?

Découpe les six chiffres en trois paires, puis lis chaque paire comme un nombre en base 16. Donc 0f devient 15. Tu n'as vraiment pas à faire ça à la main, cela dit. Colle la couleur plus haut et le RGB, le HSL et l'alpha tombent tout de suite.

Quelle est la différence entre HSL et RGB ?

Le RGB mélange de la lumière : combien de rouge, de vert et de bleu tu empiles. Le HSL parle plutôt en hue, saturation et lightness, ce qui colle franchement plus près de la façon dont mon cerveau fonctionne. « Même couleur, juste plus clair » c'est un seul chiffre en HSL. En RGB, c'est un jeu de devinettes.