Convertisseur de couleur : à quoi sert cet outil
Convertir des codes couleur entre différents espaces colorimétriques est une tâche quotidienne pour les graphistes, designers UI/UX, intégrateurs web, illustrateurs et développeurs front-end : traduire une couleur hexadécimale issue d'une maquette Figma en composantes RGB pour du code Canvas ou WebGL, adapter une nuance en HSL pour manipuler facilement la luminosité et la saturation en CSS, ou prévisualiser une teinte à l'aide d'une pipette interactive. Le convertisseur de couleurs de Xorvian vous offre des conversions instantanées et bidirectionnelles entre les formats HEX, RGB et HSL.
L'outil assure une synchronisation parfaite entre les trois principaux formats du web : le format hexadécimal (HEX, supportant les notations à 6 caractères `#3b82f6` et raccourcies à 3 caractères `#38f`), le modèle Rouge-Vert-Bleu (RGB, sur une échelle de 0 à 255) et le modèle Teinte-Saturation-Luminosité (HSL, avec un angle de 0 à 360° et des pourcentages de 0 à 100 %).
Vous pouvez saisir votre couleur dans n'importe lequel des trois champs ou la sélectionner visuellement à l'aide de la palette chromatique interactive. Dès la moindre modification, les autres formats s'actualisent en temps réel et le pavé de prévisualisation affiche la nuance exacte.
Chaque format dispose de son propre bouton de copie pour transférer immédiatement la syntaxe CSS exacte dans votre presse-papiers. L'ensemble des calculs s'exécute à 100 % localement dans votre navigateur web sans aucun échange réseau.
Aucun fichier stocké
Rien n'est enregistré sur nos serveurs, ni pendant ni après le traitement.
Traitement local
Le calcul s'exécute dans votre navigateur dès que la technologie le permet.
Résultat immédiat
Pas d'attente, pas de file d'export : le résultat s'affiche en direct.
Gratuit, sans compte
Aucune inscription, aucune limite quotidienne, aucune publicité intrusive.
Ce que l'outil vous apporte
Conversion simultanée 3-en-1 (HEX, RGB, HSL)
Modifiez n'importe quel champ pour actualiser instantanément les deux autres formats et le sélecteur visuel.
Sélecteur de couleur et prévisualisation en direct
Choisissez vos nuances à l'aide de la pipette ou du nuancier interactif avec aperçu grand format.
Boutons de copie individuels prêts pour le CSS
Copiez directement la syntaxe CSS standardisée (`#3b82f6`, `rgb(59, 130, 246)`, `hsl(217, 91%, 60%)`).
Support des formats HEX à 3 et 6 caractères
L'outil interprète aussi bien les notations abrégées (ex. `#FFF` ou `#38F`) que les codes complets à 6 chiffres.
Formules mathématiques de colorimétrie exactes
Calculs de conversion rigoureux entre les espaces sRGB non linéaires et cylindriques HSL.
Conversion chromatique universelle (HEX, RGB, HSL, CMYK)
Utilisez le convertisseur sans limitation, sans compte utilisateur et avec une réactivité instantanée.
Exemples concrets
Découvrez les formules et équivalences de couleurs emblématiques du web design :
Création d'une variante sombre pour un thème d'interface (Dark Mode)
Un designer UI dispose d'un bleu principal `#3b82f6` (`hsl(217, 91%, 60%)`). Pour concevoir l'état de survol et le thème sombre, il réduit la composante de luminosité L de 60 % à 40 % (`hsl(217, 91%, 40%)`) et récupère immédiatement le code hexadécimal `#1d4ed8` correspondant.
Intégration d'une couleur dans un script Canvas HTML5
Un développeur souhaite peindre une forme avec transparence sur un Canvas. En collant la couleur HEX `#10b981` d'une charte graphique, il lit les valeurs RGB `rgb(16, 185, 129)` pour écrire directement `rgba(16, 185, 129, 0.5)` dans son script JavaScript.
Vérification d'un code couleur raccourci
Un intégrateur trouve la notation `#f60` dans une ancienne feuille de style. En la saisissant dans l'outil, il visualise le code complet `#ff6600` et son aperçu orange vif instantanément.
Comment utiliser Convertisseur de couleur
Choisir un mode de saisie
Entrez votre couleur dans le champ HEX, RGB ou HSL, ou cliquez sur le carré coloré pour ouvrir la palette visuelle.
Observer la synchronisation instantanée
Dès la modification d'un champ, les autres formats se mettent à jour automatiquement en temps réel.
Inspecter le pavé de prévisualisation
Vérifiez le rendu visuel de la teinte sur le grand bloc de couleur situé en haut du panneau.
Copier le format désiré
Cliquez sur le bouton « Copier » associé à la ligne HEX, RGB ou HSL pour placer la chaîne CSS dans votre presse-papiers.
Conseils et erreurs à éviter
Comprendre le cercle chromatique HSL (H)
La teinte H correspond à un angle de 0° à 360° : 0° = Rouge, 60° = Jaune, 120° = Vert, 180° = Cyan, 240° = Bleu, 300° = Magenta.
Créer des nuances harmonieuses avec HSL
En conservant la même teinte (H) et la même saturation (S), variez simplement la luminosité (L) pour générer toute une gamme de tons complémentaires.
Utiliser la notation hexadécimale à 3 caractères
Dans le format HEX, doubler les caractères permet de raccourcir les codes : `#ffffff` devient `#fff`, `#336699` devient `#369`.
Générer des palettes aléatoires
Pour trouver de l'inspiration chromatique, explorez également notre outil « Générateur de palette de couleurs ».
À éviter : Oublier le symbole dièse (#) dans un code HEX
Bien que l'outil tolère les codes sans dièse, veillez à toujours inclure le `#` dans votre code CSS final (ex. `#3b82f6`).
À éviter : Dépasser la limite de 255 en RGB
Les trois composantes rouge, verte et bleue sont strictement plafonnées entre 0 et 255 : une valeur supérieure à 255 sera tronquée.
À éviter : Confondre luminosité (L) et saturation (S) en HSL
La saturation (S) mesure la pureté ou vivacité de la couleur (0 % = gris neutre, 100 % = couleur pure), tandis que la luminosité (L) va du noir (0 %) au blanc (100 %).
Questions fréquentes
Les réponses aux questions posées sur Convertisseur de couleur.
Outils liés
Les outils utilisés juste après celui-ci.
Mis à jour le août 2026. Voir tous les outils