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.