Générateur de Palette de Couleurs
Générez des échelles de couleurs professionnelles pour les systèmes de design, Tailwind CSS et les tokens de design
Algorithme
Niveau de Contraste
Nombre de Nuances
À propos du Générateur de Palette de Couleurs
Qu'est-ce qu'un Générateur de Palette de Couleurs ?
Un générateur de palette de couleurs crée des échelles de couleurs professionnelles à partir d'une seule couleur de base. Il génère plusieurs nuances (typiquement 50-950) qui fonctionnent harmonieusement ensemble dans les systèmes de design, assurant la cohérence dans toute votre application.
Comment utiliser l'échelle 50-950 ?
L'échelle 50-950 fournit 11 nuances où 50 est la plus claire et 950 est la plus foncée. Typiquement, la nuance 500 ou 600 représente votre couleur de base. Utilisez des nuances plus claires (50-400) pour les arrière-plans et les éléments subtils, et des nuances plus foncées (600-950) pour le texte, les bordures et l'emphase.
Qu'est-ce que OKLCH ?
OKLCH est un espace colorimétrique moderne qui fournit des couleurs perceptuellement uniformes. Contrairement à HSL, OKLCH garantit que les couleurs avec la même valeur de luminosité apparaissent également lumineuses à l'œil humain, ce qui le rend idéal pour générer des palettes de couleurs accessibles et visuellement équilibrées.
Comment exporter pour Tailwind CSS ?
Utilisez l'option d'exportation "Tailwind CSS" pour obtenir une configuration prête à l'emploi. Copiez le code généré dans votre fichier tailwind.config.js sous theme.extend.colors. Pour Tailwind CSS v4, utilisez le format d'exportation "@theme" avec des variables CSS.
Comment utiliser les Variables CSS ?
Les Variables CSS (Custom Properties) vous permettent de définir des couleurs une fois et de les réutiliser dans toute votre feuille de style. Exportez en tant que "Variables CSS" et ajoutez le code généré à votre fichier CSS global. Ensuite, référencez les couleurs en utilisant var(--primary-500) dans vos styles.
Como gerar paleta para dark mode?
Para dark mode, escolha uma cor base mais escura ou use o algoritmo "Dark Mode Ready". Este algoritmo gera tons otimizados para fundos escuros, garantindo que os tons mais claros tenham contraste suficiente. Você também pode usar o Preview UI para testar sua paleta em modo escuro.
Qual a diferença entre OKLCH e HSL?
HSL (Hue, Saturation, Lightness) é um espaço de cores mais antigo onde cores com o mesmo valor de luminosidade podem parecer diferentes em brilho. OKLCH é perceptualmente uniforme, garantindo que cores com o mesmo valor de luminosidade apareçam igualmente brilhantes, resultando em paletas mais harmoniosas e acessíveis.
Como garantir acessibilidade nas cores?
Use a aba "Contraste" para verificar se suas combinações de cores atendem aos padrões WCAG AA (4.5:1) ou AAA (7:1). A ferramenta mostra automaticamente quais tons são seguros para texto branco ou preto, e fornece recomendações para garantir que seu design seja acessível para todos os usuários.
Quantos tons devo usar no meu design system?
A escala padrão de 11 tons (50-950) é ideal para a maioria dos design systems, oferecendo flexibilidade suficiente sem sobrecarregar. Para projetos menores, 9 tons podem ser suficientes. Para sistemas complexos com muitas variações, 11 tons fornecem granularidade adequada para todos os casos de uso.
Posso usar essas paletas comercialmente?
Sim! As paletas geradas são 100% livres para uso comercial e pessoal. Você tem total propriedade das cores geradas e pode usá-las em qualquer projeto, incluindo produtos comerciais, sites, aplicativos e materiais de marketing sem restrições.