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 | Résultat HEX | RGB | HSL |
|---|---|---|---|
#369 | #336699 | rgb(51, 102, 153) | hsl(210, 50%, 40%) |
#808080 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
#123456 | #123456 | rgb(18, 52, 86) | hsl(210, 65%, 20%) |
#fff | #FFFFFF | rgb(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.
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
- Archivez le code couleur d'origine et l'endroit où il est utilisé en premier.
- Entrez 3 ou 6 chiffres HEX dans l'outil de conversion de couleur et voyez les résultats HEX et RVB résultants.
- 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.
- 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.