Convertisseur de Couleur

Tendance 🔥

Convertir entre HEX, RGB, HSL

Outils développeur

Comment utiliser Convertisseur de Couleur

  1. 1Choisissez une couleur avec le sélecteur de couleur ou tapez une valeur dans n'importe quel format
  2. 2Tous les autres formats se mettent à jour instantanément
  3. 3Cliquez sur Copier à côté de n'importe quel format

À propos de Convertisseur de Couleur

Convertisseur de couleurs convertit instantanément les couleurs entre tous les formats CSS courants — HEX, RGB, RGBA, HSL et HSLA. Saisissez une valeur dans n'importe quel format pris en charge et toutes les autres représentations se mettent à jour instantanément, avec un aperçu visuel de la couleur.

Les designers et développeurs front-end ont régulièrement besoin de traduire entre les formats de couleurs : les outils de design exportent en HEX, les propriétés CSS préfèrent RGBA pour la transparence, et HSL est idéal pour la manipulation programmatique des couleurs. Cet outil élimine le calcul manuel et supprime une source courante d'erreurs de conversion.

Toute la conversion s'effectue entièrement dans votre navigateur sans serveur requis.

Fonctionnalités clés de Convertisseur de Couleur

  • Convertir instantanément entre HEX, RGB, RGBA, HSL et HSLA
  • Saisir n'importe quel format et tous les autres se mettent à jour simultanément
  • L'aperçu visuel de la couleur se met à jour en temps réel
  • Sélecteur de couleur du navigateur pour la sélection interactive des couleurs
  • Prend en charge les formats HEX à 3 chiffres (#RGB) et 6 chiffres (#RRGGBB)
  • Gère le canal alpha/transparence dans RGBA et HSLA
  • Copie en un clic pour chaque format de couleur
  • Fonctionne entièrement dans le navigateur — aucune requête serveur

Formats supportés

Formats d'entrée

HEX (#RRGGBB, #RGB)RGB (rgb(r, g, b))RGBA (rgba(r, g, b, a))HSL (hsl(h, s%, l%))HSLA (hsla(h, s%, l%, a))

Formats de sortie

HEXRGBRGBAHSLHSLA

Saisissez une valeur dans n'importe quel format et tous les autres formats se mettent à jour instantanément. Les couleurs CSS nommées (comme "cornflowerblue") ne sont pas prises en charge comme entrée.

Exemples

Convertir une couleur HEX Figma en HSL pour CSS

Traduire une valeur HEX d'un outil de design en HSL pour les propriétés personnalisées CSS.

Entrée

#3B82F6

Sortie

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)

Ajouter de la transparence à une couleur RGB

Obtenir l'équivalent RGBA d'une couleur solide avec 50% d'opacité pour une superposition semi-transparente.

Entrée

rgb(0, 0, 0) with alpha 0.5

Sortie

RGBA: rgba(0, 0, 0, 0.5) | HEX avec alpha: #00000080

Cas d'utilisation courants

  • Traduction des couleurs HEX des outils de design (Figma, Sketch) en valeurs CSS RGB ou HSL
  • Conversion de couleurs solides en RGBA pour les superpositions semi-transparentes
  • Utilisation des valeurs HSL pour l'éclaircissement et l'assombrissement programmatiques en CSS
  • Connexion des formats de couleurs entre le code front-end et les API back-end
  • Vérification que différentes représentations de format d'une couleur sont équivalentes
  • Vérification rapide des valeurs RGB d'une couleur HEX dans une spécification de design

Dépannage

La valeur HEX produit une couleur différente de celle attendue

Solution

Les valeurs HEX doivent être exactement 3 ou 6 chiffres hexadécimaux après le #. #FF0 (3 chiffres) et #FF0000 (6 chiffres) sont tous deux du rouge valide.

La valeur de teinte HSL est hors plage

Solution

La teinte HSL est une valeur de 0 à 360 degrés. La saturation et la luminosité sont des pourcentages (0-100%).

La valeur alpha dans RGBA/HSLA ne fonctionne pas

Solution

L'alpha est une valeur de 0 (totalement transparent) à 1 (totalement opaque). Utilisez un décimal entre 0 et 1, pas un pourcentage.

Questions fréquemment posées

Quels formats de couleurs sont pris en charge ?

HEX (#RRGGBB et #RGB), RGB, RGBA, HSL et HSLA. Saisir n'importe quel format et tous les autres sont calculés instantanément.

Quelle est la différence entre RGB et HSL ?

RGB définit les couleurs comme des intensités de lumière rouge, verte et bleue. HSL définit les couleurs par teinte (0-360°), saturation (0-100%) et luminosité (0-100%).

Quand dois-je utiliser RGBA plutôt que HEX ?

Utilisez RGBA quand vous avez besoin de transparence (canal alpha). RGBA est le format le plus universellement compatible pour les couleurs transparentes en CSS.

Que représente la valeur alpha dans RGBA ?

L'alpha représente l'opacité : 0 est totalement transparent, 1 est totalement opaque. Des valeurs comme 0,5 donnent 50% de transparence.

Puis-je convertir les couleurs CSS nommées comme "cornflowerblue" ?

Les couleurs CSS nommées ne sont actuellement pas prises en charge comme entrée. Trouvez la valeur HEX dans une référence CSS et saisissez-la pour convertir.

Y a-t-il une différence entre le HEX abrégé (#RGB) et le HEX complet (#RRGGBB) ?

#RGB est un raccourci où chaque chiffre est doublé. #F80 équivaut à #FF8800. Le raccourci n'est valide que lorsque les deux chiffres de chaque paire sont identiques.

Mes données sont-elles envoyées à un serveur ?

Non. Toutes les conversions sont effectuées localement dans votre navigateur en utilisant les mathématiques JavaScript.

Puis-je l'utiliser pour trouver la luminosité HSL d'une couleur ?

Oui. Saisissez la valeur HEX ou RGB et la sortie HSL affiche le pourcentage de luminosité.