Comment ça marche
Fixez chaque canal à 0-255, arrondissez-le, puis écrivez deux chiffres hexadécimaux par canal derrière #. HSL est dérivé des ratios RVB : teinte du canal dominant, saturation de la distance entre max et min, luminosité de leur moyenne.
- HEX accepte 3 ou 6 chiffres ; les valeurs sont limitées à 0–255.
Pourquoi c'est important
Les outils de conception exportent différents formats et CSS en attend des spécifiques. La conversion manuelle invite à des erreurs d'arrondi, et la même couleur écrite de trois manières est facile à vérifier une fois que vous voyez toutes les représentations côte à côte.
Un exemple concret
rgb(99, 91, 255) est #635BFF et hsl(244, 100%, 68%). Le formulaire HEX est ce que les auteurs CSS collent le plus souvent ; HSL est plus facile à assombrir ou à désaturer sans deviner de nouveaux canaux.
Erreurs courantes
- En supposant que le même HEX soit identique partout sans gestion des couleurs.
- Oublier que HEX à trois chiffres agrandit chaque quartet deux fois.
- Modification des canaux RVB lorsque vous vouliez ajuster la luminosité.
Conseils pratiques
Concevez en HSL lorsque vous avez besoin de teintes et de nuances systématiques : conservez la teinte et la saturation, variez la luminosité par étapes. Stockez le HEX pour la sortie, mais conservez les notes HSL dans le fichier de conception pour des ajustements futurs.
Comment l'utiliser
- Ouvrez l'outil. Tout se déroule dans l'onglet de votre navigateur.
- Collez ou saisissez votre saisie, puis choisissez l'action dont vous avez besoin.
- Vérifiez le résultat et copiez-le en un clic.
Questions courantes
Pourquoi ma valeur HEX est-elle différente dans un autre outil ?
Les valeurs sont limitées à 0-255 et arrondies, puis écrites en majuscule HEX. Certains outils conservent les entrées en minuscules ou invalides.
Qu’est-ce que le HSL ?
Une représentation alternative : teinte en degrés, saturation et luminosité en pourcentage. C’est utile pour ajuster les couleurs.
Est-ce que ça vérifie le contraste ?
Non. Cela convertit les formats de couleur ; la vérification du contraste est un outil différent.
Cet outil est-il vraiment gratuit ?
Oui. Il n'y a pas de compte, pas de paywall et pas de limite d'utilisation. Tools App est financé par aumenso, le studio derrière elle.
Est-ce que quelque chose que j'entre est téléchargé ?
Non. L'outil s'exécute dans l'onglet de votre navigateur ; ce que vous saisissez ne nous est jamais envoyé et n'est jamais stocké.