Couleurs et accessibilité
Partez d’un code HEX, comparez les harmonies et vérifiez le contraste du texte blanc sur chaque couleur.
Les calculs restent dans cet onglet; aucune couleur n’est envoyée.
5 couleurs visibles sur 5
Vous avez choisi le bleu de votre marque, mais pas encore les couleurs des fonds, des liens et des accents. Un générateur de palettes de couleurs permet de conserver ce point de départ pendant que l’on examine plusieurs relations sur le cercle chromatique. Ce générateur de palette de couleurs propose des combinaisons reproductibles; il ne décide pas à votre place de ce qui convient à l’identité de la marque.
Le générateur de palettes de couleurs réunit aussi les étapes qui suivent le choix initial : un nuancier de couleurs à neuf niveaux, un mélange dosé avec une seconde teinte et un rapport de contraste des couleurs pour du texte blanc. Après le filtrage, les variables CSS reprennent les couleurs encore visibles, les neuf niveaux et le mélange.
Une harmonie de teintes et un rapport de lisibilité ne répondent pas à la même question.
À partir du même HEX, passez des teintes voisines de l’analogue à l’opposé complémentaire ou aux trois pôles de la triade. Le générateur de palettes de couleurs ne remplace pas votre bleu de marque par un tirage aléatoire. Les neuf niveaux clairs et foncés restent eux aussi attachés à cette base.
Le rapport réel du texte blanc apparaît sur chaque échantillon. Le filtre à 4,5:1 retire de la palette visible et du CSS les candidats qui échouent pour le texte courant. Une couleur harmonieusement placée sur le cercle peut tout de même offrir un mauvais contraste.
Entrez un HEX à trois ou six chiffres, ou utilisez le sélecteur natif. L’exemple commence à #3B82F6; le résultat se recalcule après une courte pause. Pour modifier plusieurs options sans recalcul intermédiaire, désactivez l’automatisme puis utilisez Ctrl ou Cmd avec Entrée.
L’harmonie analogue est présélectionnée comme point de départ calme. Les autres règles changent les angles sur le cercle et parfois le nombre d’échantillons. Le mélange est une opération distincte entre deux HEX : il démarre à 50 % et le choix RVB ou TSL modifie parfois la couleur médiane.
Regardez le rapport du texte blanc et le nombre de couleurs encore visibles. Activer le filtre AA peut donner zéro candidat, sans modifier les codes d’origine. Copiez un HEX particulier ou exportez la palette affichée, les neuf nuances et le mélange en variables CSS.
Analogue, complémentaire, triadique, complémentaire divisée, tétradique et monochrome dérivent de la même base. L’harmonie des couleurs change; le HEX choisi au départ demeure.
Quatre mélanges vers le blanc, la base intacte et quatre mélanges vers le noir fournissent des pistes pour fonds, bordures, survols et texte. Ces niveaux utilisent un calcul RVB, pas une échelle perceptive garantie.
Le curseur de 0 à 100 % règle la part de la seconde teinte. En RVB, les canaux sont interpolés; en TSL, la teinte suit l’arc le plus court. Le code HEX obtenu décrit un écran, pas un mélange de pigments.
La luminance relative des valeurs sRGB finales donne le rapport affiché. Le seuil AA de 4,5:1 concerne le texte courant blanc sur un fond uni; les échantillons écartés restent consultables lorsque le filtre est désactivé.
Copiez ou téléchargez un bloc :root contenant la palette visible, tous les niveaux du nuancier et le mélange. Une couleur masquée par le filtre ne se retrouve pas silencieusement dans le CSS.
Les règles produisent ici de deux à cinq couleurs principales selon la géométrie choisie. Les neuf niveaux clairs et foncés sont une série distincte, destinée à varier les surfaces et les états sans multiplier les teintes de base.
L’analogue part de teintes voisines et constitue un début discret; la monochromie garde une seule teinte. Une complémentaire apporte un accent plus tranché. Le choix dépend de votre interface, puis le contraste du texte doit être vérifié séparément.
Le générateur ne fixe pas de pourcentage de surface pour chaque couleur. Commencez par une base dominante et réservez les accents à quelques éléments, puis testez les proportions dans une vraie page plutôt que sur les seuls échantillons.
Non. Un statut signalé seulement par rouge ou vert reste ambigu pour certaines personnes. Ajoutez aussi un libellé, une icône ou une forme; le filtre de contraste de cette page ne vérifie pas cette distinction.
Non. Le filtre ne vérifie que le rapport entre du texte blanc et des fonds unis pour le seuil AA du texte courant. Il ne certifie ni les autres couleurs de texte, ni les images, ni une interface entière.
Une question reste ouverte ?
Le générateur de palettes de couleurs vous laisse comparer une règle, vérifier le blanc et reprendre exactement les variables CSS choisies.