Convertisseur de couleur
Convertis une couleur entre HEX, RGB et HSL, avec aperçu en direct — dans ton navigateur.
— — — Comment ça marche
Saisis une couleur sous n'importe quelle forme courante — un code HEX comme #2A6F97, une valeur rgb() ou hsl(), ou même un nom de couleur CSS comme teal — ou utilise la pipette, et l'outil affiche instantanément les équivalents HEX, RGB et HSL ainsi qu'un aperçu en direct. Il demande au moteur de rendu de ton navigateur d'interpréter la couleur : tout ce que ton navigateur comprend est accepté, et les conversions sont toujours exactes. Tout s'exécute en local ; rien n'est envoyé.
HEX, RGB et HSL expliqués
Le HEX est le code à six chiffres utilisé partout en web design (#RRGGBB), compact et facile à coller dans du CSS ou un outil de design. Le RGB exprime la même couleur en valeurs rouge, vert et bleu de 0 à 255, pratique quand un outil demande les canaux séparément. Le HSL décrit une couleur par sa teinte (sa position sur la roue chromatique), sa saturation et sa luminosité, ce qui rend les ajustements intuitifs — modifie la luminosité pour obtenir une teinte plus claire ou plus foncée. Passer d'un format à l'autre permet de faire correspondre une couleur entre logiciel de design, code et outils de contenu.
Comment convertir une couleur
Convertir une valeur ne prend que quelques secondes. Clique dans le champ de saisie et tape ou colle la couleur que tu as — un code comme #2A6F97 ou rgb(42, 111, 151), ou simplement le mot teal. Les trois résultats et l'aperçu se mettent à jour pendant que tu saisis, donc il n'y a aucun bouton à presser. Si tu préfères choisir visuellement, ouvre la pipette à gauche et balaie la palette : le champ de saisie se remplit tout seul avec le code HEX correspondant. Puis presse le bouton de copie placé à côté du format dont tu as besoin pour déposer la valeur exacte dans le presse-papiers.
Un exemple concret
Imaginons que ta couleur de marque soit codée #2A6F97 et qu'un modèle de document demande la même couleur en RGB ou en HSL. Colle le code HEX dans l'outil et tu obtiens immédiatement rgb(42, 111, 151) et hsl(202, 56%, 38%), ainsi qu'un aperçu qui confirme que tu travailles avec la bonne nuance. Copie la ligne RGB pour le modèle et la ligne HSL pour un accent CSS : les deux correspondront toujours, puisqu'elles décrivent exactement la même couleur. Le même flux fonctionne en sens inverse : une nuance choisie dans un outil de design peut être recollée dans le convertisseur pour obtenir un code HEX propre pour ta feuille de style.
Ce que tu peux attendre
Le widget affiche toujours trois valeurs en même temps : la couleur sous forme de code HEX à six chiffres en majuscules, une ligne rgb(r, g, b) avec des canaux de 0 à 255, et une ligne hsl(h, s%, l%) avec la teinte en degrés. Un grand aperçu se trouve au-dessus des résultats et se repeint instantanément à chaque changement, et chaque ligne possède son propre bouton de copie. La saisie est analysée par le moteur CSS du navigateur lui-même : c'est pourquoi les codes HEX à 3 ou 6 chiffres, rgb(), hsl() et les noms de couleur standard se convertissent sans surprise. Les valeurs sont aussi normalisées : un code court comme #abc ressort en #AABBCC, et la conversion utilise les canaux RGB opaques — la transparence (alpha) n'est donc pas conservée dans la sortie.
Problèmes courants et solutions
J'ai saisi une couleur et j'obtiens « ✗ Couleur invalide ». La saisie doit être une couleur que ton navigateur comprend réellement — vérifie les fautes de frappe, le croisillon manquant ou les espaces parasites, ou choisis la nuance avec la pipette. Le bouton de copie n'a rien fait. L'API presse-papiers exige un contexte sécurisé (HTTPS ou localhost) ; s'il n'est pas disponible, tu peux sélectionner et copier le code à la main. Ma couleur a de la transparence. L'alpha n'est pas affichée dans les sorties, donc une valeur rgba() est convertie via ses seuls canaux RGB et la transparence est perdue. La couleur rend différemment de mon outil de design. L'aperçu montre l'interprétation exacte de la valeur par le navigateur, mais l'étalonnage de l'écran et les profils de couleur peuvent faire rendre le même code légèrement différemment ailleurs.
Questions fréquentes
Quels formats de couleur puis-je coller ?
Le HEX (3 ou 6 chiffres), rgb(), hsl() et les noms de couleur CSS standard fonctionnent, car c'est le navigateur qui les analyse — tout ce que son moteur CSS comprend est accepté.
Gère-t-il la transparence (alpha) ?
Le convertisseur se concentre sur la couleur pleine. L'alpha n'est pas affiché dans les sorties, donc une valeur rgba() est convertie via ses canaux RGB.
Puis-je convertir vers le CMYK ou le HSV ?
Non — les sorties sont uniquement en HEX, RGB et HSL. Si un autre outil a besoin d'un format différent, tu peux généralement y substituer directement la valeur RGB ou HSL.
Pourquoi le résultat est-il toujours en majuscules et à six chiffres ?
Le widget normalise chaque couleur en un code #RRGGBB à six chiffres affiché en majuscules, donc une forme courte comme #abc ressort en #AABBCC — pratique avant de coller dans une feuille de style.
Que se passe-t-il si je colle quelque chose d'invalide ?
Une valeur invalide affiche le message « ✗ Couleur invalide » et les résultats précédents restent à l'écran : une erreur n'efface jamais ce que tu as déjà converti.
Mes données sont-elles envoyées quelque part ?
Non. Toute l'analyse et la conversion se font dans ton navigateur et rien de ce que tu saisis ne quitte ton appareil.