Choisis des couleurs, crée des dégradés, vérifie le contraste, et génère du CSS ombre et arrondi — tout au même endroit. Rien n'est envoyé, tout se met à jour en direct pendant que tu tapes.
Clique sur la pastille pour choisir une couleur
HEX
RGB
HSL
Tape dans n'importe quel champ — HEX, RGB ou HSL — et les deux autres se mettent à jour automatiquement, avec la pastille.
Couleurs
Type
Angle 90°
Couleur du texte
Couleur de fond
Le renard brun rapide
saute par-dessus le chien paresseux — voici à quoi ressemble un texte de taille normale.
Ratio de contraste21:1
Texte normal — AA
Texte normal — AAA
Texte large — AA
Texte large — AAA
Les WCAG (Web Content Accessibility Guidelines) fixent des ratios de contraste minimum pour que le texte reste lisible aux personnes malvoyantes. AA est le niveau visé par la plupart des sites ; AAA est plus strict. Le "texte large" désigne une taille de 18pt ou plus (ou 14pt en gras).
Ombre Portée
Décalage X8px
Décalage Y8px
Flou24px
Étendue0px
Couleur de l'ombre
Opacité 20%
Rayon de Bordure
Tous les coins12px
À voir : dégradés CSS, convertisseur de couleurs, vérificateur de contraste et ombres dans un seul outil
Ce que tu peux faire avec ces outils CSS et couleur
Convertisseur de Couleurs — saisis une couleur en HEX, RGB ou HSL et les deux autres se mettent à jour aussitôt. Pratique quand un design te donne l'une et que ton code a besoin d'une autre.
Dégradé — choisis tes couleurs, prends Linéaire ou Radial, règle l'angle, puis clique sur Copier le CSS.
Vérificateur de Contraste — choisis une couleur de texte et une de fond pour voir si les personnes à la vue faible peuvent les lire (WCAG AA et AAA).
Ombre et Arrondi — ajuste le décalage, le flou et l'étendue pour créer un box-shadow, et arrondis les coins avec border-radius. Copie le CSS quand le résultat te plaît.
Les mots de la couleur expliqués
HEX — une couleur écrite avec # suivi de six lettres ou chiffres, par exemple #2563EB.
RGB — la même couleur en trois nombres : rouge, vert et bleu.
HSL — teinte, saturation et luminosité. C'est plus facile à ajuster à la main, par exemple pour éclaircir une couleur.
Contraste WCAG — une règle qui dit à quel point le texte et le fond doivent différer pour que le texte reste lisible. AA est le niveau visé par la plupart des sites, AAA est plus strict.
Bon à savoir avant de commencer
Les couleurs sont totalement opaques : pas de transparence (alpha) ni de codes hex à 8 chiffres.
Les valeurs HSL sont arrondies à des nombres entiers, une conversion en retour peut donc différer de 1 sur un canal de couleur.
Réussite ou échec du contraste utilise les couleurs exactes ; le rapport affiché est arrondi à deux décimales, 4,496 s'affiche donc 4.50:1 mais n'atteint pas 4,5.
Les dégradés acceptent jusqu'à 6 couleurs, régulièrement espacées, en angle linéaire ou en radial circulaire.
Questions fréquentes
Ces outils CSS sont-ils gratuits ?
Oui. Il n'y a pas de compte et rien à installer.
Mes données sont-elles envoyées quelque part ?
Non. Tout est calculé en direct dans ton navigateur.
Comment convertir du HEX en RGB ?
Saisis ou colle le code HEX dans le champ HEX du Convertisseur de Couleurs. Les valeurs RGB et HSL se remplissent automatiquement.
Quel ratio de contraste me faut-il ?
Pour du texte normal, vise au moins 4,5:1 (AA). Pour du grand texte, 3:1 suffit. Le niveau AAA, plus strict, demande 7:1 pour du texte normal.