Convertisseur de couleurs
Convertissez les codes couleur entre HEX, RGB, HSL, HSV, OKLCH et CMYK, et vérifiez le rapport de contraste (WCAG) entre le texte et le fond.
1. Saisissez une couleur
Collez un code couleur ou cliquez sur le carré à gauche pour choisir une couleur.
Ex. : #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato
2. Résultats de la conversion
Les boutons à droite copient chaque valeur dans un format prêt à coller dans votre CSS.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK (approximatif)
- —
- Nom de couleur CSS
- —
3. Vérifier le contraste
Vérifiez si une combinaison de couleurs de texte et de fond est lisible, selon les WCAG (les règles d’accessibilité du Web).
Utiliser la couleur saisie pour
Saisissez une couleur plus haut pour voir un aperçu ici.
Rapport de contraste
—
- Texte normal AA4.5 : 1 minimum—
- Texte normal AAA7 : 1 minimum—
- Grand texte AA3 : 1 minimum—
- Grand texte AAA4.5 : 1 minimum—
Un grand texte fait au moins 18 pt (24 px), ou au moins 14 pt (environ 18,7 px) en gras.
La conversion se fait sur votre appareil : les couleurs saisies ne sont envoyées nulle part.
Les valeurs CMYK sont une estimation calculée sans profil de couleur d’impression (ICC). Avant d’envoyer un fichier à l’imprimeur, vérifiez-les dans votre logiciel de PAO.
Utile ? Un partage nous ferait plaisir
Quelque chose ne marche pas, ou une idée pour l’améliorer ?
Mode d’emploi
1. Saisir un code couleur
Saisissez le code de la couleur à convertir (par exemple #FF6B35) dans le champ « Code couleur ». Les « Résultats de la conversion » plus bas affichent aussitôt les valeurs RGB, HSL, HSV, OKLCH et CMYK, ainsi que le nom de couleur CSS.
À gauche, saisissez le code de la couleur à convertir (par exemple #FF6B35) dans le champ « Code couleur ». Les « Résultats de la conversion » à droite affichent aussitôt les valeurs RGB, HSL, HSV, OKLCH et CMYK, ainsi que le nom de couleur CSS.
2. Choisir une couleur
Touchez le carré de couleur à gauche du champ « Code couleur ». Le sélecteur de couleur s’ouvre : le code de la couleur choisie s’inscrit dans le champ et les résultats se mettent à jour.
Cliquez sur le carré de couleur à gauche du champ « Code couleur ». Le sélecteur de couleur s’ouvre : le code de la couleur choisie s’inscrit dans le champ et les résultats se mettent à jour.
3. Copier les résultats
Dans les « Résultats de la conversion », touchez le bouton à droite de « RGB » pour copier la valeur au format rgb(…). Touchez « Copier tous les résultats » plus bas pour copier tous les formats, un par ligne.
Dans les « Résultats de la conversion », cliquez sur le bouton à droite de « RGB » pour copier la valeur au format rgb(…). Cliquez sur « Copier tous les résultats » plus bas pour copier tous les formats, un par ligne.
4. Vérifier le contraste
Plus bas, dans « Vérifier le contraste », touchez « Noir » à droite de « Couleur de fond ». Vous voyez un aperçu du texte sur fond noir, le rapport de contraste, et si le texte normal et le grand texte atteignent les niveaux AA et AAA.
Plus bas, dans « Vérifier le contraste », cliquez sur « Noir » à droite de « Couleur de fond ». Vous voyez un aperçu du texte sur fond noir, le rapport de contraste, et si le texte normal et le grand texte atteignent les niveaux AA et AAA.
Pratique pour
Passer les couleurs d’une maquette en CSS
Collez un code HEX copié depuis votre logiciel de design : vous obtenez aussitôt rgb(), hsl() et le récent oklch().
Développeurs web et d’applis
Vérifier la lisibilité d’un texte
Saisissez les couleurs du texte et du fond pour voir le rapport de contraste et savoir si les niveaux AA et AAA des WCAG sont atteints.
Designers attentifs à l’accessibilité
Estimer en CMYK une couleur d’écran
Pour un flyer ou des cartes de visite, faites-vous une idée de ce que donne une couleur web en CMYK.
Ceux qui préparent des imprimés
Réunir une couleur de marque dans tous ses formats
Avec « Copier tous les résultats », copiez d’un coup tous les formats, du HEX au CMYK, pour les coller dans une présentation ou une charte graphique.
Communication et marketing
Bon à savoir avant de commencer
- Les valeurs CMYK sont une estimation. Pour des valeurs exactes adaptées au profil de couleur de l’imprimeur (ICC), vérifiez-les dans votre logiciel de PAO.
- Pour extraire les couleurs d’une image, utilisez l’outil Extraire les couleurs d’une image.
- L’outil ne convertit ni vers les références de tons directs comme PANTONE, ni vers les valeurs Munsell.
Les différents formats de code couleur
À l’écran, une couleur se décrit par l’intensité des trois couleurs primaires de la lumière (rouge, vert, bleu). HEX (#FF6B35) et RGB (rgb(255, 107, 53)) expriment la même chose, en hexadécimal et en décimal. HSL et HSV traduisent ces valeurs en teinte, saturation et luminosité, ce qui rend les couleurs plus faciles à ajuster. OKLCH décrit la luminosité de façon proche de la perception humaine : il est plus facile de composer des palettes de luminosité homogène, et ce format commence à se répandre dans le CSS récent.
CMYK correspond aux quantités d’encre d’impression (cyan, magenta, jaune, noir). L’écran utilise la lumière et l’impression de l’encre : une même couleur ne peut donc pas être reproduite à l’identique. Les valeurs CMYK de cet outil sont une estimation obtenue avec une formule courante. Le rapport de contraste exprime, de 1 à 21, l’écart de luminosité entre le texte et le fond. Pour un texte normal, les WCAG demandent au moins 4,5 (AA) ou 7 (AAA).
Questions fréquentes
Les questions courantes sur la conversion des codes couleur et le rapport de contraste.
Les couleurs saisies sont-elles envoyées quelque part ?
Non. La conversion comme le calcul du contraste se font uniquement dans le navigateur de votre appareil.
Quels formats peut-on saisir ?
HEX comme #FF6B35 ou #F63 (avec ou sans #), rgb() et rgba(), hsl() et hsla(), hsv() et hsb(), oklch(), cmyk() ou « C0 M58 Y79 K0 », et les noms de couleur CSS comme tomato. Trois nombres seuls, comme « 255, 107, 53 », sont lus comme du RGB.
Peut-on convertir une couleur avec de la transparence (alpha) ?
Oui. Saisissez un HEX à 8 chiffres comme #FF6B3580 ou rgba(255, 107, 53, 0.5) : le HEX s’affiche sur 8 chiffres, et RGB, HSL et OKLCH incluent l’opacité. HSV et CMYK n’ont pas d’écriture pour l’opacité : seule la couleur s’affiche.
Pourquoi les valeurs changent-elles de 1 après un aller-retour en HSL ?
Comme la plupart des sites et logiciels de design, l’outil arrondit HSL et HSV à l’entier. En repartant de ces valeurs arrondies, le RGB peut varier de 1 ou 2. Si vous avez besoin de valeurs exactes, utilisez HEX ou RGB.
Peut-on utiliser les valeurs CMYK telles quelles pour l’impression ?
Considérez-les comme une estimation. À l’impression, les couleurs dépendent du papier, de l’encre et du profil de couleur de l’imprimeur (ICC). Cet outil utilise une formule générale, sans profil. Vérifiez les valeurs dans votre logiciel de PAO ou auprès de l’imprimeur avant d’envoyer vos fichiers.
Qu’est-ce que OKLCH ?
Un format qui décrit une couleur par sa luminosité (L), sa chroma (C) et sa teinte (H), de façon proche de la perception humaine. À luminosité égale, des teintes différentes paraissent aussi claires l’une que l’autre. Les navigateurs récents l’acceptent en CSS sous la forme oklch().
La couleur saisie en OKLCH change légèrement. Pourquoi ?
OKLCH peut décrire des couleurs très vives qu’un écran ordinaire (sRGB) ne peut pas afficher. Dans ce cas, l’outil garde la luminosité et la teinte et réduit la saturation jusqu’à une couleur affichable. Un message s’affiche alors sous le champ.
Que signifient AA et AAA pour le rapport de contraste ?
Ce sont les niveaux de conformité des règles d’accessibilité du Web (WCAG 2). Pour un texte normal : 4,5 minimum pour AA, 7 pour AAA. Pour un grand texte (18 pt ou plus, ou 14 pt ou plus en gras) : 3 pour AA, 4,5 pour AAA.
Pourquoi un rapport de 4,49 ne s’affiche-t-il pas comme 4,5 ?
Pour ne pas déclarer « Conforme » une combinaison qui n’atteint pas tout à fait le seuil, le rapport est tronqué à 2 décimales, et c’est cette valeur qui sert au verdict.
Est-ce gratuit ?
Oui. Sans inscription et sans publicité.
Autres outils
- Calcul de taxe (HT ⇔ TTC)
Saisissez un prix pour obtenir aussitôt le montant hors taxes, la taxe et le total TTC. Taux japonais de 10 % et 8 % intégrés, ou n’importe quel taux.
- Calcul d’âge
Choisissez une date de naissance pour voir l’âge exact, les jours avant le prochain anniversaire, les jours vécus et le signe chinois, avec un tableau des âges par année de naissance.
- Calcul de date (ajouter ou retirer des jours)
Obtenez aussitôt la date et le jour de la semaine X jours ou X jours ouvrés après ou avant n’importe quelle date. Les week-ends et jours fériés peuvent aussi être exclus.
- Calcul d’heures (total des heures travaillées)
Calculez les heures travaillées à partir du début, de la fin et de la pause, et faites le total. Additionnez ou soustrayez des durées, ou convertissez-les en heures décimales.
- Partager l’addition
Saisissez le total et le nombre de personnes pour voir aussitôt ce que chacun doit. Arrondi à un montant pratique, parts inégales et différence payée par l’organisateur.
- Convertisseur de timestamp Unix (epoch ⇔ date)
Convertissez aussitôt un timestamp Unix (secondes ou millisecondes epoch) en date UTC ou heure du Japon, et une date en timestamp Unix.