Convertisseur de couleurs

Le Convertisseur de couleurs est un outil gratuit qui convertit une couleur fournie au format HEX, HEX alpha, RGB, RGBA, HSV, HSL ou HSLA en plusieurs formats de couleur équivalents.

Quels formats de couleur puis-je convertir ?

Tu peux saisir une valeur au format HEX, HEX alpha, RGB, RGBA, HSV, HSL ou HSLA, puis consulter sa valeur correspondante dans chaque format pris en charge. C'est utile lorsqu'une spécification de conception, une feuille de style ou une API tierce représente la même couleur dans une autre notation.

• HEX représente les canaux rouge, vert et bleu par des paires hexadécimales, généralement sous la forme #RRGGBB.
• HEX Alpha ajoute un canal d'opacité. Dans la notation CSS moderne, ce format apparaît couramment sous la forme #RRGGBBAA.
• RGB utilise les valeurs des canaux rouge, vert et bleu, généralement comprises entre 0 et 255.
• RGBA ajoute la transparence alpha au format RGB.
• HSV décrit la teinte, la saturation et la valeur. Ce format est courant dans les sélecteurs de couleur, mais ne correspond pas à une fonction de couleur CSS standard.
• HSL décrit la teinte, la saturation et la luminosité. CSS prend directement en charge le format HSL.
• HSLA correspond au format HSL avec une valeur alpha.

RGB et HSL sont deux descriptions mathématiques différentes d'une même couleur, et non deux couleurs distinctes. La conversion permet d'en changer la représentation tout en conservant la couleur voulue aussi fidèlement que le permet le format de destination.

Comment utiliser le convertisseur de couleurs ?

Saisis une valeur de couleur complète dans le champ Couleur, dans l'un des formats acceptés, puis consulte ou copie les valeurs générées dans les champs de résultat.

1. Copie exactement la valeur source, y compris le dièse initial, les virgules, les parenthèses, les signes de pourcentage ou la composante alpha, selon le cas.
2. Colle-la dans le champ Couleur.
3. Consulte les valeurs équivalentes affichées sous HEX, HEX Alpha, RGB, RGBA, HSV, HSL et HSLA.
4. Choisis l'un des formats de couleur pris en charge et accepté par le système de destination. Pour une règle CSS, HEX, RGB, RGBA, HSL et HSLA sont des choix courants. HSV est plus souvent utilisé dans les interfaces d'édition et pour les calculs de couleur.

La conversion est effectuée sur le serveur. La valeur saisie est transmise au serveur via HTTPS et n'est pas stockée. Une couleur isolée est rarement sensible, mais vérifie qu'une palette encore confidentielle ou qu'un ensemble de jetons de conception non publié peut être transmis à un service en ligne avant de l'envoyer.

Les espaces et la ponctuation font partie de la syntaxe de RGB, HSL et des formats associés, tandis que les signes de pourcentage permettent de reconnaître les valeurs exprimées en pourcentage. Un nombre seul, une valeur vide ou un texte quelconque ne définit pas une couleur. Les textes accentués ou écrits dans un alphabet non latin n'ont pas non plus de signification définie dans ces formats numériques.

Comment interpréter les valeurs converties ?

Chaque résultat est une autre notation de la même couleur. Prête une attention particulière aux plages des canaux, aux pourcentages et à la transparence alpha. Le champ à copier dépend des notations de couleur acceptées par le système de destination.

Dans un code HEX à six chiffres, la première paire représente le rouge, la deuxième le vert et la troisième le bleu. Par exemple, #336699 contient les valeurs hexadécimales 33, 66 et 99 pour ces canaux, ce qui correspond aux valeurs RGB décimales 51, 102 et 153.

La teinte est normalement exprimée sous forme d'un angle sur un cercle chromatique. La saturation, ainsi que la luminosité ou la valeur, sont généralement exprimées en pourcentage. La luminosité HSL et la valeur HSV reposent sur des calculs différents. Il ne faut donc pas comparer leurs pourcentages comme s'ils mesuraient la même propriété.

Le canal alpha décrit l'opacité. Une couleur entièrement opaque n'a pas besoin d'un format qui gère l'alpha, contrairement à une couleur semi-transparente. Si tu copies une couleur RGBA ou HSLA dans un format RGB, HSL ou HEX à six chiffres, la notation de destination ne permet pas d'enregistrer le canal alpha.

Ce convertisseur n'est pas présenté comme un outil de validation syntaxique fournissant des diagnostics détaillés. Ne compte pas sur lui pour repérer précisément le caractère incorrect dans une valeur mal formée. Parmi les erreurs de syntaxe courantes figurent l'absence du dièse en HEX, des parenthèses non appariées, des signes de pourcentage manquants, une valeur alpha hors de la plage attendue ou le mélange des conventions de canaux HSL et RGB.

