Mode d’emploi
- Saisissez une couleur — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — ou choisissez-en une avec le sélecteur de couleur.
- Copiez le format voulu dans la liste.
- Définissez une couleur d’arrière-plan pour vérifier le rapport de contraste et les résultats WCAG AA/AAA.
- Cliquez sur une nuance de la gamme pour l’utiliser.
Explication des options
- HEX / RGB
- Couleurs d’écran exprimées en rouge, vert et bleu, de 0 à 255. #rrggbbaa et rgb(… / 50%) ajoutent la transparence.
- HSL / HSV
- Teinte, saturation et luminosité (ou valeur). Pratique pour éclaircir ou assombrir une couleur à la main.
- OKLCH
- Un espace colorimétrique perceptuel de CSS Color 4. Modifier la luminosité conserve la teinte et l’intensité perçue, ce qui le rend idéal pour les palettes et les thèmes sombres.
- CMYK (CMJN)
- Une conversion simple, à titre indicatif uniquement. Les couleurs imprimées dépendent du profil colorimétrique de l’imprimeur : demandez-lui les valeurs exactes.
- Rapport de contraste
- Les WCAG 2.2 exigent 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt, ou 14 pt en gras) au niveau AA ; 7:1 et 4,5:1 au niveau AAA.
Exemple
#0f766e correspond à rgb(15 118 110), hsl(175 77% 26%) et oklch(51.1% 0.086 186.4). Sur un fond blanc, son rapport de contraste est d’environ 5,5:1, ce qui satisfait WCAG AA pour toutes les tailles de texte.
Couleurs courantes dans tous les formats
Couleurs nommées CSS et leurs valeurs. Le CMJN est ici une simple conversion mathématique ; pour l’impression professionnelle, utilisez les valeurs CMJN du profil colorimétrique de votre imprimeur.
| Nom CSS | HEX | RVB | TSL | CMJN |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0 %, 100 %, 100 %, 0 % |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0 %, 35 %, 100 %, 0 % |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0 %, 16 %, 100 %, 0 % |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100 %, 0 %, 100 %, 50 % |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100 %, 0 %, 0 %, 50 % |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100 %, 100 %, 0 %, 0 % |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100 %, 100 %, 0 %, 50 % |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0 %, 100 %, 0 %, 50 % |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0 %, 59 %, 29 %, 0 % |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0 %, 75 %, 75 %, 35 % |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0 %, 0 %, 0 %, 50 % |
Quel format utiliser
HEX est la façon la plus courte d’écrire une couleur en CSS et dans les outils de conception : deux chiffres hexadécimaux pour chacun du rouge, du vert et du bleu.
RVB contient la même information en décimal, et rgb(255 0 0 / 50%) ajoute de la transparence.
TSL décrit la teinte, la saturation et la luminosité, ce qui permet de créer facilement des nuances plus claires ou plus sombres d’une même couleur en ne modifiant que le dernier nombre.
OKLCH est un format CSS plus récent où des écarts de luminosité égaux paraissent également différents à l’œil — utile pour des palettes de couleurs accessibles.
Questions fréquentes
Quel est un bon rapport de contraste pour du texte ?
Au moins 4,5:1 pour le texte courant (WCAG AA). Le noir pur sur blanc atteint 21:1 ; le gris #767676, très utilisé, donne 4,54:1 sur blanc, juste au-dessus du seuil.
Pourquoi la valeur CMJN diffère-t-elle de celle de Photoshop ?
Photoshop convertit via un profil colorimétrique ICC propre à une presse et à un papier donnés. Cet outil applique la formule mathématique simple, suffisante pour une estimation mais pas pour des épreuves d’impression.
Quelle est la différence entre HSL et OKLCH ?
HSL est un simple réarrangement du RGB : un jaune et un bleu de même luminosité paraissent donc très différents en clarté. OKLCH est conçu pour qu’une même luminosité paraisse aussi claire à l’œil.
Peut-on déjà utiliser OKLCH en CSS ?
Oui. oklch() fonctionne dans tous les principaux navigateurs actuels.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.