Convertisseur de couleurs HEX ↔ RVB ↔ HSL
Convertissez les couleurs entre les formats HEX, RVB et HSL instantanément — avec sélecteur visuel inclus.
Entrez une couleur en format HEX, RVB ou HSL — le convertisseur met instantanément à jour les trois formats. Utilisez le sélecteur de couleur natif dans l'onglet HEX pour choisir visuellement une couleur. Le bouton « Copier » copie la valeur dans le presse-papier. Prend en charge les codes HEX à 3 chiffres (#ABC) et 6 chiffres (#AABBCC).
Cet outil est utilisé par les développeurs web, les designers UI/UX et toute personne travaillant avec CSS, HTML, Figma ou des systèmes de design. La conversion entre HEX, RVB et HSL est une tâche quotidienne en développement web. Toutes les conversions s'effectuent instantanément dans votre navigateur — aucune donnée n'est envoyée.
Questions fréquentes
Qu'est-ce qu'un code couleur HEX ?
Une couleur HEX est une valeur hexadécimale à 6 chiffres (ex. #1565C0) représentant les composantes rouge, vert et bleu. Chaque paire de chiffres va de 00 à FF (0–255 en décimal). HEX est le format de couleur le plus utilisé en CSS, HTML et dans les outils de design comme Figma ou Adobe XD.
Quelle est la différence entre RVB et HSL ?
RVB (Rouge, Vert, Bleu) décrit une couleur par l'intensité de ses composantes lumineuses (0–255). HSL (Teinte, Saturation, Luminosité) est plus intuitif pour les designers : la teinte est l'angle sur le cercle chromatique (0–360°), la saturation l'intensité (0–100%), la luminosité contrôle la clarté (0–100%). HSL est plus pratique pour ajuster la teinte ou l'éclat sans recalculer les trois composantes.
Comment convertir HEX en RVB ?
Divisez les 6 caractères HEX en 3 paires : rouge (1re paire), vert (2e), bleu (3e). Convertissez chaque paire de l'hexadécimal au décimal. Exemple : #1565C0 → 15=21, 65=101, C0=192 → RVB(21, 101, 192). Ce convertisseur le fait automatiquement — tapez dans n'importe quel champ.
Puis-je utiliser un code HEX à 3 chiffres ?
Oui. #1AC est l'abréviation de #11AACC — chaque chiffre est doublé. Ce convertisseur accepte les deux formats. Pour une compatibilité maximale, utilisez de préférence le format à 6 chiffres.
À quoi servent les couleurs HEX ?
HEX est utilisé dans CSS (color: #1565C0), HTML, SVG et la quasi-totalité des outils de design (Figma, Adobe XD, Sketch, Photoshop, Canva). C'est le format par défaut en web design. RVB est préféré pour RGBA (avec transparence) et pour la manipulation programmatique des couleurs.
Comment trouver le code HEX d'une couleur dans Figma ?
Dans Figma : sélectionnez l'élément, ouvrez le panneau Fill à droite, cliquez sur le carré de couleur — le code HEX s'affiche et peut être copié directement. La pipette (eyedropper) permet de capturer la couleur de n'importe quel élément à l'écran. Dans VS Code, l'extension "Color Highlight" affiche un aperçu des couleurs à côté de chaque code HEX/RVB dans vos fichiers CSS.
Qu'est-ce que RGBA ?
RGBA ajoute un canal alpha (opacité) à RVB : RGBA(21, 101, 192, 0.8) représente la même couleur à 80 % d'opacité. La valeur alpha va de 0 (totalement transparent) à 1 (totalement opaque). Ce convertisseur traite le RVB sans canal alpha — pour RGBA, utilisez les valeurs RVB obtenues ici et ajoutez votre alpha dans CSS : rgba(R, G, B, alpha).
Comment convertir HSL en HEX ?
La conversion HSL → HEX passe par une étape intermédiaire RVB. D'abord, HSL est converti en RVB selon la formule standard. Ensuite, chaque composante RVB est convertie en son équivalent hexadécimal à 2 chiffres. Ce convertisseur gère automatiquement toute la chaîne de conversion.
Qu'est-ce que les couleurs web-safe ?
Les couleurs web-safe forment un ensemble de 216 couleurs (6 valeurs par canal : 00, 33, 66, 99, CC, FF) qui s'affichaient de façon identique sur les anciens moniteurs. Les écrans modernes affichent plus de 16 millions de couleurs, rendant cette palette largement obsolète. Vous pouvez utiliser n'importe quelle valeur HEX/RVB/HSL sans restriction.
Comment les couleurs sont-elles définies en CSS ?
CSS prend en charge : HEX (#1565C0), RVB (rgb(21, 101, 192)), RGBA, HSL (hsl(213, 80%, 42%)), HSLA, couleurs nommées (blue, red), et les nouveaux formats oklch() et color(). HEX et RVB sont les plus largement supportés. HSL est préférable pour ajuster programmatiquement la luminosité ou la saturation via des variables CSS personnalisées.