Comment générer une palette de couleurs pour votre design

La couleur est l'une des premières choses que les gens remarquent sur un site, une application ou un design. Une palette bien choisie crée un look cohérent et professionnel. Une mal choisie donne l'impression que même un bon contenu cloche, et les problèmes d'accessibilité peuvent silencieusement exclure des millions d'utilisateurs. Vous n'avez pas besoin d'être designer pour choisir de bonnes couleurs. La théorie des couleurs vous donne des formules fiables, et les outils qui combinent ces formules avec des vérifications d'accessibilité font d'une palette utilisable un travail de cinq minutes.

Une brève histoire de la théorie des couleurs

Isaac Newton a construit le premier cercle chromatique vers 1666, en cartographiant le spectre visible dans un cercle en repliant l'arc-en-ciel linéaire sur lui-même. Johann Wolfgang von Goethe a élargi l'idée en 1810 avec sa Théorie des couleurs, en se concentrant sur ce que ressentent les couleurs plutôt que sur leur composition physique. Albert Munsell l'a systématisé en 1905 en séparant la teinte, la valeur et le chroma, donnant aux designers un vocabulaire pour "rouge plus foncé" vs "rouge plus saturé".

Le 20e siècle a ajouté les espaces colorimétriques perceptuels. CIE Lab (1976) a été le premier à faire de "distance numérique égale = différence perçue égale" un véritable objectif. HSL et HSV (1978) ont donné aux programmeurs des abstractions plus simples. Le design web moderne s'est tourné vers OKLCH (2020) et OKLAB, des espaces colorimétriques perceptuellement uniformes qui font enfin que "luminosité 50 %" paraît vraiment 50 % lumineux, quelle que soit la teinte. La progression compte parce qu'elle permet aux générateurs de palettes de produire des nuances qui paraissent cohérentes entre les couleurs, pas seulement reliées numériquement.

Modes d'harmonie chromatique

Les modes d'harmonie reposent sur les relations entre les couleurs sur le cercle chromatique. Chacun crée une ambiance différente :

Complémentaires, deux couleurs directement opposées (par exemple bleu et orange, rouge et vert). Fort contraste, énergique. Bon pour les éléments d'appel à l'action qui doivent se démarquer, mais à utiliser avec parcimonie car la tension peut paraître forte.

Analogues, trois couleurs côte à côte sur le cercle (par exemple bleu, bleu-vert, vert). Harmonieux et apaisant. Bon pour les fonds, les designs sur le thème de la nature et les palettes où tout doit sembler lié.

Triadiques, trois couleurs uniformément espacées autour du cercle (par exemple rouge, jaune, bleu). Vibrant et équilibré. Bon pour des designs ludiques, créatifs ou pour enfants.

Complémentaires divisées : une couleur plus les deux couleurs adjacentes à son complément. Contraste similaire au complémentaire mais avec moins de tension ; souvent plus utilisable en interface.

Tétradiques (ou rectangle) : quatre couleurs disposées en deux paires complémentaires. Riche et varié, mais difficile à équilibrer ; généralement une couleur domine et les autres servent d'accents.

Carré : quatre couleurs uniformément espacées autour du cercle. Variété maximale, accent égal. Difficile à bien utiliser à moins que trois des quatre ne soient gardées comme petits accents.

Monochromatique : différentes nuances, teintes et tons d'une seule couleur. Toujours harmonieux, sophistiqué, mais peut manquer d'intérêt visuel s'il est trop utilisé. Excellent pour les mises en page éditoriales et les systèmes de marque minimalistes.

Achromatique : noir, blanc et gris seulement. Le look journal classique ou magazine à fort contraste. Souvent associé à un seul accent lumineux.

Comment générer une palette

1. Choisissez un mode d'harmonie : sélectionnez Aléatoire, Analogue, Complémentaire, Triadique, Complémentaire divisé, Tétradique ou Monochromatique pour définir les relations entre les couleurs.
2. Choisissez une couleur de départ : entrez une couleur de marque, prenez une couleur dans une image de référence, ou laissez le générateur en choisir une.
3. Verrouillez les couleurs que vous aimez : quand vous trouvez une couleur à garder, verrouillez-la et régénérez les autres jusqu'à ce que la palette entière fonctionne.
4. Ajustez luminosité et saturation : la plupart des générateurs vous laissent affiner indépendamment la luminosité et la saturation de chaque couleur pour s'assurer que la palette a assez de variation de luminosité pour le travail UI.
5. Lancez un contrôle d'accessibilité : vérifiez que les combinaisons texte sur fond atteignent les contrastes WCAG AA (4,5:1) ou AAA (7:1).
6. Exportez, copiez les codes HEX, les variables CSS, la config Tailwind, les nuanciers ASE, ou enregistrez la palette en image pour des outils de design comme Figma, Sketch ou Canva.

Construire une palette utilisable

Une palette, c'est plus qu'un ensemble de jolies couleurs. Pour un vrai projet, vous avez généralement besoin de :

Un schéma moderne courant est une échelle de luminosité à 10 paliers (50, 100, 200, ..., 900) pour chaque couleur, offrant assez de nuance pour boutons, états de survol, états désactivés et équivalents en mode sombre, sans bricolage manuel.

Espaces colorimétriques et leur effet sur les palettes

L'espace dans lequel vous générez façonne la relation entre les couleurs. Les outils modernes vous laissent changer.

Pour la plupart du travail web en 2024, générez en OKLCH et exportez en HEX pour la compatibilité. CSS accepte désormais oklch() nativement dans les navigateurs modernes, donc vous pouvez aussi garder les valeurs OKLCH directement dans votre feuille de style pour une manipulation des couleurs plus riche.

