Convertisseur de couleurs CSS

Convertissez les couleurs CSS entre HEX, RGB et HSL avec un échantillon en direct et la prise en charge de l'alpha.

Chaque couleur que vous saisissez est convertie localement dans votre navigateur et rien n'est envoyé à un serveur.

Conçu et maintenu par Udit Agarwal

HEX, RGB and HSL Color Codes, Explained

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

  1. Tapez ou collez une couleur dans la zone de saisie Couleur.
  2. Utilisez un code hex, rgb(), hsl() ou un nom de couleur CSS comme blue.
  3. Lisez les valeurs HEX, RGB et HSL converties dans les lignes de résultat.
  4. 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

  • Vérificateur de contraste — Vérifie le rapport de contraste WCAG et la conformité AA/AAA entre deux couleurs.
  • Formateur CSS / SCSS — Embellit ou minifie CSS/SCSS/LESS, trie les propriétés et supprime les doublons.
  • Optimiseur SVG — Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.
  • Convertisseur de base numérique — Convertit des entiers entre binaire, octal, décimal et hexadécimal.
  • Échapper / Déséchapper HTML — Échappe et déséchappe les caractères spéciaux et entités HTML.
  • Formateur JS / TS — Embellissez JavaScript, TypeScript et JSX/TSX avec les options de Prettier, ou minifiez du JavaScript simple.
  • Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.

Plus d’outils Formateurs de code

  • Comparer du texte — Compare deux textes ligne par ligne et affiche ajouts et suppressions.
  • Convertisseur MDX — Rend le MDX en texte, convertit HTML → MDX et échappe le texte en MDX littéral.
  • Formateur CSS / SCSS — Embellit ou minifie CSS/SCSS/LESS, trie les propriétés et supprime les doublons.
  • Formateur JS / TS — Embellissez JavaScript, TypeScript et JSX/TSX avec les options de Prettier, ou minifiez du JavaScript simple.
  • Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
  • Formateur XML — Embellit, minifie et valide le XML, et convertit XML ↔ JSON.
  • Formateur SQL — Met en forme le SQL pour MySQL, PostgreSQL, SQL Server, SQLite, BigQuery et Oracle.
  • Formateur GraphQL — Met en forme ou minifie les requêtes et schémas GraphQL, valide la syntaxe et extrait les opérations.
  • Formateur de Dockerfile — Met en forme un Dockerfile et obtenez des suggestions de bonnes pratiques et de lint.
  • Formateur de requêtes MongoDB — Met en forme les requêtes du shell MongoDB et les pipelines d’agrégation.
  • Vérificateur de contraste — Vérifie le rapport de contraste WCAG et la conformité AA/AAA entre deux couleurs.
  • Rendu de diagrammes Mermaid — Rend des diagrammes Mermaid (flux, séquence, gantt) en SVG dans votre navigateur.

Voir tous les outils Formateurs de code (32) · Tous les outils