Utilisez le sélecteur de couleur ou collez n'importe quelle valeur HEX, RGB ou HSL pour obtenir tous les formats utiles en design et en code : HEX, RGB, HSL et OKLCH. Affichez une gamme de teintes et d'ombres, et vérifiez la lisibilité du texte blanc ou noir sur cette couleur.
Une couleur de marque doit remplir plusieurs rôles : ressortir sur les boutons, rester lisible derrière un texte blanc et ne pas fatiguer l'œil sur toute une page. Les bleus, verts moyens et rouges profonds y parviennent généralement. Les couleurs très claires (jaune, rose pastel) sont belles dans un logo mais font de mauvais boutons, car ni le texte blanc ni le noir ne s'y lisent bien sans ajustement.
Le panneau de contraste le montre immédiatement. Si le texte blanc obtient moins de 4.5:1, utilisez un texte noir ou choisissez une ombre plus foncée dans la gamme pour les boutons.
Les teintes mélangent votre couleur avec du blanc ; les ombres la mélangent avec du noir. Une palette de site pratique n'en demande que quelques-unes : une teinte très claire pour les fonds de section, la couleur principale pour les boutons et les liens, et une ombre plus foncée pour les survols. Ajoutez des gris neutres pour le texte et les bordures, et vous avez un ensemble complet et cohérent.
Pour vérifier une paire texte et fond précise (par exemple un texte gris sur un fond teinté), utilisez le vérificateur de contraste, qui note à la fois WCAG AA et AAA.
Un code à six caractères pour une couleur à l'écran, écrit # suivi de trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu. #FF0000 est le rouge pur ; #000000 le noir ; #FFFFFF le blanc.
Ils décrivent les mêmes couleurs de manières différentes. HEX et RGB donnent les quantités de rouge, de vert et de bleu. HSL donne la teinte (l'angle sur un cercle chromatique), la saturation et la luminosité, plus faciles à ajuster à la main.
L'OKLCH est un format de couleur CSS plus récent, fondé sur la façon dont les gens perçoivent la couleur. Deux couleurs avec la même valeur L paraissent aussi claires l'une que l'autre, ce qui facilite les palettes cohérentes. Tous les grands navigateurs actuels le prennent en charge.
Avec la formule WCAG 2 : la luminance relative de la couleur la plus claire plus 0.05, divisée par celle de la plus foncée plus 0.05. Pour vérifier une paire de deux couleurs, utilisez le vérificateur de contraste de We.Inc.
Voir aussi: Vérificateur de contraste, Outil d'association de polices, Générateur de favicon, Générateur de signature mail.
Commencer gratuitement, découvrez comment fonctionne le créateur de sites IA de We.Inc. L'offre gratuite vous donne jusqu'à 3 sites à partir de modèles sur une adresse we.inc, sans IA et sans nom de domaine personnalisé. La création par IA commence à $20 par mois.