Aller au contenu
ToolFarmToolFarm
DesignPopulaire

Convertisseur de couleurs

Collez une couleur en HEX, RGB ou HSL et récupérez les autres formats au passage.

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

Composez des palettes harmonieuses à partir de n'importe quelle couleur de base.

Design

Générateur de dégradés

Créez des dégradés CSS et voyez le rendu en direct pendant que vous les ajustez.

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.