Convertisseur de couleurs

À propos de cet outil

Ce convertisseur transforme une couleur entre les formats HEX, RGB, HSL, HWB, OKLCH, OKLab et CMJN. Saisissez la couleur dans n'importe quelle écriture acceptée par CSS (#c67139, rgb(198 113 57 / 0.8), hsl(24 55% 50%), oklch(63% 0.13 52), tomato…), choisissez-la avec le sélecteur ou la pipette, et copiez le format voulu en syntaxe moderne ou classique. L'outil donne aussi le nom de couleur CSS le plus proche et le contraste du texte blanc et noir sur cette couleur, avec les niveaux WCAG AA et AAA.

Comment utiliser cet outil

1. Saisissez une couleur dans n'importe quel format CSS, utilisez le sélecteur de couleur ou la pipette (si votre navigateur la propose).
2. Réglez l'opacité avec le curseur : les formats affichés incluent la transparence (rgb(… / 0.5), #rrggbbaa).
3. Choisissez la syntaxe moderne (rgb(198 113 57)) ou classique (rgb(198, 113, 57)), puis copiez le format voulu.
4. Consultez le nom CSS le plus proche et le contraste avec le texte blanc ou noir.

Une même couleur, sept écritures

Un écran fabrique ses couleurs en mélangeant de la lumière rouge, verte et bleue : c'est le modèle RVB (RGB en anglais), et l'espace sRGB est celui de la quasi-totalité des écrans et du web. Toutes les autres écritures décrivent le même point de cet espace, mais avec des axes différents, pensés pour des usages différents.

Pour la transparence, HEX ajoute deux chiffres (#c6713980 pour 50 %) et les autres formats ajoutent une valeur après une barre oblique (rgb(198 113 57 / 0.5)). Depuis CSS Color 4, la syntaxe moderne sépare les valeurs par des espaces ; l'ancienne syntaxe avec virgules, que l'outil propose aussi, reste valide et est requise par des logiciels plus anciens.

HSL est intuitif, mais sa « luminosité » trompe l'œil

HSL est populaire parce qu'on y raisonne facilement : pour éclaircir une couleur, on augmente L ; pour la ternir, on baisse S ; pour changer de couleur, on tourne la teinte H. Mais la luminosité HSL n'est qu'une formule, pas une mesure de ce que voit l'œil.

Le jaune et le bleu purs ont la même luminosité HSL de 50 %, et pourtant l'un est presque aussi clair que le blanc quand l'autre est sombre. Conséquence pratique : une palette « qui monte de 10 % en luminosité à chaque cran » en HSL donne des contrastes irréguliers d'une teinte à l'autre, et un texte lisible sur un fond bleu ne l'est pas forcément sur un fond jaune de même L.

OKLCH : une couleur décrite comme l'œil la perçoit

OKLab, proposé en 2020 par Björn Ottosson, est un espace colorimétrique conçu pour que les distances numériques correspondent à des différences visibles. OKLCH en est la version cylindrique, comme HSL l'est de RGB :

• L, la luminosité perçue, de 0 % (noir) à 100 % (blanc) : à L égale, deux couleurs paraissent aussi claires l'une que l'autre, quelle que soit leur teinte.
• C, le chroma (intensité), de 0 (gris) à environ 0,4 pour les couleurs les plus vives.
• h, la teinte en degrés (le rouge est vers 30°, le jaune vers 110°, le vert vers 142°, le bleu vers 264°).

Cette propriété a des usages très concrets : construire une échelle de tons où chaque cran est à un écart de luminosité constant, garantir qu'une même série d'états (survol, actif, désactivé) reste cohérente d'une couleur à l'autre, ou obtenir des dégradés plus naturels que ceux de RGB. La fonction oklch() est disponible dans les navigateurs depuis mai 2023 et peut exprimer des couleurs plus vives que celles de l'espace sRGB, réservées aux écrans à large gamme (Display P3).

CMJN : pourquoi il n'existe pas de conversion exacte

RVB est un mélange additif de lumière (le noir est l'absence de lumière), alors que CMJN est un mélange soustractif d'encres sur un support (la couleur du papier est le « blanc »). Les deux n'ont pas la même gamme : certains bleus et verts très vifs d'un écran ne peuvent pas être imprimés avec les encres standard. De plus, le rendu dépend du papier, des encres et de la presse.

La formule simple utilisée par l'outil (une transformation mathématique directe) donne un ordre de grandeur utile pour un logiciel qui demande des valeurs CMJN, mais elle ne remplace pas une conversion avec un profil colorimétrique ICC adapté à l'impression visée (par exemple FOGRA39 pour du papier couché en Europe). Pour un document destiné à l'imprimeur, travaillez dans un logiciel de PAO, choisissez le profil indiqué par l'imprimeur et demandez une épreuve.

Le contraste du texte : ce qu'exige l'accessibilité

Les critères WCAG 2.2 fixent un rapport de contraste minimal entre le texte et son fond, calculé à partir de la luminance relative de chaque couleur (0 pour le noir, 1 pour le blanc) : (Lclaire + 0,05) ÷ (Lsombre + 0,05).

• Niveau AA (critère 1.4.3) : au moins 4,5 : 1 pour le texte courant, 3 : 1 pour un grand texte (environ 24 px, ou 18,7 px en gras).
• Niveau AAA (critère 1.4.6) : 7 : 1 pour le texte courant et 4,5 : 1 pour un grand texte.
• Composants d'interface et graphiques (critère 1.4.11) : au moins 3 : 1 pour les bordures de champs, les icônes porteuses de sens, etc.

Le contraste ne suffit pas à lui seul : n'utilisez jamais la couleur comme unique moyen de transmettre une information (un champ en erreur doit aussi porter un message ou une icône), car environ 8 % des hommes (un sur douze) présentent une forme de daltonisme et confondent certaines couleurs.

Noms de couleurs CSS, valeurs relatives et bonnes pratiques

• Les 148 noms CSS (tomato, rebeccapurple, darkslategray…) sont pratiques pour un prototype, mais peu précis. L'outil cherche le nom le plus proche en mesurant la distance dans l'espace OKLab, bien plus fidèle à la perception qu'une distance en RGB. La couleur rebeccapurple (#663399) a été ajoutée à CSS en 2014 en hommage à Rebecca Meyer, fille du spécialiste CSS Eric Meyer, décédée à l'âge de six ans.
• Définissez vos couleurs une seule fois, dans des variables CSS (--accent: #a65a28), puis dérivez-en les variantes plutôt que de recopier des valeurs.
• Dérivez avec color-mix() ou la syntaxe relative : color-mix(in oklch, var(--accent) 80%, white) éclaircit une couleur de manière perceptuellement homogène.
• Prévoyez le thème sombre : une couleur lisible sur fond clair l'est rarement telle quelle sur fond sombre. Recalculez les contrastes pour chaque thème.

Pour fabriquer une palette complète, utilisez le générateur de palettes ; pour passer d'une couleur à l'autre en douceur, le générateur de dégradés CSS.

Questions fréquentes