Informatique · Couleurs

Générateur de palette de couleurs

Une couleur, une harmonie, la palette s’affiche aussitôt.

Seuil AA

4,5 sur 1

Rapport de contraste minimal du texte courant selon WCAG 2.

Seuil AAA

7 sur 1

Niveau renforcé, utile pour les textes longs et les lecteurs malvoyants.

Noir sur blanc

21 sur 1

Rapport maximal possible entre deux couleurs.

Comprendre le résultat

Harmonies de couleurs et contraste

Une harmonie est un ensemble de teintes liées par une relation géométrique sur le cercle chromatique. L’outil convertit votre couleur en HSL, décale la teinte selon l’harmonie choisie et garde la saturation et la luminosité, sans arrondir avant la fin du calcul. Les cinq harmonies se comparent d’un clic, sur la même couleur.

Complémentaire, analogue et triadique

La complémentaire se place à 180° de la couleur de base et donne l’opposition la plus forte. L’analogue prend les deux voisines à 30° de chaque côté, pour une palette douce et cohérente. La triadique répartit trois couleurs tous les 120° et donne un équilibre plus vif.

Tétradique et monochromatique

La tétradique place quatre couleurs tous les 90°. Elle est riche mais plus difficile à équilibrer, il vaut mieux y choisir une couleur dominante. La monochromatique garde la seule teinte de base et ne fait varier que la luminosité, ce qui donne une palette sobre et sûre.

HEX, RGB et HSL

Ces trois codes notent la même couleur. HEX et RGB donnent les doses de rouge, de vert et de bleu de l’écran. HSL isole la teinte, ce qui le rend plus pratique pour créer des variations. Chaque code se copie d’un clic.

Exemple

Le violet indigo #6366F1 (teinte 239°, saturation 84 %, luminosité 67 %) est la couleur proposée à l’ouverture. Sa complémentaire est le jaune #F1EE63, de teinte 59°. Ses analogues sont le bleu #63ADF1 et le violet #A763F1, sa triadique ajoute le rouge #F16366 et le vert #66F163.

Côté lisibilité, #6366F1 sur fond blanc atteint 4,46 sur 1, juste sous le seuil de 4,5 du niveau AA, alors que sur fond noir il atteint 4,70 sur 1 et passe en AA. Le jaune #F1EE63 n’atteint que 1,22 sur 1 sur fond blanc mais 17,15 sur 1 sur fond noir. Une harmonie fixe les teintes, pas la lisibilité.

Choisir et vérifier une palette

Pour un site ou une interface, partez d’une couleur principale, choisissez l’harmonie qui correspond à l’effet voulu, puis contrôlez le contraste de chaque couleur avant de l’employer pour du texte. L’export en variables CSS reprend la palette telle qu’elle est affichée.

Pour travailler plus en détail la seule opposition de teintes, avec des versions claires et foncées, consultez le générateur de palettes complémentaires.

Questions fréquentes

Comment créer une palette de couleurs à partir d’une couleur ?

Saisissez le code HEX de votre couleur ou choisissez-la avec le sélecteur, puis sélectionnez une harmonie. L’outil décale la teinte de la couleur de base de 180°, de ±30°, de 120° ou de 90° selon l’harmonie, et garde la même saturation et la même luminosité. Une répartition courante consiste ensuite à employer 60 % de la couleur dominante, 30 % d’une couleur secondaire et 10 % d’une couleur d’accent.

Quelle harmonie choisir pour un site web ?

L’analogue et la monochromatique conviennent aux interfaces calmes, car les couleurs sont proches. La complémentaire sert à faire ressortir un bouton ou un lien sur un fond dominant. La triadique et la tétradique offrent plus de variété, à condition de laisser une couleur dominante et d’utiliser les autres en touches.

Comment vérifier le contraste d’une couleur avec WCAG ?

Le rapport de contraste compare la luminance de la couleur à celle du fond. Le niveau AA demande 4,5 sur 1 pour le texte courant et 3 sur 1 pour le grand texte, le niveau AAA demande 7 sur 1 pour le texte courant. Le gris #777777 atteint 4,47 sur 1 sur fond blanc, juste sous le seuil AA, alors que le noir sur blanc atteint 21 sur 1.

Quelle différence entre HEX, RGB et HSL ?

Ce sont trois écritures de la même couleur. Le violet #6366F1 s’écrit aussi rgb(99, 102, 241) ou hsl(239, 84%, 67%). HEX et RGB donnent les quantités de rouge, de vert et de bleu, HSL donne la teinte en degrés, la saturation et la luminosité en pourcentage.

Pourquoi mon gris ne donne-t-il qu’une seule couleur ?

Un gris, le noir et le blanc n’ont pas de saturation, donc pas de teinte à décaler. Les harmonies de teinte se réduisent alors à la couleur saisie, et l’outil le signale. La palette monochromatique reste utilisable, puisqu’elle ne fait varier que la luminosité.