Convertisseur de couleur
HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité.
Les exemples remplacent temporairement la saisie et les réglages. Vous pouvez rétablir votre travail précédent.
Collez ou saisissez du texte ci-dessus pour voir le résultat ici.
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.
Exemple
Exemple : la charte d’un salon de thé, du HEX au CMJN, avec le contraste du texte
Pour la carte et le site d’un salon de thé, la graphiste a retenu trois couleurs : un bordeaux #7b1e3a, un crème #f3e9d2 et un vert sauge #9caf88. On les colle une par ligne pour obtenir leurs autres notations et savoir sur laquelle écrire en blanc ou en noir.
- Chaque paire du code HEX est un nombre en base 16 : 7b, 1e et 3a font 123, 30 et 58, d’où rgb(123, 30, 58).
- En HSL, la teinte est un angle sur le cercle des couleurs : 342° pour le bordeaux, 42° pour le crème, 89° pour le sauge ; la luminosité (30 %, 89 %, 61 %) dit déjà laquelle est sombre.
- La ligne CMYK donne la conversion simple en CMJN, utile pour une première idée ; pour l’imprimeur, demandez une épreuve, car le rendu dépend du papier et des encres.
- La dernière ligne de chaque couleur donne le rapport de contraste WCAG sur blanc et sur noir : 4,5:1 au moins pour du texte courant, 3:1 pour du texte grand ou gras.
| Couleur | HEX | RGB | HSL | CMJN | Sur blanc | Sur noir |
|---|---|---|---|---|---|---|
| Bordeaux | #7b1e3a | rgb(123, 30, 58) | hsl(342, 61%, 30%) | 0%, 76%, 53%, 52% | 10,05:1 | 2,09:1 |
| Crème | #f3e9d2 | rgb(243, 233, 210) | hsl(42, 58%, 89%) | 0%, 4%, 14%, 5% | 1,21:1 | 17,40:1 |
| Vert sauge | #9caf88 | rgb(156, 175, 136) | hsl(89, 20%, 61%) | 11%, 0%, 22%, 31% | 2,36:1 | 8,90:1 |
Texte blanc sur le bordeaux (10,05:1) et texte noir sur le crème (17,40:1) se lisent sans peine. Sur le vert sauge, le blanc n’atteint que 2,36:1 : écrivez-y en noir (8,90:1). Le bordeaux convient aussi comme couleur de texte sur fond blanc.
Comment ça marche
- Collez une couleur : #3b5bdb, #fff, rgb(59 91 219), rgba(59, 91, 219, 0.5) ou hsl(228, 69%, 55%).
- Une couleur par ligne pour convertir toute une palette d’un coup.
- Relisez les notations, et les deux rapports de contraste en dessous.
- Copiez ce dont vous avez besoin.
Questions fréquentes
- Quelles notations lit-il ?
- L’hexadécimal à trois, quatre, six et huit chiffres, rgb() et rgba(), hsl() et hsla(), avec des valeurs séparées par des virgules ou des espaces et un alpha après une barre oblique. Les couleurs nommées ne sont pas lues.
- À quoi servent les deux nombres de contraste ?
- Ce sont les rapports de contraste WCAG de votre couleur sur blanc et sur noir, ce qui décide de la lisibilité du texte. Les seuils à retenir : 4,5:1 pour le texte courant, 3:1 pour le texte grand ou gras, et 21:1 correspond au noir sur blanc.
- Le CMJN est-il exact ?
- Non, et aucun navigateur ne peut l’être. Le vrai CMJN dépend de la presse, de l’encre et du papier, ce que décrit un profil colorimétrique. Les chiffres donnés ici sont la conversion arithmétique simple : juste pour se faire une idée, faux comme consigne d’impression.
- Comment convertir une couleur RGB en HEX ?
- Collez-la telle quelle, avec des virgules ou des espaces : rgb(123, 30, 58) et rgb(123 30 58) donnent tous deux #7b1e3a. Une couleur semi-transparente comme rgba(123, 30, 58, 0.5) ressort en HEX à 8 chiffres, #7b1e3a80, les deux derniers codant l’opacité.
- Texte blanc ou noir sur ma couleur de fond ?
- Comparez les deux rapports de la dernière ligne et gardez le plus élevé : il faut au moins 4,5:1 pour du texte courant. Pour le vert sauge #9caf88, le blanc donne 2,36:1 et le noir 8,90:1 : le texte doit être noir. Pour une couleur semi-transparente, le rapport « sur blanc » et le CMYK (marqué « sur blanc ») sont calculés pour la couleur posée sur du blanc, et le rapport « sur noir » pour la couleur posée sur du noir.
- Quelque chose part-il vers un serveur ?
- Non. Tout tourne dans le navigateur : ce que vous saisissez reste sur votre ordinateur.