Convertisseur de Couleur
Convertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et CMYK. Choisissez une couleur ou saisissez une valeur dans n'importe quel format — toutes les autres notations se mettent à jour instantanément, directement dans votre navigateur.
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
Comment utiliser Convertisseur de Couleur
- 1
Choisissez ou collez une couleur
Cliquez sur l'échantillon pour ouvrir le sélecteur de couleur, ou collez une valeur dans le champ HEX, RGB ou HSL. Tout l'outil suit la couleur que vous choisissez.
- 2
Modifiez dans n'importe quel format
Saisissez directement dans le champ HEX, RGB ou HSL. Toutes les autres notations — y compris HSV et CMYK — sont recalculées dès que vous effectuez une modification.
- 3
Lisez toutes les notations
Voyez la même couleur exprimée de cinq façons à la fois, pour reproduire un design dans le CSS, l'impression et les éditeurs d'images sans recourir à un second outil.
- 4
Copiez ce dont vous avez besoin
Utilisez le bouton de copie à côté de n'importe quelle valeur pour la placer dans votre presse-papiers, prête à être collée dans votre feuille de style ou votre fichier de conception.
Guide pratique des formats de couleur
Une même couleur, des notations différentes
HEX, RGB, HSL, HSV et CMYK ne sont pas des couleurs différentes ; pour le travail à l'écran, ce sont différentes façons d'écrire un même point dans l'espace colorimétrique. Le rouge pur peut s'écrire #ff0000, rgb(255, 0, 0) ou hsl(0, 100%, 50%), et les trois s'affichent à l'identique. Choisir une notation, c'est choisir celle qui est la plus simple à manipuler pour la tâche du moment, et c'est pourquoi un convertisseur qui les présente côte à côte fait gagner un temps précieux. Vous prenez le format adapté à votre outil et vous le copiez, au lieu de faire les calculs à la main.
La seule exception est le CMYK, qui vise l'encre plutôt que la lumière et ne se transpose donc pas parfaitement sur les autres : un point à garder à l'esprit, sur lequel nous revenons plus bas.
HEX et RGB sont les mêmes nombres
RGB décrit une couleur par trois canaux, le rouge, le vert et le bleu, chacun allant de 0 à 255 et mélangés comme de la lumière. HEX, ce sont simplement ces trois mêmes nombres écrits en base seize, à raison de deux chiffres hexadécimaux par canal. Ainsi, dans #f5530c, le f5 est le canal rouge, soit 245, le 53 est le vert, soit 83, et le 0c est le bleu, soit 12, ce qui donne exactement rgb(245, 83, 12). Comme un octet contient les valeurs de 0 à 255, chaque canal a besoin d'exactement deux chiffres hexadécimaux, et la conversion entre les deux est directe et sans perte.
Le HEX abrégé est une commodité : un code à trois chiffres double chaque chiffre, si bien que #f50 se développe en #ff5500. Cet outil interprète l'abrégé exactement comme le fait un navigateur, et accepte le code avec ou sans le dièse initial, en majuscules ou en minuscules.
L'alpha : RGBA et HSLA
Ajouter un canal alpha rend une couleur partiellement transparente. RGBA et HSLA ajoutent une quatrième valeur, une opacité allant de 0 pour totalement transparent à 1 pour totalement opaque, de sorte que rgba(245, 83, 12, 0.5) est le même orange à demi-opacité. Le CSS moderne prend aussi en charge le HEX à huit chiffres, où les deux derniers chiffres encodent l'alpha sous forme d'octet, si bien qu'une opacité de moitié correspond à peu près à la paire hexadécimale 80 ajoutée à la couleur.
L'alpha est ce qui permet à une couleur de se fondre avec ce qui se trouve derrière elle, ce qui est essentiel pour les surimpressions, les voiles, les ombres douces et les effets de verre teinté. Rappelez-vous qu'un même alpha rend différemment selon les arrière-plans, puisque la transparence signifie que l'apparence finale est un mélange de votre couleur et de la couche située en dessous.
Pourquoi le HSL est plus facile à ajuster
Le HSL décrit une couleur comme une personne y pense : la teinte est la position sur la roue chromatique, de 0 à 360 degrés, la saturation indique son intensité en pourcentage, et la luminosité dit à quel point elle est claire, en pourcentage. Cette structure rend les réglages manuels intuitifs. Pour obtenir une nuance plus sombre de la même couleur, vous baissez la luminosité en laissant la teinte et la saturation telles quelles ; pour atténuer une couleur, vous baissez la saturation. Faire l'équivalent en RGB brut suppose de modifier les trois canaux de concert, ce qui est bien plus difficile à juger à l'œil.
C'est pourquoi le HSL excelle pour bâtir des systèmes de couleur. Vous voulez un état de survol légèrement plus sombre que la base, ou une série d'échantillons qui partagent une teinte mais parcourent les niveaux de luminosité ? Ajustez un seul nombre HSL. Le HSV, aussi écrit HSB, lui est étroitement lié mais associe la teinte et la saturation à la valeur, ou luminance, plutôt qu'à la luminosité ; c'est le modèle qu'exposent de nombreux éditeurs d'images et sélecteurs de couleur, et savoir lire les deux vous garde à l'aise d'un outil de conception à l'autre.
Exemple concret : le blanc, le noir et une couleur intermédiaire
Les extrémités sont nettes. Le blanc est #ffffff, soit rgb(255, 255, 255) et hsl(0, 0%, 100%) : tous les canaux au maximum, ou, en termes HSL, une luminosité maximale sans aucune saturation, si bien que la teinte n'a pas d'importance. Le noir est #000000, rgb(0, 0, 0) et hsl(0, 0%, 0%) : tout à zéro. Un gris moyen se situe à mi-chemin, vers #808080 et rgb(128, 128, 128), ce qui donne en HSL hsl(0, 0%, 50%), illustrant joliment que tout neutre a une saturation nulle et une luminosité qui suit sa clarté.
Maintenant une vraie couleur : ce même orange, #f5530c, se lit rgb(245, 83, 12) et environ hsl(18, 92%, 50%). La forme HSL vous indique d'un coup d'œil qu'il s'agit d'une teinte chaude proche du rouge-orangé, très saturée et de luminosité moyenne, des informations que la chaîne hexadécimale dissimule. Collez l'une de ces valeurs dans l'outil et regardez les autres se remplir instantanément.
Le CMYK et les limites du passage écran-impression
CMYK signifie cyan, magenta, jaune et noir (key), où key est le noir, et c'est un modèle soustractif conçu pour l'encre sur le papier plutôt que pour la lumière sur un écran. Parce qu'il fonctionne en soustrayant la lumière que le papier réfléchit, il ne peut pas reproduire toutes les couleurs vives qu'un affichage lumineux restitue, si bien qu'un bleu ou un vert éclatant à l'écran ressort souvent plus terne à l'impression. Les valeurs CMYK que cet outil affiche sont une conversion mathématique directe depuis RGB et sont réellement utiles comme point de départ, mais elles ne remplacent pas un flux d'impression à gestion des couleurs.
Pour une impression où la précision des couleurs est essentielle, vérifiez toujours par rapport au profil ICC réel de votre imprimante et à une épreuve, car l'appareil, le papier et les encres modifient tous le résultat. Considérez la sortie CMYK proposée ici comme une estimation rapide, et non comme une garantie.
Les couleurs nommées et le saut vers le gamut étendu
Le CSS fournit aussi environ 150 couleurs nommées, des mots comme tomato, rebeccapurple ou slategray, dont chacun n'est qu'un alias d'une valeur hexadécimale précise. Elles sont pratiques pour le prototypage rapide et pour des nuances faciles à mémoriser, même si, pour un véritable système de design, des valeurs hexadécimales ou HSL explicites offrent un contrôle et une cohérence plus fins. Les couleurs nommées sont des étiquettes commodes, pas un espace colorimétrique distinct.
Dans l'avenir, les fonctions de couleur CSS plus récentes dépassent le gamut sRGB classique que ces formats supposent. Des fonctions pour des espaces comme l'oklch, perceptuellement uniforme, et le display-p3, plus large, peuvent exprimer des couleurs plus saturées que ce que HEX et RGB peuvent atteindre, ce qui compte à mesure que les écrans modernes gagnent en capacité. Les valeurs HEX, RGB, HSL et HSV que cet outil prend en charge restent la monnaie courante du web au quotidien, et les comprendre est le socle pour adopter ces nouveaux espaces en toute confiance.
Questions fréquentes
Comment convertir une couleur HEX en RGB ?
Quelle est la différence entre HSL et HSV ?
Le format HEX abrégé à 3 chiffres est-il pris en charge ?
À quoi sert le CMYK ?
Mes données sont-elles envoyées à un serveur ?
Outils similaires
Continuez avec ces outils pratiques