Exemples de conversion de couleurs

Un exemple simple permet de comprendre les relations entre HEX, RGB, HSL et HSV. Le rouge pur peut s'écrire sous les formes équivalentes suivantes.

• Entrée HEX #ff0000
• Équivalent RGB rgb(255, 0, 0)
• Équivalent HSL hsl(0, 100%, 50%)
• Équivalent HSV hsv(0, 100%, 100%)

Pour une couleur moins saturée, #336699 équivaut à rgb(51, 102, 153). Sa représentation HSL est hsl(210, 50%, 40%), tandis que sa représentation HSV possède une teinte de 210 degrés, une saturation d'environ 66.7% et une valeur de 60%. Une interface peut arrondir les valeurs décimales ou utiliser des espacements différents sans en modifier le sens pratique.

La transparence fournit un autre exemple simple. rgba(255, 0, 0, 0.5) et hsla(0, 100%, 50%, 0.5) décrivent toutes deux un rouge à moitié opaque. Selon la convention CSS courante du format HEX à huit chiffres, la valeur correspondante est #ff000080, où 80 est l'octet alpha quantifié.

Quand est-il utile de convertir une couleur ?

La conversion est utile lorsque l'application de destination exige une autre notation ou qu'une représentation différente facilite le débogage. Tu peux, par exemple, convertir une valeur Figma en propriété personnalisée CSS, vérifier une valeur RGBA trouvée dans Chrome DevTools, préparer des champs de couleur pour la charge utile d'une API ou examiner les données d'un thème tiers avant son déploiement.

La conversion est généralement inutile si le format de couleur existant est déjà accepté par le système de destination. Convertir un code HEX à six chiffres en RGB uniquement pour produire du CSS lisible par une machine présente peu d'intérêt. De plus, des conversions successives dans un sens puis dans l'autre peuvent entraîner des arrondis dans les valeurs HSL ou HSV. De même, n'ajoute pas de canal alpha si toutes les couleurs sont entièrement opaques.

Si tu veux choisir visuellement une couleur plutôt que convertir une valeur connue, le Sélecteur de couleur est l'outil le plus direct. La conversion ne remplace pas non plus les tests de contraste, la simulation des déficiences de la vision des couleurs ou la gestion des profils colorimétriques. Des valeurs numériques équivalentes ne prouvent pas qu'un texte au premier plan respecte les exigences de contraste WCAG.

Questions fréquentes

Le convertisseur accepte-t-il les noms de couleurs CSS ?

Non. Les formats acceptés indiqués sont HEX, HEX alpha, RGB, RGBA, HSV, HSL et HSLA. Les noms tels que red, rebeccapurple ou transparent ne figurent donc pas parmi les entrées prises en charge. Convertis d'abord la couleur nommée en valeur CSS numérique avant de la saisir.

Puis-je saisir un code HEX à trois chiffres ?

Les entrées acceptées comprennent le format HEX, mais les longueurs HEX prises en charge ne sont pas précisées. Pour obtenir un résultat prévisible, développe une notation abrégée telle que #369 en #336699. Le même principe s'applique aux notations abrégées à quatre chiffres contenant un canal alpha.

Puis-je coller une déclaration CSS entière au lieu d'une couleur ?

Saisis uniquement la valeur de la couleur, et non une déclaration complète. Utilise par exemple #336699 au lieu de color: #336699;, car le nom de la propriété et le point-virgule ne font pas partie de la couleur elle-même. Si tu copies une valeur depuis un fichier JSON ou un fichier de configuration, supprime les guillemets qui l'entourent.

Le résultat conserve-t-il les informations de gamut étendu ou de profil colorimétrique ?

Non. Aucun format à gamut étendu ni aucun profil colorimétrique intégré ne figure parmi les formats pris en charge. Les données Display P3, Lab, LCH et de profil ICC contiennent des informations que les champs HEX, RGB, HSL et HSV disponibles ne peuvent pas représenter. Utilise une application avec gestion des couleurs si la conversion doit tenir compte des profils.

Pourquoi les valeurs converties contiennent-elles parfois des décimales ?

Les calculs HSL et HSV peuvent produire des pourcentages fractionnaires même lorsque les canaux RGB d'origine sont des nombres entiers. Arrondir ces valeurs peut légèrement modifier une conversion ultérieure vers RGB. Conserve toute la précision disponible lors du stockage des jetons de conception, puis n'arrondis que si le format cible ou les conventions de code l'exigent.