Convertisseur de couleurs

Comment utiliser le convertisseur de couleurs

1. 1. Saisissez une couleur. Collez-la ou tapez-la dans n'importe quelle notation acceptée par la zone — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) ou un nom CSS comme rebeccapurple. Un simple 51 102 153 est lu comme du RVB.
2. 2. Ou utilisez le sélecteur. Le sélecteur définit la couleur et conserve la transparence que vous avez déjà saisie.
3. 3. Copiez ce dont vous avez besoin. Chaque notation a son propre bouton de copie, et Copier le CSS donne les valeurs HEX, RVB, HSL et OKLCH sous forme de propriétés personnalisées pour une feuille de style.
4. 4. Vérifiez le nom. L'outil affiche le mot-clé CSS lorsque votre couleur en est un exactement (rebeccapurple vaut #663399), et le mot-clé le plus proche sinon.

Comment fonctionnent les conversions

Tout passe par le sRGB, l'espace colorimétrique dans lequel un navigateur peint. Un code HEX n'est qu'un RVB en base 16 : #336699 correspond au rouge 0x33 = 51, au vert 0x66 = 102 et au bleu 0x99 = 153. Les autres notations réarrangent ces trois mêmes nombres.

• HSL décrit une couleur par sa teinte (un angle sur le cercle chromatique, de 0 à 360 °), sa saturation et sa luminosité. En notant max le plus grand canal et min le plus petit (divisés chacun par 255), la luminosité vaut (max + min) ÷ 2, et la saturation vaut (max − min) ÷ (1 − |2L − 1|). La teinte dépend du canal le plus grand.
• HSV (aussi appelé HSB) garde la même teinte, mais mesure la valeur par max et la saturation par (max − min) ÷ max. C'est le modèle que dessinent la plupart des sélecteurs de couleurs.
• HWB combine la blancheur (min) et la noirceur (1 − max) sur une teinte pure ; c'est plus facile à raisonner que le HSL lorsqu'on veut une teinte claire ou une nuance foncée. Si la blancheur et la noirceur atteignent ensemble 100 %, le résultat est un gris.
• CMJN est présenté comme la simple conversion d'un dispositif : N = 1 − max, puis chacun des C, M et J vaut (1 − canal − N) ÷ (1 − N). Aucune encre, aucun papier ni aucun profil n'intervient.
• OKLCH est la luminosité, la chroma et la teinte dans l'espace OKLab de Björn Ottosson, que le CSS Color 4 prend en charge sous la forme oklch(). Des écarts égaux de L paraissent bien plus proches en luminosité perçue que dans le RVB ou le HSL.

Pourquoi le CMJN ici n'est pas une couleur d'impression

Les écrans ajoutent de la lumière en rouge, vert et bleu ; les imprimantes déposent du cyan, du magenta, du jaune et du noir sur le papier. Les deux gamuts diffèrent, et l'encre sur la page dépend du papier, de la presse et du profil ICC qui les décrit. Une formule qui part seulement du RVB ne peut connaître rien de tout cela : le CMJN ci-dessus est donc une notation, pas une prévision. Par exemple, le bleu pur de l'écran #0000ff devient 100 % de cyan et 100 % de magenta, ce qui s'imprime en un violet plus terne. Pour une affiche ou une figure imprimée, remettez à votre imprimeur le document en RVB et demandez son profil, ou faites la conversion avec ce profil dans un logiciel de PAO.

Arrondis, bornes et transparence

• Arrondis. Le HEX et les rgb() ne contiennent que des nombres entiers de 0 à 255 ; une couleur saisie comme hsl(210 50% 41%) est donc arrondie à la valeur 8 bits la plus proche. Reconvertir cette valeur donne un HSL légèrement différent : la grille 8 bits est plus grossière que celle du HSL.
• Canaux hors limites. Les valeurs hors de l'intervalle sont ramenées aux bornes, comme le font les navigateurs : rgb(300 0 0) vaut #ff0000, et un canal négatif devient 0.
• Unités de teinte. deg, grad, rad et turn sont acceptés, et la teinte revient sur le cercle : −150° équivaut à 210°.
• Alpha. #rrggbbaa, #rgba et / 50% fonctionnent tous. L'alpha est stocké sur 8 bits dans le HEX à 8 chiffres ; 50 % devient donc 80 et se relit comme 50,2 %.

Questions fréquentes

Comment convertir un HEX en RVB ?

Découpez les six chiffres en trois paires et lisez chaque paire comme un nombre en base 16 : #336699 correspond à 33, 66 et 99, soit 51, 102 et 153. Collez le code HEX dans la zone et la valeur RVB apparaît aussitôt, avec le HSL, le HWB, le HSV, le CMJN et l'OKLCH.

Quelle est la différence entre le HSL et le HSV ?

Les deux utilisent le même angle de teinte. Le HSL donne au blanc la pleine luminosité quelle que soit la saturation, si bien que son milieu est la couleur pure ; le HSV place la couleur pure à pleine valeur et pleine saturation, et le blanc à saturation nulle. Le HSL est ce que le CSS prend en charge sous la forme hsl(), tandis que le HSV (ou HSB) est ce qu'affichent la plupart des sélecteurs de couleurs.

La valeur CMJN est-elle exacte pour l'impression ?

Non. C'est la conversion simple à partir du RVB, sans encre, papier ni profil ICC : elle décrit les mêmes nombres autrement, sans prévoir ce que produira une presse. Les couleurs hors du gamut de l'imprimante, comme les bleus et les verts vifs de l'écran, s'impriment plus ternes. Utilisez le profil de votre imprimeur pour tout ce qui compte.

Que signifie le nom CSS le plus proche ?

Le CSS définit 148 mots-clés de couleur. Si votre couleur correspond exactement à l'un d'eux, l'outil l'affiche sans réserve. Sinon, il affiche le mot-clé le plus proche dans l'OKLab, un espace conçu pour que la distance corresponde à la différence perçue. C'est utile pour nommer une couleur dans un commentaire, mais ce n'est pas un substitut au code.

Pourquoi ma valeur HSL change-t-elle légèrement après un aller-retour ?

Le HEX et le RVB stockent chaque canal sous l'une de 256 valeurs, et le HSL ne correspond pas point par point à cette grille. Une couleur saisie en HSL est arrondie à la valeur RVB la plus proche, et le HSL affiché est calculé à partir de la valeur arrondie. En partant d'un code HEX, chaque conversion est exacte à la précision affichée.

Mes données de couleur sont-elles envoyées quelque part ?

Non. La conversion est un simple calcul dans votre navigateur ; ce que vous saisissez n'est ni téléversé ni conservé.