Sélecteur et convertisseur de couleurs hexadécimales (RVB, HSL, HSV, CMJN, OKLCH)
Convertissez toute couleur en HEX, RGB, HSL, HSV, CMYK et OKLCH, vérifiez le contraste, copiez des échantillons d'harmonie et exportez CSS ou JSON, directement dans votre navigateur.
Saisissez hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() ou un nom de couleur CSS. Les valeurs invalides conservent la dernière conversion valide.
Nom CSS le plus proche: royalblue
Conversions
Sur fond blanc
3.68:1
Conforme WCAG AA (grand texte uniquement)
Sur fond noir
5.71:1
Conforme WCAG AA (texte normal)
Exporter des échantillons
Choisissez ou collez tout format de couleur, convertissez en HEX, RGB, HSL, HSV, CMYK et OKLCH, vérifiez le contraste WCAG, générez des échantillons d'harmonie, copiez les valeurs et exportez CSS ou JSON. Gratuit, rapide et entièrement dans votre navigateur.
Comment utiliser ce sélecteur de couleurs
Saisissez ou collez tout format de couleur pris en charge, ajustez l'opacité ou utilisez le sélecteur natif. La page convertit instantanément en HEX, RGB, HSL, HSV, CMYK et OKLCH, affiche le contraste WCAG sur blanc et noir, génère des échantillons d'harmonie et une bande de teinte/ombre, et garde tout prêt à copier. Partagez votre configuration via l'URL : l'état est stocké dans la chaîne de requête.
Référence HEX, RVB, HSL, HSV, CMJN et OKLCH
Hex est un encodage RVB compact. RVB décrit les canaux rouge/vert/bleu. HSL exprime la teinte, la saturation et la clarté ; HSV utilise la teinte, la saturation et la valeur (luminosité). CMJN modélise les pourcentages d'encre d'impression. OKLCH est un espace colorimétrique CSS perceptuellement uniforme. Cet outil utilise des calculs déterministes dans votre navigateur, sans téléchargement ni API externe.
Complémentaire, analogue, triadique, complémentaire divisé, tétradique et monochromatique
Le complémentaire fait pivoter la teinte de 180°. L'analogue avance la teinte par pas fixes autour de la base. Le triadique utilise des décalages de 120°. Le complémentaire divisé ajoute deux teintes proches du complément. Le tétradique utilise des décalages rectangulaires de 90°. Le monochromatique conserve la teinte et varie la clarté. Les contrôles de nombre s'appliquent aux modes analogue et monochromatique.
Variables CSS et export JSON
L'export produit des propriétés personnalisées :root avec des noms stables (par exemple --color-base, --color-analogous-1) et du JSON avec baseHex, alpha, namedColor, mode d'harmonie, ratios de contraste et listes d'échantillons pour scripts ou jetons de design.
Vérificateur de contraste WCAG
Le ratio de contraste est calculé à partir de la luminance relative selon WCAG 2.x. AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA exige 7:1. Utilisez les aperçus pour choisir les couleurs de texte ou d'interface sur fond clair ou foncé.
Foire aux questions
Quels formats de couleur puis-je saisir ?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() et tous les noms de couleurs CSS standard comme cornflowerblue ou rebeccapurple.
#ABC s'étend-il à six chiffres ?
Oui. L'hexadécimal à trois chiffres est développé par paire de chiffres, donc #ABC devient #AABBCC.
Que se passe-t-il si ma couleur est invalide ?
Vous voyez une erreur en ligne. La dernière couleur valide reste dans les lignes de conversion, le sélecteur et les exportations jusqu'à ce que vous saisissiez à nouveau une valeur valide.
Comment fonctionne le vérificateur de contraste WCAG ?
Il calcule le ratio de contraste entre votre couleur et le blanc ou le noir pur à l'aide de la luminance relative. Les résultats indiquent si la couleur respecte les seuils AA ou AAA pour le texte normal ou grand.
Comment sont calculées les couleurs d'harmonie ?
Elles sont déterministes : complémentaire est un décalage de teinte de 180° ; analogue utilise des pas de teinte fixes ; triadique des décalages de 120° ; complémentaire divisé des teintes proches du complément ; tétradique des décalages rectangulaires de 90° ; monochromatique varie la clarté en conservant teinte et saturation de la base.
Que contient l'export JSON ?
Clés stables : baseHex, alpha, namedColor, harmony, harmonyCount le cas échéant, harmonySwatches, tintShadeStrip, stripCount et ratios de contraste, adaptés à l'outillage ou à la documentation.
Puis-je partager mes couleurs ?
Oui. L'URL est mise à jour avec hex, alpha, mode d'harmonie, nombres et taille de bande afin que vous puissiez enregistrer ou partager une configuration exacte.