Générateur de palettes

Comment utiliser Générateur de palettes

1. Choisissez une couleur de base.
2. Sélectionnez le type d'harmonie.
3. Copiez les valeurs à utiliser.

Les types d'harmonie

Ils reposent sur la position relative des couleurs sur le cercle chromatique.

La complémentaire offre le contraste le plus fort, et fatigue pour cette raison si les deux couleurs sont employées à parts égales. Elle fonctionne avec une proportion très inégale : l'une domine, l'autre n'apparaît qu'en détail.

L'analogue est la plus facile à réussir et la plus employée en interface, parce qu'elle ne concurrence pas le contenu.

La monochrome est sous-estimée. Une échelle d'une seule teinte avec un accent ponctuel suffit à la plupart des projets et se rate difficilement.

Combien de couleurs vraiment

Voici l'erreur la plus courante : générer dix couleurs et toutes les utiliser.

Une interface a besoin de moins de couleurs qu'on ne le croit. Une couleur de marque, une échelle de neutres, et trois couleurs sémantiques pour le succès, l'alerte et l'erreur.

L'échelle de neutres fait l'essentiel du travail : fonds, bordures, texte secondaire, séparateurs. Mieux vaut qu'ils ne soient pas des gris purs mais légèrement teintés vers la couleur de marque — cela se remarque à peine et donne l'impression d'un choix délibéré.

Les couleurs sémantiques ne doivent pas se confondre avec la couleur de marque. Si votre marque est verte et que le message de succès l'est aussi, le signal disparaît.

La proportion compte autant que la sélection. Une règle pratique consiste à consacrer environ soixante pour cent à un neutre dominant, trente à un secondaire et dix à l'accent.

Et n'encodez jamais une information par la seule couleur : environ une personne sur douze présente une déficience de la vision des couleurs. Doublez toujours la couleur d'une icône, d'un texte ou d'une forme.

De la palette au code

Une palette qu'on ne peut pas maintenir ne sert à rien.

Générez une échelle de clartés par couleur, pas une valeur unique. Cinq à sept paliers suffisent, et vous disposez alors de versions pour le fond, la bordure, le texte et l'état actif d'une même teinte.

Construisez cette échelle en OKLCH si possible : comme sa clarté correspond à la perception, les paliers sont visuellement réguliers, ce que HSL ne permet pas.

Enregistrez le tout en variables CSS nommées par leur rôle, et traitez le mode sombre en redéfinissant ces variables plutôt qu'en réécrivant les composants.

Vérifiez le contraste de chaque association texte/fond réellement utilisée. Une jolie palette qui échoue au niveau AA est à refaire, et mieux vaut s'en apercevoir avant de l'appliquer à cinquante écrans.

Enfin, regardez la palette sur un mauvais écran avant de la valider. Les nuances perceptibles sur un moniteur calibré disparaissent sur un portable bas de gamme en plein jour.

Questions fréquentes