Convertisseur de couleurs CSS
Convertit entre HEX, RGB et HSL avec un échantillon en direct.
Chaque couleur que vous saisissez est convertie localement dans votre navigateur et rien n'est envoyé à un serveur.
Vous vérifiez la lisibilité ? Essayez le Vérificateur de contraste.
À propos de Convertisseur de couleurs CSS
Ce convertisseur de couleurs CSS transforme n'importe quelle valeur de couleur en HEX, RGB et HSL d'un coup, avec un aperçu d'échantillon en direct pour voir la teinte exacte à mesure que vous tapez. Collez un code hex, une valeur rgb() ou hsl(), ou un nom de couleur CSS courant comme blue, teal ou gold, et il normalise instantanément l'entrée dans les trois formats. Il gère aussi la transparence, y compris rgba(), hsla() et l'hex à 8 chiffres avec canal alpha. Que vous fassiez un calcul hex en rgb pour un jeton de design, convertissiez rgb en hex pour une feuille de style ou vérifiiez une valeur hsl en ajustant une palette, il garde chaque format synchronisé. Conçu pour les développeurs front-end, designers et ingénieurs QA qui jonglent quotidiennement avec les formats de couleur. Tout s'exécute localement dans votre navigateur, les valeurs que vous saisissez ne quittent jamais votre appareil.
Fonctionnalités
- Convertit HEX, RGB et HSL d'un coup à partir d'une seule saisie
- Reconnaît les noms de couleur CSS courants comme blue, teal et gold
- Prend en charge la transparence via rgba(), hsla() et l'hex alpha à 8 chiffres
- L'aperçu d'échantillon de couleur en direct se met à jour instantanément à mesure que vous tapez
- Accepte les codes hex abrégés à 3 et 4 chiffres
- Normalise les valeurs de canaux RGB en pourcentage et de 0 à 255
- Affiche une erreur en ligne claire lorsqu'une valeur ne peut pas être analysée
- Traité localement dans votre navigateur
Comment utiliser Convertisseur de couleurs CSS
- Tapez ou collez une couleur dans la zone de saisie Couleur.
- Utilisez un code hex, rgb(), hsl() ou un nom de couleur CSS comme blue.
- Lisez les valeurs HEX, RGB et HSL converties dans les lignes de résultat.
- Vérifiez l'échantillon à côté de la saisie pour prévisualiser la couleur exacte.
Exemple
Entrée
#3b82f6
Sortie
HEX #3b82f6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
Une valeur hex convertie en RGB et HSL avec un échantillon en direct correspondant.
Erreurs courantes et dépannage
- « Couldn't parse that color » apparaît après la saisie d'une valeur. — Utilisez un code hex valide, rgb()/rgba(), hsl()/hsla() ou un nom de couleur CSS pris en charge ; des caractères parasites ou des parenthèses manquantes cassent l'analyse.
- Un nom de couleur CSS comme « salmon » n'est pas reconnu. — Seul un ensemble sélectionné de noms courants est pris en charge. Saisissez plutôt la valeur hex ou rgb() équivalente.
- L'alpha est perdu après conversion. — Incluez le canal alpha dans l'entrée, comme rgba(0,0,0,0.5) ou un hex à 8 chiffres comme #00000080, et il sera reporté dans tous les formats.
- Les valeurs RGB supérieures à 255 ou les pourcentages semblent erronés. — Les canaux sont bornés à la plage valide ; passez des nombres de 0 à 255 ou des pourcentages de 0 % à 100 % pour obtenir le résultat attendu.
Foire aux questions
- Qu'est-ce que le Convertisseur de couleurs CSS ?
- C'est un outil dans le navigateur qui lit n'importe quel HEX, rgb()/rgba(), hsl()/hsla() ou nom de couleur CSS courant et le convertit en HEX, RGB et HSL avec un aperçu d'échantillon en direct.
- Comment convertir HEX en RGB et HSL avec cet outil ?
- Collez un code hex comme #3b82f6 dans la zone Couleur, et le Convertisseur de couleurs CSS affiche instantanément les valeurs rgb() et hsl() correspondantes dans les lignes de résultat.
- Le Convertisseur de couleurs CSS prend-il en charge la transparence et les canaux alpha ?
- Oui. rgba(), hsla() et l'hex à 8 chiffres avec valeur alpha sont tous analysés, et l'alpha est conservé dans chaque format de sortie.
- Puis-je coller un nom de couleur CSS au lieu d'un code ?
- Oui, les noms standard comme blue, teal, gold et indigo sont reconnus et convertis en HEX, RGB et HSL.
- Accepte-t-il les codes hex abrégés ?
- Oui, les hex abrégés à 3 et 4 chiffres comme #f00 ou #f00a sont développés automatiquement avant conversion.
- Les valeurs de couleur que je saisis sont-elles envoyées quelque part ?
- Non. Le Convertisseur de couleurs CSS s'exécute entièrement dans votre navigateur, les valeurs que vous saisissez sont traitées localement et ne quittent jamais votre appareil.
Outils associés
Tous les outils ArrayKit