Convertisseur de couleurs

Qu’est-ce qu’un convertisseur de couleur ?#

Un convertisseur de couleur traduit une description d’une couleur vers les autres descriptions dont votre pile a réellement besoin. Les designers vous remettent une valeur HEX issue d’une maquette ; le CSS vous permet d’écrire rgb() ou hsl() ; un pipeline de design tokens veut une variable CSS ; une bibliothèque de graphiques réclame un tuple RGBA avec un canal alpha. La même couleur change sans cesse d’habit, et vous passez un temps réel à convertir entre eux à la main ou à deviner sur une calculatrice.

Cette page opère les quatre conversions d’un coup. Saisissez ou choisissez une couleur et vous obtenez immédiatement son HEX, son RGB, son HSL, et une déclaration de Variable CSS prête à coller, plus une pastille d’aperçu en direct et une palette d’éclaircissement/assombrissement en cinq crans dérivée de cette couleur exacte — le tout calculé localement dans votre navigateur.

Si HEX, RGB et HSL cohabitent, c’est que chacun excelle à une tâche différente. HEX (#4f46e5) est compact et domine le CSS, l’export Figma et les chartes graphiques. RGB (rgb(79, 70, 229)) rend explicites les canaux rouge/vert/bleu, ce qu’attendent le code image et la manipulation de pixels sur canvas. HSL (hsl(243, 75%, 59%)), décomposé en teinte, saturation et luminosité, est celui dont un humain peut raisonner — « éclaircis de 10 % » est un seul nombre qui change en HSL, et une danse à trois nombres sale en RGB.

Comment l’utiliser#

1. Fixez la couleur d’entrée de l’une de deux façons :
   • Cliquez sur le carré de couleur à gauche pour ouvrir le sélecteur natif du système d’exploitation et choisir visuellement.
   • Ou saisissez une valeur dans le champ texte à côté. HEX (#4f46e5, #abc, ou #4f46e5ff à 8 chiffres avec alpha), rgb() / rgba(), et hsl() / hsla() sont tous acceptés.
2. Lisez les résultats dans la liste de droite — HEX, RGB, HSL et Variable CSS. Chaque champ est en lecture seule ; cliquez dedans et copiez, ou utilisez le champ comme référence pendant que vous travaillez.
3. Observez le grand bloc d’aperçu à droite ; il se remplit de la couleur courante, pour que vous puissiez la vérifier contre votre design.
4. Utilisez la palette à 5 pastilles sous l’aperçu. Elle génère des variantes darker, dark, base, light et lighter en décalant la luminosité HSL par crans de 10 points — pratique pour les états hover/active ou pour bâtir une gamme tonale à partir d’une seule couleur de marque.
5. La ligne d’état confirme la conversion ou renvoie un message Invalid color si votre entrée n’a pas pu être analysée.

Fonctionnalités clés#

• Trois formats acceptés, quatre renvoyés. Collez HEX, rgb() ou hsl() et récupérez HEX, RGB, HSL et une déclaration de variable CSS d’un seul coup.
• Conscient de l’alpha. HEX à 8 chiffres (#rrggbbaa) et entrées rgba()/hsla() reportent leur canal alpha jusqu’à la sortie, donc les couleurs translucides font des allers-retours corrects.
• Générateur de palette tonale. La rangée d’éclaircissement/assombrissement à cinq crans est dérivée du HSL propre à votre couleur, et non d’une rampe en boîte — elle a toujours l’air de la même famille.
• Variable CSS prête à coller. La ligne --color-brand: #4f46e5; se dépose directement dans un bloc :root, à renommer avec votre nom de token plus tard.
• 100 % côté client. Pas de backend, pas de requête réseau. Vos couleurs de marque ne quittent jamais la page.

Exemple commenté#

La page se charge sur l’indigo #4f46e5. Avec cette entrée, les quatre champs se remplissent ainsi :

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

Notez comment la forme HSL hsl(243, 75%, 59%) se lit comme une phrase : teinte 243 (un angle bleu-violet sur le cercle chromatique), 75 % de saturation (assez vive), 59 % de luminosité (ton moyen, légèrement plus clair que le gris médian). Si un designer vous demande de « l’assombrir un peu pour un état de survol », vous baissez ce 59 à 49 et obtenez hsl(243, 75%, 49%) — et c’est précisément la pastille dark que le générateur de palette produit sous l’aperçu, accompagnée de light à 69 % et des extrêmes à 39 % et 79 %.

Si au contraire vous partez d’une variable CSS que vous possédez déjà, collez sa valeur dans le champ texte. rgba(79, 70, 229, 0.5) est analysé comme le même indigo à 50 % d’opacité, et la sortie HEX devient #4f46e580 (8 chiffres, alpha 0x80 ≈ 0,5), prête à déposer dans une feuille de style qui préfère HEX.

FAQ#

Mon designer m’a donné #4f46e5 mais les outils de développement affichent rgb(79, 70, 229). Est-ce la même couleur ?#

Oui, exactement. HEX et RGB sont deux sérialisations des mêmes valeurs sRGB. #4f46e5 se découpe en paires d’octets 4f, 46, e5, qui sont l’hexa de 79, 70 et 229. Utilisez celle que votre contexte préfère — le CSS les traite comme identiques.

Quand faut-il se tourner vers HSL plutôt que HEX ?#

Chaque fois que vous voulez modifier une couleur de façon prévisible au feeling. Assombrir, éclaircir, désaturer ou bâtir une palette de 5 nuances à partir d’une couleur de marque ne représente qu’un nombre en HSL, et un frustrant équilibre à trois entrées en RGB. HEX est le meilleur pour le stockage et le copier-coller ; HSL est le meilleur pour l’édition.

Pourquoi la palette paraît-elle parfois inégale sur des couleurs très sombres ou très claires ?#

Le générateur décale la luminosité par crans fixes de 10 points et clame à 0 % et 100 %. Près de ces limites, les crans se compriment parce qu’il n’y a plus de marge de manœuvre — une couleur déjà à 95 % de luminosité n’a que 5 points de « plus clair » avant de toucher le blanc pur. C’est une propriété de l’espace HSL lui-même, pas un bogue.

Cet outil gère-t-il les couleurs P3 ou à gamut large ?#

Non. Il travaille dans l’espace sRGB que décrivent HEX/RGB/HSL du CSS, ce qui couvre la vaste majorité du travail web. Display-P3 et la syntaxe color() sont un autre pipeline et ne sont pas analysés ici.