Accessibilité, pas seulement esthétique

Une palette superbe est inutile si une partie de votre audience ne peut pas la lire. Trois contrôles transforment une jolie palette en palette inclusive.

Les ratios de contraste WCAG mesurent à quel point le texte se distingue de son fond. Les seuils standards :

Simulation du daltonisme : 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs, le plus souvent rouge-vert. Passez votre palette dans un simulateur (deutéranopie, protanopie, tritanopie) pour vous assurer que l'information n'est pas véhiculée par la couleur seule.

APCA (Advanced Perceptual Contrast Algorithm) est le remplaçant candidat du contraste WCAG dans WCAG 3.0. Il modélise mieux la perception que l'ancienne formule et compte pour le texte sur des fonds subtilement différents ; utilisez-le comme second avis aux côtés de WCAG 2.x.

Conseils pour de meilleurs résultats

• Commencez par une couleur, choisissez une couleur primaire qui vous plaît, puis utilisez un mode d'harmonie pour trouver des couleurs qui la complètent. C'est plus facile que d'essayer d'en choisir 5 indépendamment.
• Testez sur du vrai contenu, une palette qui rend bien en nuanciers peut ne pas fonctionner appliquée à du vrai texte, des boutons et des fonds. Testez toujours avec de l'UI réelle.
• Générez des échelles de luminosité, plutôt que choisir un seul "bleu", générez une échelle de 10 paliers du très clair au très foncé. Utilisez les paliers clairs pour les fonds, les foncés pour le texte et les intermédiaires pour les accents.
• Moins, c'est plus, un design à 3 couleurs bien choisies paraît plus professionnel qu'un à 7. Utilisez des neutres pour l'essentiel de l'interface et réservez les couleurs vives à ce qui compte.
• Inspirez-vous de la photo, pipettez des couleurs sur une photo de référence pour avoir des palettes ancrées dans le réel. Coolors, Color Hunt et les extracteurs de photo dédiés font ça en un clic.
• Pensez au mode sombre, générez ensemble les variantes claires et sombres. Une primaire qui fonctionne sur blanc peut briller désagréablement sur noir ; OKLCH permet d'ajuster juste la luminosité sans déplacer la teinte.
• Documentez le pourquoi, notez pourquoi chaque couleur est là (alignement de marque, contrainte d'accessibilité, ambiance). Le vous du futur remerciera le vous du présent.

Pièges courants

• Choisir des couleurs en HSL puis les rendre en HSL, des valeurs de luminosité égales en HSL paraissent inégales parce que l'espace ne correspond pas à la perception humaine. Le jaune à 50 % de luminosité paraît bien plus lumineux que le bleu à 50 %. Passez à OKLCH pour des nuances uniformes.
• Se reposer uniquement sur la roue chromatique, la roue est un point de départ, pas une garantie. Vérifiez toujours le contraste avec du vrai texte avant de valider.
• Ignorer la signification culturelle, le rouge signale la chance en Chine et l'alerte en Occident. Le blanc signifie la pureté en Occident et le deuil dans certaines parties d'Asie. Si vous livrez à l'international, faites de la recherche locale.
• Trop de nuances de gris, quatre ou cinq paliers neutres couvrent généralement tout, du texte aux bordures subtiles. Douze déroutent tout le monde, y compris vous plus tard.
• Noir pur sur blanc pur, le contraste extrême peut fatiguer les yeux. Utilisez un quasi-noir (#1A1A1A) sur un quasi-blanc (#FAFAFA) pour la lecture longue.
• Combinaisons non testées, une couleur qui passe le contraste contre le fond ne passe pas automatiquement contre toutes les autres surfaces. Testez chaque appariement que votre design produit réellement.
• Un seul accent par page, un accent fort qui attire l'œil, c'est bien. Deux accents qui se disputent l'attention, c'est mauvais. Choisissez l'appel à l'action le plus important.
• Couleurs de marque qui échouent à l'accessibilité, le logo d'entreprise peut utiliser un appariement à faible contraste pour des raisons émotionnelles ; le site web ne peut pas. Générez des variantes accessibles pour l'UI et réservez l'appariement de marque au logo.
• Oublier les liens et les états visités, les deux doivent être distinguables du corps de texte et l'un de l'autre. Testez les trois.
• Laisser le générateur choisir les couleurs sémantiques, les couleurs succès/avertissement/erreur ont des attentes culturelles et d'accessibilité. Choisissez-les par convention (vert/ambre/rouge) et vérifiez qu'elles paraissent bonnes contre votre palette.

Outils et approches alternatifs

Pour du travail de marque soigné, combinez un générateur de palette avec un vérificateur de contraste et un simulateur de daltonisme. Les outils qui font les trois en un seul endroit font gagner le plus de temps.

Vie privée et le générateur de palette

Le générateur de palette tourne entièrement dans votre navigateur. Toute image source que vous téléversez pour l'extraction de couleur est lue avec l'API FileReader, échantillonnée sur un canvas hors écran, et écartée une fois les couleurs extraites. Rien n'est téléversé, rien n'est journalisé, et la palette que vous construisez n'est pas associée à vous. Pour du travail de marque non annoncé, des images de moodboard fuitées ou des photographies clients, ce flux uniquement local garde tout sur votre machine où il doit être. Pour une tâche aussi routinière que choisir des couleurs, le réglage de vie privée par défaut devrait être : rien ne quitte la page, rien n'est stocké, rien n'est partagé.