Color Palette Generator
Generate color palettes
Generate color palettes S'exécute localement dans votre navigateur
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Le générateur de palette de couleurs prend une couleur de base et en dérive les schémas d'harmonie standard : complémentaire, analogue, triadique, complémentaire divisé et tétradique, plus une rampe de teintes vers le blanc et de nuances vers le noir. Les harmonies sont calculées en HSL en faisant pivoter la teinte tout en gardant la saturation et la luminosité, c'est pourquoi les résultats restent liés à votre base au lieu de dériver. La rampe est la partie dont la plupart des palettes ont réellement besoin, car une interface de travail nécessite plusieurs valeurs de la même teinte pour les états de survol, actif et désactivé, et pas seulement une couleur d'accentuation.
Where people use the
- Construire une palette autour d’une couleur de marque unique.
- Produire des variantes de survol, actives et désactivées à partir d'un seul accent.
- Explorer des alternatives à une couleur qui a échoué à une vérification de contraste.
- Générer une rampe neutre pour les surfaces et les bordures.
How to use the
- 1
Choisissez une couleur de base
Entrez une valeur hexadécimale telle que 4ECDC4 ou utilisez le sélecteur. Tout le reste dérive de cette seule couleur.
- 2
Lire les schémas d'harmonie
Chaque schéma est une rotation de teinte différente. Le complémentaire est de 180 degrés, le triadique est de 120 et 240, et ainsi de suite.
- 3
Prenez la rampe de teinte et d'ombre
Cinq teintes vers le blanc et cinq nuances vers le noir vous donnent les états et élévations dont vous aurez besoin dans une véritable interface.
- 4
Copiez les valeurs
La liste complète des valeurs hexadécimales générées se trouve dans un seul bloc, prêt à être collé dans une feuille de style ou un fichier de jeton de conception.
- 5
Vérifiez le contraste avant l'expédition
Exécutez n’importe quelle paire de texte et d’arrière-plan de la palette via le vérificateur de contraste. Harmonieux n’est pas la même chose que lisible.
Conseils et bonnes pratiques
- Choisissez la couleur de base de la marque, puis ajustez la luminosité uniquement pour les états.
- Réservez la couleur complémentaire pour l’action que vous souhaitez remarquer.
- Exécutez toujours l’appairage final en effectuant une vérification du contraste avant l’expédition.
Questions fréquemment posées
Quelle est la différence entre les régimes ?
Complémentaire utilise la teinte opposée, qui donne le contraste le plus fort et convient à un appel à l'action. Analogue utilise des voisins à 30 degrés de chaque côté, ce qui est calme et sûr. Triadique répartit uniformément trois teintes, ce qui est vif et plus difficile à contrôler. Split complémentaire adoucit le choc complémentaire en utilisant les deux teintes de chaque côté de l'opposé. Tetradic utilise quatre teintes à angle droit, ce qui convient aux tableaux de bord complexes.
Pourquoi les couleurs générées partagent-elles la même saturation et la même luminosité ?
Parce que la rotation uniquement de la teinte est ce qui les maintient clairement liés. Varier la luminosité produit en même temps des couleurs qui semblent sans rapport, ce qui va à l’encontre de l’intérêt d’une palette.
Les teintes sont-elles simplement la couleur mélangée au blanc ?
Effectivement oui, mais calculé en HSL en augmentant la luminosité tout en conservant la teinte et la saturation. Cela maintient la teinte stable, alors que le mélange naïf en RVB dérive vers le gris.
Combien de couleurs doit avoir une palette ?
Pour la plupart des interfaces, deux ou trois teintes plus une rampe neutre suffisent. Un schéma comportant cinq teintes saturées est difficile à utiliser de manière cohérente et finit généralement par paraître accidentel.
Vérifie-t-il l'accessibilité ?
Non, cela génère uniquement des couleurs. Utilisez le vérificateur de contraste sur toute association que vous souhaitez utiliser pour le texte.