Développement

Convertisseur et sélecteur de couleurs

Outil de conversion et de sélection de couleurs en ligne gratuit pour convertir entre les formats HEX, RVB et HSL avec un aperçu visuel des couleurs.

Gratuit Sans inscription Fonctionne dans votre navigateur

Espace de travail de l’outil

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217.22, 91.22%, 59.8%)
R
59
G
130
B
246

Qu'est-ce qu'un convertisseur de couleurs ?

Un convertisseur de couleurs traduit les valeurs de couleur entre différents systèmes de notation utilisés dans le développement et la conception Web. Les trois formats les plus courants sont HEX (hexadécimal comme #3b82f6), RVB (composants rouge-vert-bleu comme rgb(59, 130, 246)) et HSL (teinte-saturation-luminosité comme hsl(217, 91%, 60%)). Cet outil vous permet de saisir une couleur dans n'importe quel format pris en charge (ou d'en choisir une visuellement) et de voir instantanément les valeurs équivalentes dans tous les formats, ainsi que les valeurs de canal RVB individuelles.

Comment utiliser le convertisseur de couleurs

  1. 1Cliquez sur l'échantillon du sélecteur de couleurs pour sélectionner visuellement une couleur ou saisissez une valeur de couleur directement dans le champ de saisie.
  2. 2Saisissez les couleurs au format HEX (#3b82f6), RVB (rgb(59,130,246)), HSL (hsl(217,91%,60%)) ou couleurs CSS nommées (bleu, corail).
  3. 3Affichez le grand échantillon d’aperçu des couleurs sous l’entrée.
  4. 4Consultez les valeurs converties aux formats HEX, RVB et HSL.
  5. 5Copiez n'importe quel format en utilisant le bouton Copier à côté de chaque valeur.
  6. 6Vérifiez les valeurs individuelles des canaux R, G, B en bas.

Cas d'utilisation courants

Développement CSS

Convertissez rapidement entre les codes HEX des outils de conception et les valeurs RVB/HSL nécessaires dans les feuilles de style CSS ou les solutions CSS-in-JS.

Transfert de conception

Traduisez les valeurs de couleur des spécifications de conception (Figma, Sketch) dans le format exact requis par votre base de code.

Tests d'accessibilité

Extrayez des valeurs de couleur précises pour vérifier les rapports de contraste et assurez-vous que vos choix de couleurs respectent les directives d'accessibilité WCAG.

Personnalisation du thème

Convertissez les couleurs de la marque dans différents formats lors de la configuration des propriétés personnalisées CSS, des configurations Tailwind ou des jetons de conception.

Questions fréquentes

Quels formats de couleurs sont pris en charge en entrée ?

L'outil accepte les valeurs HEX (#rgb, #rrggbb), la notation RVB (rgb(r, g, b)), la notation HSL (hsl(h, s%, l%)) et les couleurs CSS nommées (rouge, bleu bleuet, etc.).

Pourquoi le sélecteur de couleurs affiche-t-il uniquement la sortie HEX ?

Le sélecteur de couleurs HTML natif fonctionne avec les valeurs HEX. Une fois qu'une couleur est sélectionnée, l'outil la convertit automatiquement dans tous les formats pris en charge (HEX, RVB, HSL) affichés ci-dessous.

Est-ce que cela prend en charge l'alpha/transparence ?

Actuellement, l'outil se concentre sur les couleurs opaques. HEX avec entrée alpha (#rrggbbaa), RGBA et HSLA peut être analysé mais le canal alpha n'est pas affiché séparément.

La conversion est-elle exacte ?

Oui. L'outil utilise la bibliothèque culori, une bibliothèque de science des couleurs de haute précision qui gère les conversions d'espace colorimétrique avec précision conformément aux spécifications CSS Color Level 4.