# Convertisseur de couleurs

Convertissez une couleur entre HEX, RGB, HSL, HWB et OKLCH, vérifiez son contraste WCAG avec un fond ou créez-en une palette tonale Material 3.

https://codeknife.dev/fr/convertisseur-couleurs/

## Ce qu’il fait

Convertit une couleur entre HEX, RGB, HSL, HWB et OKLCH, vérifie le rapport de contraste WCAG avec un fond et en tire une palette tonale Material 3. Tout se passe dans votre navigateur.

## Comment l’utiliser

1. Saisissez une couleur en hex (`#36c`, `#3366cc`) ou avec `rgb()`, `hsl()`, `hwb()` ou `oklch()`.
2. Choisissez **Convertir**, **Contraste** ou **Palette**. Contraste affiche un champ pour la couleur de fond.
3. Copiez ou téléchargez le résultat, ou envoyez-le à un autre outil.

## Exemples

`#3366cc` vaut `rgb(51 102 204)`, `hsl(220 60% 50%)`, `hwb(220 20% 20%)` et `oklch(0.5325 0.1679 262.29)`. Sur du blanc, son contraste est de 5,36:1 : suffisant pour AA en texte normal, pas pour AAA.

## Bon à savoir

- Le rapport suit WCAG 2 : luminance relative à partir du sRGB linéaire, puis (plus clair + 0,05) / (plus sombre + 0,05). Il est tronqué à deux décimales, jamais arrondi vers un succès.
- AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA exige 7:1 et 4,5:1.
- Les valeurs sont d’abord arrondies à des canaux 8 bits entiers, pour que chaque ligne décrive la même couleur hex. Une couleur OKLCH hors sRGB est ramenée à la couleur affichable la plus proche.
- La palette conserve la teinte et la chroma de la couleur de départ et liste les tons 0, 10, 20 … 90, 95, 99 et 100, comme Material 3.
- Les noms de couleur et les canaux alpha ne sont pas pris en charge.

## Quelles notations de couleur lit-il ?

Hex (#36c ou #3366cc) et les fonctions CSS rgb(), hsl(), hwb() et oklch(), avec des espaces ou des virgules entre les valeurs. Les noms de couleur et la transparence ne sont pas pris en charge. Le résultat donne la même couleur dans chaque notation, arrondie à des canaux sRGB entiers.

## Questions fréquentes

### Quel rapport de contraste exige WCAG ?

AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte et les éléments d’interface. AAA exige 7:1 et 4,5:1. Le rapport est tronqué, jamais arrondi vers le haut : 4,49 ne compte donc pas comme réussi.

### Qu’est-ce qu’OKLCH et pourquoi l’utiliser ?

OKLCH décrit une couleur par sa luminosité, sa chroma et sa teinte dans un espace où des écarts égaux paraissent égaux. C’est pratique pour construire des échelles et ajuster la luminosité sans que la teinte dérive.

### À quoi sert le mode palette ?

Il crée une palette tonale Material 3 : la teinte et la chroma de la couleur de départ en 13 tons, de 0 (noir) à 100 (blanc). La bibliothèque de couleurs derrière ne se charge que si vous choisissez ce mode.