Couleur
Convertissez une couleur entre HEX, RGB, HSL, HSV et OKLCH : saisissez-la dans le format de votre choix ou choisissez-la avec le sélecteur.
#6155f5
Exemple de texte lisible sur cette couleur.
Contraste 5,08:1 — AA
Contraste 4,12:1 — AA grand texte uniquement
Saisissez une couleur dans n’importe quel champ : #abc, rgb(97 85 245), hsl(245 89% 65%), oklch(55% 0.2 280) ou un nom comme red. Les autres champs se mettent à jour.
Le convertisseur de couleurs transforme une couleur entre les formats HEX, RGB, HSL, HSV et OKLCH. Choisissez-la avec le sélecteur ou saisissez-la dans n’importe quel champ, avec la syntaxe CSS de votre choix : les autres formats se mettent à jour et chacun se copie en un clic. Un aperçu indique aussi le contraste de la couleur avec du texte blanc et avec du texte noir. Tout est calculé dans votre navigateur : aucune couleur n’est envoyée à un serveur.
Un code HEX #rrggbb regroupe trois valeurs hexadécimales : rouge, vert et bleu, de 00 à ff. Par exemple, #6155f5 correspond à rgb(97 85 245), car 61 en hexadécimal vaut 97, 55 vaut 85 et f5 vaut 245. Saisissez le code dans le champ HEX : les champs RGB, HSL, HSV et OKLCH se mettent à jour.
Le HEX à 3 ou 6 chiffres (avec ou sans #), rgb(), hsl(), hsv() et oklch(), écrits avec des virgules ou des espaces, en nombres ou en pourcentages, avec des angles en deg, rad, grad ou turn, ainsi que les 16 noms de couleurs CSS de base (red, navy, teal…). La casse n’a pas d’importance. La transparence (alpha) n’est pas prise en charge.
L’OKLCH est la forme cylindrique de l’espace OKLab, conçu pour que la luminosité (L), la saturation (chroma, C) et la teinte en degrés (H) se comportent de façon plus régulière pour l’œil que dans HSL. Il s’écrit oklch(55% 0.2 280) en CSS depuis la spécification CSS Color 4.
Certaines couleurs OKLCH très saturées ne peuvent pas être affichées par un écran sRGB. L’outil réduit alors la chroma, en gardant la luminosité et la teinte, jusqu’à la couleur affichable la plus proche, et vous le signale par un message.
Non. Les conversions se font localement dans votre navigateur et rien n’est transmis ni conservé.
Les ratios de contraste WCAG expliqués : 4,5:1, 3:1 et 7:1, grand texte, erreurs fréquentes (gris clair, texte sur image) et comment corriger une couleur.
Ce que représentent HEX, RGB et HSL, comment convertir une couleur de l’un à l’autre, pourquoi HSL aide pour les variantes et quel format choisir selon l’usage.
Construire une palette pour un site : base, harmonies, règle 60-30-10, nuances de 50 à 950, couleurs d’état, contrastes et export en CSS ou en Tailwind v4.
Relevez une couleur dans une image et obtenez sa palette dominante.
Compressez, redimensionnez et convertissez vos images JPEG, PNG, WebP.
Créez harmonies et nuances 50 à 950, exportables en CSS ou Tailwind.
Générez des QR codes. Sans paywall, sans pub, sans suivi.