Convertisseur de couleurs

Convertisseur de couleurs entre codes HEX, RGB, HSL et OKLCH, avec le rapport de contraste WCAG de deux couleurs. Vérifiez l'accessibilité en choisissant votre palette, gratuit dans le navigateur.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Ajustement HSL

H217S91%L60%

Rapport de contraste (WCAG)

Couleur à comparer :

샘플 텍스트

Rapport de contraste : 3.68:1

WCAG: AA Large

Intégrer

<iframe src="https://devtools.patrache.studio/fr/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Convertisseur de couleurs — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/fr/converters/color-converter/">Convertisseur de couleurs</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Dernière mise à jour : 2026 · Outil en ligne gratuit

Qu'est-ce que Convertisseur de couleurs ?

Convertisseur de couleurs entre codes HEX, RGB, HSL et OKLCH, avec le rapport de contraste WCAG de deux couleurs. Vérifiez l'accessibilité en choisissant votre palette, gratuit dans le navigateur.

Comment utiliser

1
Entrer une couleur— Utilisez le sélecteur de couleurs ou la saisie de texte. Les formats HEX, rgb() et hsl() sont pris en charge.
2
Voir les formats— Les formats HEX, RGB, HSL et OKLCH sont affichés simultanément.
3
Copier les valeurs— Utilisez le bouton copier pour chaque format pour copier la valeur CSS.
4
Vérifier le ratio de contraste— Définissez une couleur de comparaison pour vérifier le ratio de contraste WCAG.

Outils associés

Générateur de dégradé CSSGénérateur visuel de dégradés CSS linéaires, radiaux et coniques : ajoutez des points de couleur, ajustez l'angle et copiez le CSS. Parfait pour arrière-plans et boutons, gratuit dans le navigateur.

Générateur CSS box-shadowGénérateur CSS box-shadow avec réglages de décalage, flou, étalement, couleur et inset, et aperçu en direct de l'ombre. Copiez le code box-shadow prêt à l'emploi, gratuit dans le navigateur.

Référence unités CSSRéférence des unités CSS px, em, rem, %, vw, vh, vmin, vmax et ch, classées par catégorie. Avec des explications claires sur chaque unité absolue et relative, gratuit dans le navigateur.

Convertisseur PX en REMConvertisseur PX vers REM qui traduit pixels et rem dans les deux sens selon une taille de police racine personnalisable, décimales comprises. Table de référence et snippet CSS copiables, gratuit.

Questions fréquentes

OKLCH est une représentation cylindrique de l'espace colorimétrique Oklab, l'espace le plus uniforme perceptuellement. Il est pris en charge dans CSS Color Level 4.

Il mesure la différence de luminosité entre le texte et les couleurs d'arrière-plan. AA exige au moins 4,5:1, AAA exige 7:1.

Actuellement, seules les couleurs opaques (RGB, HEX 6 chiffres) sont prises en charge. RGBA et HSLA seront ajoutés prochainement.

Oui. Vous pouvez coller le résultat de chaque format directement dans votre CSS.

Non. Toutes les conversions de couleurs se font dans votre navigateur.