Convertisseur de couleur

Convertissez entre HEX, RGB, HSL

Aperçu

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

Modifier RGB

Modifier HSL

H (0-360)

S (%)

L (%)

Comment ça marche

Convertisseur de couleur — Convertissez entre HEX, RGB, HSL. Tout le traitement se fait dans votre navigateur — sans téléversement, sans inscription, sans e-mail. Gratuit pour toujours.

Dernière mise à jour: 2026-05-06

Editor's note

Nous l'utilisons dans les passations de design plus que pour autre chose. Les designers pensent en teinte, saturation et luminosité — ils disent des choses comme « un poil plus chaud » ou « baisse la saturation d'un cran ». Les développeurs pensent en HEX, parce que c'est ce qui finit dans la feuille de style. Ce décalage engloutit une quantité déprimante de Slack. Nous avons donc mis HEX, RGB et HSL sur le même panneau avec une pastille en direct, parce que le moyen le plus rapide de clore un « est-ce le bon turquoise ? », c'est de pointer la couleur ensemble.

La sortie Tailwind en arbitrary value est la partie que nous n'avions pas prévu d'utiliser autant. Cela a commencé comme une petite commodité — copier bg-[#1F2937] d'un coup — et c'est silencieusement devenu notre façon par défaut de livrer des nuances ponctuelles qui ne méritent pas une entrée dans la config. Nous avons résisté à l'ajout d'une fonctionnalité de palette curée. La curation de palette est un vrai problème de design et ce n'est pas ici qu'il se résout ; ici, nous convertissons simplement ce que vous avez déjà choisi.

À propos de Convertisseur de couleur

Le Convertisseur de couleur transforme n'importe quelle valeur de couleur entre les représentations HEX, RGB et HSL et prévisualise le résultat côte à côte. Il sort aussi une chaîne Tailwind "arbitrary value" prête à déposer dans une className. La conversion HEX RGB est l'une des corvées les plus fréquentes en front-end — cet outil supprime l'étape calculatrice.

Les designers l'utilisent pour traduire les couleurs de marque d'un fichier Figma en CSS, les développeurs pour déboguer une teinte inattendue, et les évaluateurs d'accessibilité pour vérifier qu'une couleur se lit correctement quand elle est exprimée en HSL afin d'ajuster la luminosité.

Tout se passe dans votre navigateur. Votre palette, vos couleurs de marque et vos prototypes ne touchent jamais un serveur distant.

Comment utiliser Convertisseur de couleur

Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleur de votre système d'exploitation, ou tapez directement une valeur HEX.
Utilisez les entrées numériques RGB pour ajuster finement les canaux rouge, vert et bleu (0-255 chacun).
Passez à l'éditeur HSL pour ajuster la teinte (0-360), la saturation et la luminosité — utile quand vous voulez une variante légèrement plus sombre ou plus chaude.
Surveillez le panneau Aperçu pour un rendu instantané de la couleur en taille réelle.
Utilisez les boutons de copie à côté de HEX, RGB, HSL ou Tailwind arbitrary value pour les envoyer directement dans le presse-papiers.

Cas d'usage courants

Convertir une couleur de marque d'une spec HEX de designer en format rgb() attendu par votre solution CSS-in-JS.
Générer des chaînes de classes arbitraires Tailwind comme bg-[#1f2937] sans quitter le navigateur.
Régler un état hover de bouton en jouant sur la luminosité en HSL tout en gardant la teinte constante.
Vérifier qu'un code hex reçu par e-mail d'un partenaire correspond bien à la couleur réellement rendue qu'il avait en tête.
Construire une variante mode sombre en lisant la HSL d'une couleur claire et en abaissant sa luminosité.

Astuces et erreurs courantes

HSL est bien plus intuitif que RGB pour ajuster la luminosité ou la saturation — éditez en HSL quand vous voulez "un bleu un peu plus sombre".
Les codes hex peuvent avoir 3 ou 6 chiffres. La forme à 3 chiffres (#abc) s'étend en #aabbcc, donc #f00 et #ff0000 sont identiques.
Quand vous collez depuis Figma, attention aux octets alpha en fin (ex. #1f2937FF). Retirez l'alpha avant de coller si votre tooling attend du hex opaque.
Pour les vérifications d'accessibilité, générez deux valeurs HSL et comparez les écarts de luminosité — au moins 50% de différence en L est une règle empirique sûre pour le corps de texte.

Questions fréquentes

Quels espaces de couleur sont pris en charge ?

HEX, RGB et HSL. Nous générons aussi un format 'Tailwind arbitrary value' à coller directement dans les class names.

Puis-je sauvegarder une palette ?

Pas encore. Pour l'instant, utilisez les boutons copier pour envoyer chaque valeur au presse-papiers. La sauvegarde de palettes est sur la roadmap.

Les canaux alpha sont-ils gérés ?

Pas pour l'instant. Nous nous concentrons sur les couleurs opaques ; le support HEX-A et RGBA est prévu.

Pourquoi RGB(255, 0, 0) et HSL(0, 100%, 50%) produisent-ils la même couleur ?

Ils décrivent le même point dans l'espace colorimétrique, simplement depuis des axes différents. RGB définit les ratios de mélange des primaires lumineuses ; HSL décrit teinte, saturation et luminosité. Les deux mènent au rouge pur.

Puis-je coller un nom de couleur comme "crimson" ou "rebeccapurple" ?

Pas directement. Les navigateurs mappent ~140 noms CSS à des valeurs hex spécifiques — cherchez le nom dans votre éditeur et collez l'équivalent hex ici.

À quoi ressemble la sortie Tailwind arbitrary value ?

Quelque chose comme [#1F2937] — enveloppez-la dans n'importe quelle classe Tailwind comme text-[#1F2937], bg-[#1F2937] ou border-[#1F2937] pour utiliser exactement cette couleur sans étendre tailwind.config.js.