Aller au contenu principal
ToolsByUs

Convertir des couleurs

Le convertisseur de couleurs lit une couleur dans n’importe quelle notation — hex avec ou sans le dièse, rgb(), hsl(), hsb(), oklch() ou l’un des 148 noms de couleurs CSS — et la restitue d’un coup dans toutes. Il accepte la syntaxe à virgules comme celle à espaces, conserve l’alpha partout où le format cible peut l’accueillir, et ne renvoie rien plutôt que du noir quand l’entrée n’est pas une couleur qu’il sait lire.

100 % local
Entrée HEX

Saisissez une couleur à gauche. Les valeurs hexadécimales avec ou sans dièse sont acceptées, rgb(), hsl(), oklch() ainsi que les noms de couleurs CSS.

Comment fonctionne Convertir des couleurs ?

Tout passe par le sRGB. Ce que vous saisissez est analysé en trois canaux et un alpha, et chaque sortie est rendue à partir de cela. C’est ce qui rend les conversions cohérentes : il y a une représentation unique au milieu, pas quinze formules par paires qui peuvent se contredire.

Ce que l’analyseur accepte

Hex à trois, quatre, six ou huit chiffres, avec ou sans le dièse initial — le hex nu compte, parce que c’est sous cette forme que les valeurs arrivent d’un tableur ou d’un fichier de design tokens. Les deux syntaxes CSS : rgb(255, 136, 0) et rgb(255 136 0 / 50%). Les pourcentages, qui en rgb() se résolvent par rapport à 255 plutôt qu’à 100. hsl(), hsb() / hsv(), oklch(), et les 148 mots-clés de couleur CSS.

Ce qu’il fait de quelque chose qu’il ne sait pas lire

Il le dit. Un outil de couleurs qui transforme silencieusement une faute de frappe en noir est pire qu’un outil qui refuse l’entrée, parce que vous obtenez un échantillon, vous y croyez, et vous l’expédiez. Un hex de mauvaise longueur — cinq chiffres, sept chiffres — est une faute de frappe et pas une couleur, et il est rejeté plutôt que complété en quelque chose de plausible.

Quelles conversions sont exactes et lesquelles ne le sont pas

Hex, RGB, HSL et HSV sont les mêmes trois octets dans des coordonnées différentes. Ces formats font des allers-retours exacts, limités seulement par le nombre de décimales avec lesquelles la sortie est affichée.

OKLCH est exact dans l’autre sens aussi, mais il peut décrire des couleurs que le sRGB ne peut pas montrer. oklch(0.7 0.3 140) est une coordonnée parfaitement valide sans aucun pixel sRGB derrière elle, et sa conversion l’écrête — si bien que deux valeurs OKLCH différentes peuvent revenir sous la forme du même hex. C’est une propriété du gamut, pas un bug de l’arithmétique.

CMYK, c’est l’approximation. Une vraie conversion exige un profil ICC pour la presse, le papier et l’encre, et la même valeur sRGB donne des pourcentages d’encre différents sur papier couché et sur papier journal. Le chiffre donné ici est la formule indépendante du périphérique qu’utilise chaque convertisseur en ligne : juste pour choisir un échantillon, faux pour une spécification presse.

N’importe quelle notation

#ff8800
rgb(255, 136, 0)
hsl(32 100% 50%)
darkorange
FF8800

Toutes

hex    #ff8800
rgb    rgb(255 136 0)
hsl    hsl(32 100% 50%)
hsv    hsv(32 100% 100%)
oklch  oklch(0.7538 0.1751 55.94)
cmyk   cmyk(0% 47% 100% 0%)

Quelles options et quels cas limites Convertir des couleurs prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
HEXentrée / sortieexact3, 4, 6 et 8 chiffres, avec ou sans le hash. Insensible à la casse.
RGBentrée / sortieexactLes deux syntaxes, entiers ou pourcentages, avec alpha après une barre oblique ou comme quatrième argument.
HSLentrée / sortieexactLes mêmes trois octets en coordonnées polaires. La teinte boucle, donc 370 est 10.
HSV / HSBentrée / sortieexactSur quoi la plupart des outils de conception sont construits. Non valide en CSS, donc lu mais jamais en sortie recommandée.
OKLCHentrée / sortieécrêteUniforme perceptuellement et plus large que sRGB. Une coordonnée hors du gamut est tronquée lors du retour.
CMYKsortieapproximatifLa formule indépendante du périphérique. Un imprimante fera la vraie conversion avec son propre profil.
Noms de couleurentrée148Chaque mot-clé CSS, plus `transparent`.
Alpha0–1conservéPréservé à travers chaque format qui peut l’exprimer. CMYK ne peut pas, et le supprime.

Questions fréquentes

Quels formats de couleur peut-on coller ?

Hex à trois, quatre, six ou huit chiffres, avec ou sans le dièse ; rgb() et rgba() en syntaxe à virgules ou à espaces ; hsl() et hsla() ; hsb() ou hsv() ; oklch() ; et n’importe lequel des 148 noms de couleurs CSS. Les pourcentages fonctionnent partout où CSS les permet. Si l’entrée est analysable, tous les autres formats apparaissent immédiatement.

Pourquoi ma valeur OKLCH revient-elle sous la forme d’une autre couleur ?

Parce que OKLCH décrit plus de couleurs qu’un écran sRGB ne peut en montrer. oklch(0.7 0.3 140) est une coordonnée valide sans aucun pixel sRGB derrière elle, donc sa conversion écrête la chroma jusqu’à ce qu’elle rentre — et deux valeurs OKLCH vives différentes peuvent s’écrêter vers le même hex. C’est le gamut, pas l’arithmétique. Si vous avez besoin de la version dans le gamut, le sélecteur de ce site borne la valeur au lieu de la couper, et vous dit ce qu’il a changé.

Peut-on se fier aux chiffres CMYK pour l’impression ?

Comme point de départ, pas comme spécification. Le CMYK dépend du périphérique : la même valeur sRGB donne des pourcentages d’encre différents sur papier couché et sur papier non couché, et encore d’autres sur une autre presse. Aucun convertisseur en ligne ne peut savoir de quelle presse il s’agit. Envoyez à l’imprimeur la référence sRGB ou Pantone, et laissez-le convertir avec le profil du travail.

Que se passe-t-il si je colle quelque chose qui n’est pas une couleur ?

Rien n’est produit et le champ indique qu’il n’a pas pu lire l’entrée. C’est délibéré. Un convertisseur qui renvoie silencieusement du noir sur une faute de frappe vous tend un échantillon dont vous n’avez aucune raison de douter, et un hex de mauvaise longueur — cinq ou sept chiffres — est une faute de frappe, pas une couleur à compléter.

Tout cela est-il envoyé à un serveur ?

Non. Chaque conversion ici est de l’arithmétique dans cet onglet. La page ne fait aucune requête réseau après son chargement, ce que vous pouvez vérifier en ouvrant le panneau Réseau, ou plus simplement en coupant votre connexion et en regardant l’outil continuer de fonctionner.

Quel format de couleur utiliser concrètement en CSS ?

HEX pour une couleur de marque fixe, HSL quand vous voulez dériver une variante plus claire ou plus sombre en déplaçant un seul nombre, et OKLCH quand l’uniformité perceptive compte — un pas de dix points de luminosité en OKLCH a l’air du même pas à chaque teinte, ce qui est faux en HSL. Les trois décrivent les mêmes couleurs ; ce qui change, c’est quel réglage se fait aisément à la main.

Équipe ToolsByUs · Comment nous vérifions nos outils