Convertisseur
de couleur
en ligne.
Convertissez instantanément entre HEX, RGB, HSL, HSV, CMJN, décimal et noms CSS. Aperçu en temps réel et ratio de contraste WCAG.
#F00, #FF0000, #FF0000FF (avec alpha)rgb(255,0,0), rgba(255,0,0,0.5)hsl(0,100%,50%), hsla(0,100%,50%,0.5)hsv(0,100%,100%) — CMYK : cmyk(0%,100%,100%,0%)red, dodgerblue, rebeccapurple — Décimal : 16711680ou votre identité visuelle ? Contactez-nous
Comprendre les formats de couleur
HEX et RGB : les incontournables
Le format HEX (#FF0000) est le plus utilise en CSS et dans les outils de design. Il représente les composantes Rouge, Vert, Bleu en hexadécimal. Le RGB (rgb(255,0,0)) exprime les mêmes valeurs en décimal, de 0 a 255. Les deux formats couvrent le même gamut et sont interchangeables.
HSL : pensez en teinte et luminosité
HSL (Hue, Saturation, Lightness) est le format le plus intuitif pour les designers. La teinte est un angle de 0 a 360 degrés sur le cercle chromatique, la saturation et la luminosité sont des pourcentages. Modifier la luminosité seule permet de créer facilement des variantes claires et sombres d'une même teinte.
HSV et CMYK : outils pros
HSV (Hue, Saturation, Value) est le modèle utilise par Photoshop, Figma et la plupart des color pickers. CMYK (Cyan, Magenta, Yellow, Key/Black) est le standard de l'impression. La conversion RGB vers CMYK est approximative car les deux espaces couleur ne couvrent pas le même gamut.
Ratio de contraste WCAG
Le ratio de contraste mesure la lisibilité d'une couleur sur un fond donne. Les normes WCAG 2.1 exigent un ratio minimum de 4.5:1 pour le texte normal (AA) et 7:1 pour le niveau AAA. Notre outil calcule automatiquement le contraste de votre couleur sur fond blanc et fond noir.
Tous les formats de couleur supportés
Entrez votre couleur dans n’importe quel format : code HEX avec ou sans #, valeurs RGB ou RGBA, teinte HSL ou HSLA, format HSV utilisé par Photoshop et Figma, quadrichromie CMJN pour l’impression, valeur décimale entière ou nom CSS standardisé. L’outil détecte automatiquement le format saisi et affiche instantanément les équivalences dans les neuf autres formats. Aucun bouton « Convertir » la conversion se met à jour à chaque frappe.
HEX, RGB, HSL : quel format utiliser selon votre contexte
Le format HEX (#RRGGBB) est le standard universel du web : supporté par tous les navigateurs, tous les outils de design et la totalité des CMS. C’est le format par défaut dans les CSS, les éditeurs de thèmes et les palettes de marque. Le format RGB convient aux manipulations dynamiques en JavaScript transparence variable, interpolation de couleurs, calculs d’animation. RGBA ajoute le canal alpha pour la gestion de l’opacité directement dans la valeur de couleur. Le format HSL (teinte, saturation, luminosité) est le plus intuitif pour les designers : ajuster la luminosité (L) sans toucher à la teinte (H) permet de créer des variantes claires et sombres d’une même couleur en une modification. C’est le format idéal pour construire un système de couleurs cohérent.
HSV et CMJN : les formats des outils créatifs et de l’impression
Le format HSV (teinte, saturation, valeur) est celui qu’affichent nativement Photoshop, Illustrator et Figma dans leurs sélecteurs de couleur. Si vous relevez une couleur dans l’un de ces outils et devez l’intégrer dans un CSS ou un thème web, cet outil fait la conversion en une saisie. Le format CMJN (cyan, magenta, jaune, noir) est le standard de l’impression quadrichromique. Il ne correspond pas exactement aux valeurs web les espaces couleur RVB et CMJN ne se superposent pas parfaitement mais la conversion donne une base de travail fiable pour coordonner les supports print et digitaux d’une même charte graphique.
Le ratio de contraste affiché : pourquoi c’est utile
Pour chaque couleur analysée, l’outil calcule le ratio de contraste avec le blanc et avec le noir selon la formule de luminance relative WCAG 2.1. Ce ratio indique immédiatement si la couleur est lisible en texte sur fond blanc ou sur fond sombre, sans avoir à ouvrir un outil d’accessibilité séparé. Un ratio de 4.5:1 ou plus est requis pour le texte courant en conformité WCAG AA le seuil légal en France pour les services en ligne soumis au RGAA.
Comment utiliser le convertisseur de couleur
Vous pouvez partir du format que vous avez déjà sous la main. Un code HEX trouvé dans une charte graphique, une valeur RGB récupérée dans un fichier CSS, une couleur HSL préparée pour une interface, ou une valeur CMJN issue d’un support imprimé.
- Collez ou saisissez votre couleur dans le champ prévu.
- Ajoutez le # si vous le souhaitez pour un code HEX, ou saisissez le code sans #.
- Vérifiez l’aperçu pour confirmer que la couleur affichée correspond bien à votre intention.
- Consultez les équivalences générées en HEX, RGB, RGBA, HSL, HSV ou CMJN.
- Copiez le code dont vous avez besoin, puis collez-le dans votre CSS, votre outil de design, votre thème ou votre document.
Si vous ne connaissez pas encore la valeur de départ, vous pouvez d’abord sélectionner visuellement une couleur avec le sélecteur de couleur. Si votre couleur vient d’une image ou d’un logo, l’outil pour trouver les couleurs d’une image ou d’un logo peut vous aider avant la conversion.
Cas d’usage concrets
Le convertisseur est utile dès que vous devez passer d’un environnement à un autre sans ressaisir une couleur au hasard. Par exemple, un designer peut vous transmettre une teinte en HSV depuis un logiciel créatif. Vous pouvez la convertir en HEX pour l’intégrer dans une feuille de style ou dans les réglages d’un CMS.
Pour une interface web, vous pouvez aussi convertir un code HEX en RGB ou RGBA lorsque vous avez besoin d’ajouter une transparence. C’est pratique pour un fond, un calque, une bordure ou un effet visuel léger, tout en conservant la même base colorée.
Si vous travaillez sur une charte graphique, la conversion entre HEX, HSL et RGB permet de garder une cohérence entre plusieurs supports. Vous pouvez vérifier rapidement une couleur orange, jaune, verte ou toute autre teinte, puis récupérer le format adapté à votre usage.
Pour créer des variantes autour d’une couleur principale, vous pouvez compléter votre travail avec le générateur de palette de couleurs. Si vous avez déjà une liste de teintes, la page dédiée aux couleurs HEX peut aussi vous servir de repère.
Questions fréquentes
Tout savoir sur les formats de couleur.
Le code HEX exprime une couleur avec une notation compacte, souvent utilisée sur le web. Le RGB indique séparément les valeurs de rouge, de vert et de bleu. Les deux peuvent représenter la même couleur, mais dans des formats différents.
Oui. Vous pouvez saisir un code HEX avec ou sans #. L’outil détecte le format et affiche les conversions disponibles dans les autres notations prises en charge.
Le convertisseur sert à transformer une valeur de couleur déjà connue. Si vous partez d’une image, commencez par récupérer la couleur avec un outil adapté, puis collez le code obtenu dans le convertisseur pour obtenir les autres formats.
Le HEX convient à la plupart des usages CSS. Le RGB ou le RGBA est utile si vous devez gérer une opacité. Le HSL peut être plus pratique si vous ajustez souvent la teinte, la saturation ou la luminosité.
Pour aller plus loin
Autres outils gratuits
Nos guides
Les conversions sont effectuées directement dans votre navigateur via JavaScript. Aucune donnée n'est transmise ni conservée par Osmova. La conversion CMYK est une approximation mathématique et ne remplace pas un profil ICC calibre pour l'impression. Conditions d'utilisation