Convertisseur de couleurs

Choisissez une couleur ou saisissez-la dans n'importe quel format (HEX, RGB, HSL, OKLCH, un nom comme « tomato »…) et obtenez aussitôt sa valeur dans tous les autres, prête à coller dans votre CSS. Réglez la transparence et vérifiez si elle se lit bien sur blanc et sur noir.

Couleur

Nom CSS le plus proche :
Vous pouvez saisir ou coller la couleur dans n'importe quel format, dans n'importe quel champ.

Contraste (WCAG 2)

Texte d'exemple

Texte d'exemple

Sur blanc: · AA · AAA

Texte d'exemple

Texte d'exemple

Sur noir: · AA · AAA

Vérifier le contraste entre deux couleurs quelconques →


Formats de couleur

HEX (#RRVVBB) est le format le plus courant sur le web : trois paires de chiffres hexadécimaux indiquant la quantité de rouge, de vert et de bleu, de 00 à FF. RGB exprime la même chose en décimal, de 0 à 255. HSL décrit la couleur par sa teinte (0-360°), sa saturation et sa luminosité en pourcentage, ce qui facilite la création de variantes plus claires ou plus foncées d'une même couleur.

CMJN (cyan, magenta, jaune et noir) est le modèle de l'imprimerie. La conversion depuis RGB est approximative : pour imprimer avec précision, il faut utiliser le profil colorimétrique de l'imprimeur.

Transparence, HWB et OKLCH

La transparence s'indique avec une quatrième valeur, le canal alpha : #FF880080 (HEX à 8 chiffres), rgba(255, 136, 0, 0.5) ou, avec la syntaxe moderne, rgb(255 136 0 / 50%). 0 est entièrement transparent et 1 (ou 100 %) entièrement opaque.

HWB (teinte, blanc et noir) et OKLCH (luminosité, chroma et teinte) sont des formats de CSS Color 4 pris en charge par tous les navigateurs actuels. OKLCH est perceptuellement uniforme : deux couleurs de même luminosité paraissent aussi claires l'une que l'autre, ce qui le rend idéal pour créer des palettes et des variantes. HSV/HSB n'existe pas en CSS, mais c'est le modèle utilisé par Photoshop, Figma et d'autres logiciels de design.

Le CSS définit aussi 148 noms de couleur (tomato, rebeccapurple, steelblue…). Si votre couleur n'a pas de nom, nous affichons le nom CSS le plus proche.

Contraste et accessibilité

Les règles d'accessibilité WCAG exigent un contraste minimal entre le texte et le fond pour que les personnes malvoyantes puissent le lire : 4,5:1 pour le texte normal au niveau AA et 7:1 au niveau AAA (3:1 et 4,5:1 pour le grand texte). Le contraste va de 1:1 (même couleur) à 21:1 (noir sur blanc).