Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 règles d'harmonie : générez des palettes en utilisant des échelles de nuances complémentaires, triadiques, analogues, complémentaires divisées, tétradiques, monochromatiques et de style Tailwind à partir de n'importe quelle couleur de graine.
- Mathématiques des couleurs précises : toutes les conversions utilisent des algorithmes RVB/HSL appropriés avec le calcul du rapport de contraste WCAG. Voir la luminance relative, les badges réussite/échec pour le texte blanc et noir sur chaque échantillon.
- Valeurs HEX, RVB et HSL : chaque échantillon affiche ses valeurs HEX, RVB et HSL. Cliquez sur n’importe quel échantillon pour copier instantanément le code HEX dans votre presse-papiers.
- Exporter au format CSS, SVG ou TXT : téléchargez votre palette sous forme de propriétés personnalisées CSS, de feuille d'échantillons SVG ou de liste HEX en texte brut. Parfait pour les systèmes de conception, les configurations Tailwind et la documentation.
Cas d'utilisation courants du générateur de palette de couleurs
- Conception et prototypage d'interface utilisateur : générez des palettes de couleurs harmonieuses pour les maquettes d'interface utilisateur de sites Web et d'applications. Utilisez les règles complémentaires et analogues pour créer des interfaces équilibrées avec une hiérarchie de couleurs appropriée.
- Tailwind CSS & Design Tokens : utilisez la règle Shades 50 → 900 pour générer des échelles de nuances complètes pour les couleurs de marque personnalisées. Exportez les variables CSS et insérez-les directement dans la configuration de votre système de conception.
- Création d'un système de conception : créez un système de couleurs cohérent pour vos jetons de conception. Générez des palettes tétradiques et triadiques qui fonctionnent ensemble, puis exportez-les en tant que propriétés personnalisées CSS pour la documentation de votre système de conception.
- Identité de marque et logos : lors de la construction d'une identité de marque, utilisez les règles de division-complémentaires ou analogues pour trouver des couleurs qui complètent la couleur principale de votre marque tout en conservant l'harmonie visuelle.
- Présentations et diapositives : créez des jeux de couleurs cohérents pour les présentations. Utilisez la règle monochromatique pour obtenir une gamme de teintes et de nuances qui maintiennent vos diapositives professionnelles et cohérentes.
- Visualisations de données et graphiques : générez des palettes de couleurs accessibles pour les graphiques et les infographies. Chaque échantillon comprend des badges de contraste WCAG afin que vous puissiez vérifier la lisibilité sur fond blanc et noir.
Foire aux questions
Le générateur de palette de couleurs prend en charge sept règles d'harmonie : complémentaire (couleurs opposées sur la roue - contraste élevé), triadique (trois couleurs régulièrement espacées - équilibrées), analogique (couleurs adjacentes - harmonieuses), fractionnée-complémentaire (couleur de base plus deux compléments proches), tétradique (quatre couleurs dans un rectangle - complexe), monochromatique (même teinte à différents niveaux de luminosité) et nuances 50 → 900 (échelle de nuances en dix étapes de style Tailwind).
Cliquez simplement sur n'importe quelle carte d'échantillon pour copier son code HEX dans votre presse-papiers. Une icône de coche apparaît brièvement pour confirmer la copie. Chaque échantillon affiche également les valeurs RVB et HSL afin que vous puissiez les utiliser dans n'importe quel outil de conception ou éditeur de code. Pour une exportation groupée, utilisez les options de téléchargement Variables CSS, SVG ou TXT dans la section Exporter.
Chaque échantillon montre deux badges : un pour le texte blanc (⬜) et un pour le texte noir (⬛). Les badges verts indiquent que la couleur répond aux exigences de contraste WCAG ; le rouge indique qu'il échoue. Les niveaux indiqués sont AA Large (3:1), AA (4,5:1) et AAA (7:1). Cela vous aide à évaluer rapidement si une couleur est lisible comme arrière-plan d'un texte.
Oui! Sélectionnez la règle d'harmonie "Shades 50 → 900" pour générer une échelle de nuances en dix étapes (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) - le même modèle utilisé par Tailwind CSS. La couleur de base devient la teinte 500, avec des variantes plus claires et plus foncées générées automatiquement. Exportez les variables CSS à utiliser directement dans votre tailwind.config.js.
Vous pouvez exporter votre palette dans trois formats : variables CSS (propriétés personnalisées telles que :root { ... }), feuille d'échantillons SVG (une grille visuelle d'échantillons de couleurs avec des étiquettes hexadécimales) et texte brut (liste de noms : paires hexadécimales). Utilisez le bouton Copier CSS ou les boutons Télécharger pour les fichiers CSS, SVG ou TXT.
Toutes les conversions de couleurs utilisent des algorithmes standard pour la conversion RVB↔HSL avec une représentation appropriée de la teinte (0-360°), de la saturation (0-100 %) et de la luminosité (0-100 %). Les rapports de contraste sont calculés à l'aide de la formule de luminance relative WCAG 2.1, qui prend en compte la correction gamma non linéaire des appareils d'affichage. Cela garantit des informations de couleur précises et fiables.
Oui, le générateur de palette de couleurs est entièrement gratuit et aucune inscription n'est requise. Il n'y a pas de frais cachés, pas de fonctionnalités premium et aucune limite sur le nombre de palettes que vous pouvez générer. Puisque tout s'exécute localement dans votre navigateur, il n'y a pas de coûts de serveur ni de limites d'API.
Après le chargement initial de la page, le générateur de palette de couleurs fonctionne entièrement hors ligne. Toutes les fonctions de calcul des couleurs, de rendu d'échantillons et d'exportation s'exécutent dans votre navigateur sans aucune requête du serveur. Cela en fait un outil fiable pour les concepteurs et les développeurs travaillant dans des environnements avec une connectivité Internet limitée ou inexistante.