Vue d'ensemble
Cet outil sert quand une couleur doit être vérifiée dans plusieurs formats sans changer d’application. Il affiche le même ton en HEX, RGB et HSL afin que vous puissiez copier le format adapté à votre feuille CSS, à votre fiche composant ou à votre note de design. Il est particulièrement utile pour les couleurs de marque, les échanges avec l’équipe de développement et la vérification de tokens de thème. Les valeurs se mettent à jour ensemble, ce qui facilite la comparaison des nuances et la conservation de références couleur cohérentes.
Cas d'usage
- Vérification de tokens de thèmeContrôler une couleur de token en HEX, RGB et HSL avant son intégration dans un système de design ou une feuille de style.
- Alignement d’une palette de marqueVérifier qu’une couleur de marque reste identique entre les maquettes, la documentation et le développement.
- États d’un composantExaminer une couleur de survol, d’état actif ou de focus et noter le format exact utilisé dans le code.
Comment ca marche
- 1
Choisissez une couleur avec le sélecteur ou saisissez une valeur HEX.
- 2
L’outil calcule les valeurs équivalentes en RGB et en HSL.
- 3
Copiez le format nécessaire pour CSS, documentation ou styles de composant.
Exemples
Bleu du bouton principal
Entree: #2563EB
Sortie: HEX #2563EB, RGB 37, 99, 235, HSL 221, 83%, 53%
Utile pour une couleur d’interface qui doit être notée avec précision dans les styles et la documentation.
Teinte neutre sombre
Entree: rgb(17, 24, 39)
Sortie: HEX #111827, RGB 17, 24, 39, HSL 220, 39%, 11%
Pratique pour contrôler un neutre sombre utilisé sur des cartes, des fonds ou du texte.
Vert de succès doux
Entree: hsl(142, 72%, 29%)
Sortie: HEX #14913E, RGB 20, 145, 62, HSL 142, 72%, 29%
Utile quand le design stocke la couleur en HSL et que le CSS attend du HEX ou du RGB.
FAQ
Puis-je saisir une couleur dans un format autre que HEX ?
Oui. Si le format collé est pris en charge, l’outil affiche les valeurs équivalentes en HEX, RGB et HSL.
Pourquoi les valeurs changent-elles quand je déplace légèrement le sélecteur ?
Chaque petit déplacement choisit une nuance différente, donc les valeurs numériques se mettent à jour immédiatement. C’est normal et cela aide à viser la couleur exacte.
Quelle est la différence entre RGB et HSL ici ?
RGB décrit le mélange rouge, vert et bleu. HSL représente la couleur par teinte, saturation et luminosité, ce qui peut être plus simple pour comparer des nuances.
Pourquoi les valeurs copiées semblent-elles différentes dans une autre application ?
Certaines applications arrondissent les canaux ou affichent différemment l’alpha et le rendu. Comparez surtout les nombres, pas seulement l’aperçu.