Travaillez avec #663399

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 opaque saisie en HEX, RGB, HSL, HWB, OKLCH ou avec un mot-clé CSS.

Réglez OKLCH et contrôlez clairement son équivalent sRGB.

Modifiez la clarté perceptuelle, le chroma et la teinte. L’instrument distingue la valeur OKLCH d’origine de l’équivalent sRGB à six chiffres employé dans les autres calculs.

Dans l’espace sRGB Cette valeur ne nécessite aucune adaptation de gamut.

L Clarté C Chroma H Teinte

Formats de couleur équivalents

Ces notations CSS, dont l’OKLCH perceptuel, sont calculées à partir de la même valeur sRGB 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é: #FFFFFF · 8,41:1

Texte blanc8,41:1

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

Texte noir2,50:1

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

Poursuivre dans le laboratoire de contrasteComparer #663399 à 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-663399: #663399;
--color-hex-663399-rgb: 102 51 153;
--color-hex-663399-hsl: 270 50% 40%;
--color-hex-663399-oklch: oklch(44% 0.1603 303.37);
color: #FFFFFF;
background-color: var(--color-hex-663399);