Générateur de palette de couleurs
Générez des palettes de couleurs – des schémas harmonieux avec des codes hexadécimaux copiables.
Comment utiliser Générateur de palette de couleurs
- Générez des palettes jusqu'à ce qu'une palette corresponde à l'ambiance — ou des graines à partir de la couleur de votre marque si vous en avez une.
- Attribuez des rôles : dominant neutre, secondaire, accent — la répartition 60-30-10.
- Copiez les codes hexadécimaux dans les variables CSS ou les styles de votre outil de conception.
- Vérifiez le contraste sur chaque paire texte/arrière-plan avant de vous engager — 4,5:1 minimum.
Qu'est-ce que Générateur de palette de couleurs ?
Un générateur de palette de couleurs produit des ensembles de couleurs qui fonctionnent ensemble (des paires complémentaires, des tracés analogues, des nuances d'une base) avec des codes hexadécimaux prêts à être copiés dans CSS ou dans un outil de conception. Il automatise l'étape de théorie des couleurs : les couleurs s'harmonisent selon leurs relations sur la roue chromatique, et les palettes générées encodent ces relations au lieu d'espérer.
Le problème pratique qu'il résout : choisir une belle couleur est facile ; en choisir cinq qui vont ensemble est une compétence de conception que la plupart des projets n'ont pas sous la main. Une palette générée commence à être cohérente : c'est la différence entre une interface utilisateur qui semble thématique et une autre qui semble assemblée.
À propos de Générateur de palette de couleurs
Générez des palettes et copiez les codes hexadécimaux qui correspondent à votre projet — en tant que schéma complet ou point de départ que vous ajustez.
Transformer une palette en un système utilisable : appliquez la règle 60-30-10 (neutre dominant ~ 60 % de l'interface utilisateur, secondaire ~ 30 %, accent ~ 10 % – l'accent est constitué de vos boutons et de vos surlignages, pas de vos arrière-plans) ; dériver des couleurs fonctionnelles à partir de la température de la palette (vert de réussite, ambre d'avertissement, rouge de danger qui correspondent à la saturation du schéma) ; et générez des teintes/nuances de chaque couleur pour les états de survol, les bordures et le mode sombre plutôt que d'introduire de nouvelles teintes.
Les deux vérifications avant l'expédition : contraste – les paires texte sur arrière-plan nécessitent le rapport WCAG de 4,5 : 1 (une belle palette qui échoue au contraste est une refonte en attente) ; et le contexte - les couleurs changent perceptuellement sur différents arrière-plans, alors écoutez la palette sur le blanc, le foncé et ses propres couleurs. Associez-le à notre convertisseur de couleurs pour les changements de format (hex↔RGB↔HSL) lorsque les valeurs se déplacent entre les outils.