Aller au contenu
ToolFarmToolFarm
DesignPopulaire

Convertisseur de Couleur: HEX, RGB

Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.

2 min de lecture

À quoi sert cet outil

Convertisseur de couleurs qui passe entre HEX, RGB et HSL à la volée. Collez n'importe quel format, les autres apparaissent instantanément. Pensé pour les designers et les développeurs front.

Une fois la couleur sous la main, amenez-la dans générateur de palettes pour une palette harmonieuse, ou dans générateur de dégradés pour construire un dégradé CSS.

À quoi ça vous sert

  • Passer un HEX de Figma en RGB pour le poser dans une variable CSS.
  • Convertir un RGB exporté de Photoshop en HSL pour retoucher la saturation.
  • Vérifier l'équivalent HSL d'une couleur de marque.
  • Vérifier que deux couleurs notées différemment sont bien la même.

Comment l'utiliser

  1. Collez une couleur dans n'importe quel format : #ff5500, rgb(255, 85, 0) ou hsl(20, 100%, 50%).
  2. Les autres représentations apparaissent automatiquement.
  3. Copiez celle dont vous avez besoin en un clic.
  4. Modifiez la valeur et la conversion se met à jour aussitôt.

Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.

Couleurs courantes et leurs trois représentations

Pour voir comment HEX, RGB et HSL s'alignent, voici quelques couleurs de marque connues écrites dans chaque notation.

  • Vert ToolFarm

    HEX: #22C55E
    RGB: rgb(34, 197, 94)
    HSL: hsl(142, 71%, 45%)

  • Noir Spotify

    HEX: #191414
    RGB: rgb(25, 20, 20)
    HSL: hsl(0, 11%, 9%)

  • Bleu Twitter

    HEX: #1DA1F2
    RGB: rgb(29, 161, 242)
    HSL: hsl(203, 89%, 53%)

  • Rose Stripe

    HEX: #FF5996
    RGB: rgb(255, 89, 150)
    HSL: hsl(338, 100%, 67%)

  • Orange Hacker

    HEX: #FF6600
    RGB: rgb(255, 102, 0)
    HSL: hsl(24, 100%, 50%)

  • Noir encre

    HEX: #0F172A
    RGB: rgb(15, 23, 42)
    HSL: hsl(222, 47%, 11%)

D'autres outils qu'on utilise souvent dans le même flux.

Design
Design

Générateur de Palettes de Couleurs

Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.

Design

Générateur de Dégradés CSS

Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.

Design

Vérifier le Contraste de Couleur (WCAG)

Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.

Design

Générateur de border radius CSS

Crée un border-radius en CSS avec un aperçu en direct : arrondis chaque coin séparément en pixels ou en pour cent, puis copie le code. Gratuit et dans ton navigateur.

Questions fréquentes

Quels formats de couleurs sont acceptés ?

HEX (avec ou sans dièse, 3 ou 6 chiffres), RGB (rgb() et rgba()) et HSL (hsl() et hsla()). Si vous collez une couleur avec transparence, elle est conservée dans les autres formats quand c'est possible.

Comment HEX, RGB et HSL se convertissent-ils entre eux ?

HEX et RGB sont la même information sous deux notations : 8 bits par canal. HSL décrit la couleur par teinte, saturation et luminosité, et se calcule à partir de RGB par une formule réversible. La conversion est mathématiquement exacte.

Puis-je m'en servir pour vérifier le contraste ?

L'outil ne calcule pas le contraste WCAG, mais HSL aide à comprendre à quel point une couleur est claire ou sombre (composante L), ce qui sert à associer des tons accessibles.

Ça marche avec les noms CSS comme « tomato » ?

Pour l'instant l'outil ne comprend que les notations numériques. Pour les noms CSS, retrouvez l'équivalent HEX dans n'importe quelle référence et collez-le ici.