À propos : Convertisseur de couleurs
Les logiciels de design utilisent le HEX, le CSS le RGB ou le HSL et l’imprimeur le CMJN. Quel que soit le champ rempli, tous les autres formats s’actualisent aussitôt, et vous pouvez copier le code CSS avec la transparence (alpha).
L’outil calcule aussi le rapport de contraste entre la couleur du texte et celle du fond et indique par des badges AA et AAA si les règles WCAG 2.1 sont respectées – la base du RGAA en France.
Mode d’emploi
- Touchez la grande pastille en haut à gauche pour choisir une couleur, ou saisissez un code dans l’un des champs HEX, RGB, HSL, HSV ou CMJN.
- Déplacez le curseur d’opacité pour obtenir un code HEX à 8 chiffres ainsi que les valeurs rgba et hsla.
- Dans Rapport de contraste, consultez le contraste avec le blanc, le noir et une couleur de votre choix.
- Touchez une couleur de la palette Plus clair · plus foncé pour copier son code HEX, ou copiez tout le CSS en bas de page.
Les formats de couleur
| Format | Exemple | Signification |
|---|---|---|
| HEX | #4f46e5 | Rouge, vert et bleu sur deux chiffres hexadécimaux chacun ; avec 8 chiffres, les deux derniers indiquent l’opacité |
| RGB | rgb(79, 70, 229) | Chaque canal de 0 à 255 |
| HSL | hsl(243, 75%, 59%) | Teinte (0–360°), saturation et luminosité ; facile à ajuster |
| HSV (HSB) | hsv(243, 69%, 90%) | Le modèle des sélecteurs de couleur de Photoshop et Figma |
| CMJN (CMYK) | cmyk(66%, 69%, 0%, 10%) | Proportions d’encres pour l’impression |
Seuils de contraste (WCAG 2.1 / RGAA)
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA (minimum) | au moins 4,5:1 | au moins 3:1 |
| AAA (renforcé) | au moins 7:1 | au moins 4,5:1 |
Un grand texte mesure au moins 18 pt (environ 24 px) ou 14 pt en gras (environ 18,66 px). Le RGAA, obligatoire pour les sites publics, exige au moins 4,5:1 pour le texte courant. Le rapport va de 1:1 (même couleur) à 21:1 (noir sur blanc).
Questions fréquentes
Pourquoi les couleurs imprimées diffèrent-elles de l’écran ?
L’écran mélange de la lumière (RGB) et l’imprimante des encres (CMJN) : leurs gammes de couleurs ne sont pas les mêmes. Le CMJN affiché ici provient de la formule de conversion simple et diffère des valeurs obtenues avec un profil comme FOGRA39. Demandez une épreuve pour les impressions importantes.
Qu’est-ce qu’un code HEX à 8 chiffres ?
C’est le format #RRGGBBAA, dont les deux derniers chiffres donnent l’opacité : 80 vaut environ 50 %, CC 80 % et FF 100 % (opaque). Tous les navigateurs récents le prennent en charge.
Comment le contraste d’une couleur transparente est-il calculé ?
Avec de la transparence, la couleur visible dépend du fond. L’outil ignore donc l’opacité et calcule le contraste sur la couleur pleine.
Puis-je saisir un nom de couleur ?
Oui. Saisissez dans le champ HEX l’un des 148 noms de couleur CSS, comme red, navy, skyblue ou tomato.