Convertisseur de Code Couleur
Choisissez n'importe quelle couleur ou tapez une valeur en HEX, RGB, HSL ou HSB — tous les formats se mettent à jour instantanément. Obtenez la couleur complémentaire et un extrait CSS prêt à coller. Fonctionne entièrement dans votre navigateur, rien n'est envoyé à un serveur.
widget.pickAColor
widget.orEditAnyField
widget.complementaryColor
#F6AF3C
widget.complementaryDesc
widget.cssSnippet
color: #3B82F6;
background-color: #3B82F6;Comment utiliser le Convertisseur de Code Couleur
Il y a trois façons de définir la couleur active. Utilisez celle qui convient le mieux à votre flux de travail — le reste de l'outil se met à jour automatiquement.
Trois façons de saisir une couleur
Cliquez sur le carré coloré pour ouvrir le sélecteur de couleurs natif de votre navigateur, saisissez une valeur directement dans l'un des quatre champs de format (HEX, RGB, HSL ou HSB), ou collez une couleur copiée depuis Figma, Photoshop ou les DevTools de votre navigateur. Tous les formats se synchronisent instantanément dès qu'un champ change.
Utiliser la couleur complémentaire
La couleur complémentaire est calculée en faisant pivoter la teinte de 180° sur la roue chromatique HSL tout en préservant la même saturation et luminosité. Utilisez-la pour créer des couleurs de boutons et de liens à fort contraste qui ressortent par rapport à votre couleur de marque, construire des palettes complémentaires divisées ou triadiques, ou identifier quelle couleur d'accent créera la plus grande tension visuelle pour les CTAs.
Conseil d'accessibilité : Contraste des couleurs
WCAG 2.1 AA exige un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte par rapport à son arrière-plan. En utilisant la valeur de luminosité de HSL, choisissez du texte avec L ≤ 40% sur les arrière-plans clairs et L ≥ 60% sur les arrière-plans sombres. Vérifiez toujours avec un vérificateur de contraste dédié pour une conformité WCAG précise.
Questions fréquentes
Quelle est la différence entre les formats de couleur HEX, RGB, HSL et HSB ?
HEX (#RRGGBB) est une représentation hexadécimale à six chiffres des canaux rouge, vert et bleu d'une couleur, largement utilisée en CSS web. RGB (Rouge, Vert, Bleu) exprime les mêmes trois canaux en entiers de 0 à 255. HSL (Teinte, Saturation, Luminosité) décrit une couleur par sa position sur la roue chromatique (teinte, 0–360°), son intensité (saturation, 0–100%) et sa luminosité du noir au blanc (luminosité, 0–100%). HSB/HSV (Teinte, Saturation, Luminosité/Valeur) est similaire mais utilise Luminosité au lieu de Clarté — une couleur HSB entièrement saturée à B=100% est vive, tandis qu'en HSL l'équivalent est L=50%.
Quel format de couleur devrais-je utiliser en CSS ?
Les quatre formats sont valides en CSS moderne. HEX est le plus courant pour les valeurs statiques car il est compact. RGB et HSL sont préférés lorsque vous devez manipuler des valeurs par programmation — par exemple, en utilisant des propriétés CSS personnalisées pour dériver des nuances plus claires ou plus foncées. HSL est particulièrement convivial pour les designers car ajuster la valeur L (luminosité) produit des résultats intuitifs. HSB n'est pas pris en charge nativement en CSS mais est utilisé dans des outils de design comme Figma et Adobe Photoshop.
Qu'est-ce qu'une couleur complémentaire ?
Une couleur complémentaire est la couleur directement opposée sur la roue chromatique en 12 étapes ou 360°, c'est-à-dire à 180° de teinte. Les paires complémentaires créent un contraste maximum et une vivacité visuelle lorsqu'elles sont placées côte à côte — par exemple, bleu et orange, ou rouge et vert. Les designers utilisent les couleurs complémentaires pour les boutons d'appel à l'action, les surlignements, ou partout où un contraste est nécessaire.
Cet outil envoie-t-il mes données de couleur à un serveur ?
Non. Tous les calculs de conversion de couleur se passe entièrement dans votre navigateur en JavaScript. Aucune valeur de couleur, sélection de picker ou autre donnée n'est transmise à aucun serveur. L'outil fonctionne hors ligne une fois la page chargée.
Comment convertir une couleur que je vois sur un site web en HEX ou RGB ?
Ouvrez les DevTools de votre navigateur (F12 ou clic droit → Inspecter), sélectionnez l'élément avec la couleur souhaitée et regardez son CSS dans le panneau Styles. Cliquez sur le swatch coloré à côté d'une valeur de couleur pour ouvrir le picker intégré, qui montre les valeurs HEX et RGB. Alternativement, utilisez une extension de navigateur comme ColorZilla pour prélever n'importe quel pixel à l'écran et obtenir son code HEX/RGB instantanément.
Outils associés
Besoin d'un audit SEO technique complet ?
Nos experts SEO peuvent auditer la santé technique de votre site — crawlabilité, Core Web Vitals, données structurées et plus — et fournir un plan d'action personnalisé pour une croissance organique durable.
Get a Free SEO Audit