Travaillez avec #2D9EE0

Consultez les formats équivalents, le contraste du texte, les étapes de palette, les relations de teinte et le CSS prêt à copier pour toute couleur sRGB opaque saisie en HEX, RGB, HSL, HWB ou avec un mot-clé CSS.

Formats de couleur équivalents

Ces notations sRGB sont calculées à partir de la même valeur HEX normalisée à six chiffres.

Contraste du texte noir et blanc

Comparez les rapports de luminance relative WCAG avant de choisir le texte. Atteindre un seuil ne remplace pas la vérification de l’interface complète.

Premier plan recommandé: #000000 · 7,08:1

Texte blanc2,97:1

AA texte normal: Non conforme
AA grand texte: Non conforme
AAA texte normal: Non conforme
AAA grand texte: Non conforme

Texte noir7,08:1

AA texte normal: Conforme
AA grand texte: Conforme
AAA texte normal: Conforme
AAA grand texte: Conforme

Poursuivre dans le laboratoire de contrasteComparer #2D9EE0 à une autre couleurOuvrez le vérificateur WCAG complet avec cette couleur et le premier plan noir ou blanc offrant le meilleur contraste déjà renseignés.

Teintes et ombres calculées

Utilisez ces mélanges sRGB reproductibles comme points de départ, puis vérifiez-les dans le contexte réel de votre interface.

Teintes

Ombres

Points de départ sur le cercle chromatique

Ces variantes font pivoter la teinte HSL tout en conservant saturation et luminosité. Ce sont des options mathématiques, pas des recommandations automatiques de design.

CSS prêt à copier

Commencez par des propriétés personnalisées pour la couleur normalisée et le premier plan noir ou blanc offrant le meilleur contraste.

--color-hex-2d9ee0: #2D9EE0;
--color-hex-2d9ee0-rgb: 45 158 224;
--color-hex-2d9ee0-hsl: 202 74% 53%;
color: #000000;
background-color: var(--color-hex-2d9ee0);