HEX à 3 chiffres est une notation qui répète trois nombres.

#369 et #336699 représentent la même couleur. Chaque chiffre est répété deux fois ; on n’ajoute pas de zéros pour obtenir #306090. Le résultat est rgb(51, 102, 153). Les règles officielles CSS sont liées ci-dessous.

W3C CSS Color 4 : notation des couleurs HEX

Moyoutil retire les espaces aux extrémités et un # initial avant de traiter un HEX de trois ou six chiffres. La casse n’a pas d’importance et le résultat HEX est en majuscules. Le sélecteur de couleur et l’entrée HEX actualisent l’aperçu et le résultat.

Quatre entrées reproduites avec de vraies fonctions d'outils

Nous avons exécuté la fonction color du projet le 5 octobre 2026. HSL affiche les valeurs arrondies à des entiers par l’outil. RGB contient les valeurs entières des canaux de l’entrée HEX.

Entrée HEX et sortie de conversion réelle
EntréeRésultat HEXRGBHSL
#369#336699rgb(51, 102, 153)hsl(210, 50%, 40%)
#808080#808080rgb(128, 128, 128)hsl(0, 0%, 50%)
#123456#123456rgb(18, 52, 86)hsl(210, 65%, 20%)
#fff#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)

Ce tableau n'est pas le résultat d'une mesure de la couleur à l'œil nu sur un écran, mais plutôt le résultat d'une entrée de code convertie. Le fait de conserver ensemble les valeurs traditionnelles HEX et RVB permet de les distinguer plus facilement de la précision de l'affichage HSL.

Un angle de couleur de 0 en gris ne signifie pas rouge

L'outil affiche l'angle de couleur HSL 0 pour la saisie du gris. Cependant, lorsque la saturation est de 0 %, l'angle de couleur ne modifie pas la couleur affichée. Par conséquent, vous ne devriez pas juger qu'il est rouge simplement en regardant le premier chiffre de hsl(0, 0%, 50%). Lisez ensemble l’angle de teinte, la saturation et la luminosité.

W3C CSS Color 4 : aucun effet d'angle de couleur à saturation 0 Cela devient

Le HSL arrondi ne restaure pas le RVB d'origine

Les outils affichent #123456 sous la forme hsl(210, 65%, 20%). La conversion de ce HSL arrondi en sRGB, puis l'arrondi de chaque canal à un nombre entier compris entre 0 et 255, donne lieu à RVB (18, 51, 84) ou #123354. Le RVB d'origine est RVB (18, 52, 86), donc les deux canaux sont différents. Cela ne veut pas dire que toutes les couleurs feront une différence.

Comparaison du RGB original 18, 52, 86 avec RGB 18, 51, 84 reconstruit depuis un HSL arrondi
Il s'agit d'un diagramme comparatif que j'ai créé moi-même. J'ai montré les résultats des calculs de code, et non des mesures de couleur d'écran ou des captures d'écran d'outils réels. Vérifiez les chiffres pour les petites différences de canal.

W3C CSS Color 4 : conversion HSL vers sRGB

Pour les tâches qui nécessitent le code original exact, utilisez le code HEX ou RVB obtenu et conservez également l'original. Utilisez HSL comme point de départ pour les ajustements, mais ne traitez pas la représentation entière de l'outil comme une conversion aller-retour sans perte. L'outil n'a pas la capacité de saisir HSL et de le rétablir en HEX.

Distinguer les HEX à 4 et 8 chiffres et la plage de support

CSS dispose également de HEX à 4 et 8 chiffres avec canal alpha. Cependant, le convertisseur Moyoutil actuel n'accepte pas cela. #12345678 et #abcd sont des erreurs et ne sont pas traités comme des résultats RVB. Si vous supprimez la position alpha, les informations de transparence sont perdues, alors ne les considérez pas comme les mêmes informations de couleur.

W3C CSS Color 4 : HEX avec canal alpha

  1. Archivez le code couleur d'origine et l'endroit où il est utilisé en premier.
  2. Entrez 3 ou 6 chiffres HEX dans l'outil de conversion de couleur et voyez les résultats HEX et RVB résultants.
  3. Cliquez sur Copier les résultats pour copier trois lignes : HEX, RVB et HSL. Sélectionnez et utilisez une ligne de notation selon vos besoins.
  4. Tenez compte des différences d’arrondi lors de la réutilisation de HSL entiers. La lisibilité de l’arrière-plan réel et de la combinaison de lettres est également vérifiée séparément.

Cet outil est un convertisseur de code couleur et ne permet pas de vérification de la conformité du contraste des couleurs, de conversion de profil ICC ou de conversion CMJN pour l'impression.

Questions fréquemment posées

Les chiffres HEX 6 peuvent-ils toujours être réduits à 3 chiffres ?

Non. L'abréviation ne peut être effectuée avec précision que si les deux chiffres de chaque canal sont identiques. Par exemple, #336699 peut être raccourci en #369, mais #123456 ne peut pas être raccourci de cette façon.

Si les numéros HSL sont les mêmes, apparaîtront-ils de la même couleur sur tous les écrans ?

Les comparaisons dans cet article se limitent aux résultats du code et des calculs. La conversion du code couleur à elle seule ne garantit pas la correspondance visuelle entre les différents écrans ou supports imprimés.