Convertisseur de couleurs (HEX, RGB, HSL, CMJN, OKLCH)
Saisissez une couleur dans n’importe quel format — #hex, rgb(), hsl(), hwb(), oklch() ou un nom comme « tomato » — et obtenez instantanément toutes ses équivalences, son contraste WCAG sur blanc et noir et une gamme de teintes et d’ombres.
Traité à 100 % dans votre navigateur
Comment le vérifier ?
Vos fichiers ne sont jamais envoyés : ils sont traités sur votre appareil. Vérifiez par vous-même : chargez la page, coupez le Wi-Fi et l’outil continue de fonctionner. Ou ouvrez les outils de développement du navigateur (F12), onglet « Réseau » : aucun fichier ne quitte votre appareil.
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Saisissez ou collez une couleur dans n’importe quel format, ou choisissez-la avec le sélecteur.
- 2Consultez ses équivalences HEX, RGB, HSL, HSV, HWB, CMJN et OKLCH.
- 3Cliquez sur un format pour le copier dans le presse-papiers.
- 4Vérifiez le contraste WCAG et utilisez les teintes et ombres pour créer des variantes.
Cas d’usage
- Passer des couleurs de Figma ou Photoshop (HEX) au CSS moderne (OKLCH, HSL).
- Préparer des valeurs CMJN approximatives pour l’impression.
- Vérifier qu’une couleur de texte respecte l’accessibilité AA ou AAA.
- Trouver le nom CSS le plus proche d’une couleur.
Questions fréquentes
Quelle différence entre HEX, RGB et HSL ?
Ils décrivent la même couleur de façons différentes. HEX et RGB indiquent la quantité de rouge, vert et bleu (HEX en hexadécimal). HSL utilise teinte, saturation et luminosité, plus intuitif pour créer des variantes d’un ton.
Qu’est-ce que l’OKLCH et pourquoi l’utiliser ?
Un espace colorimétrique perceptuel pris en charge par les navigateurs modernes : deux couleurs de même « L » paraissent aussi claires, ce qui n’est pas le cas en HSL. Idéal pour des palettes et design systems cohérents.
La valeur CMJN est-elle exacte pour l’impression ?
C’est une conversion mathématique approximative. Le CMJN réel dépend du profil colorimétrique de l’imprimeur et du papier : validez les valeurs finales avec votre prestataire.
Que signifient AA et AAA pour le contraste ?
Ce sont des niveaux WCAG : AA exige un contraste minimal de 4,5:1 pour le texte normal (3:1 pour le grand texte) et AAA exige 7:1. Plus le rapport est élevé, plus le texte est lisible.