Générateur de palette HEX
Partez d’une couleur HEX et générez une palette complète avec gamme tonale, couleurs harmonieuses, jetons sémantiques et variables CSS prêtes à copier.
Préréglages
Couleur de base (HEX)
#2563EB
Couleurs harmonieuses
Principale
Couleur principale de la marque et des CTA
#2563EBSecondaire
Couleur secondaire de la marque
#6C59D5Accent
Éléments à fort contraste
#E3AA2DArrière-plan
Couleur de fond de la page
#F7F7F8Surface
Fond des cartes et conteneurs
#E8E9EETexte
Couleur par défaut du texte
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}Comment créer un système de couleurs complet à partir d'un seul code HEX
Cet outil transforme une couleur de base HEX en une palette structurée en temps réel. Vous pouvez saisir manuellement une valeur HEX, choisir dans le sélecteur de couleur ou générer une couleur aléatoire pour explorer de nouvelles directions. Instantanément, vous verrez un aperçu complet de la palette avec des couleurs d'harmonie, des échelles tonales, des jetons sémantiques et des variables CSS prêtes à copier.
Étape 1 : Entrez ou sélectionnez une couleur de base
Saisissez directement un code de couleur HEX, choisissez une couleur dans le sélecteur ou cliquez sur « Couleur aléatoire » pour en générer une automatiquement.
Étape 2 : Afficher la présentation de la palette
Visualisez votre couleur de base ainsi que les couleurs harmonieuses générées automatiquement qui complètent et étendent votre design.
Étape 3 : Explorez l'échelle tonale et les jetons sémantiques
Passez en revue l'échelle tonale (50 à 900) avec des nuances claires à foncées idéales pour les arrière-plans, les bordures, les états et le contraste du texte. Des jetons sémantiques sont également générés pour une utilisation pratique de l'interface utilisateur.
Étape 4 : Copiez les variables ou les jetons CSS
Copiez les variables CSS ou les rôles sémantiques générés en un clic et collez-les directement dans votre feuille de style.
Palettes de couleurs structurées pour de vrais projets
Ce générateur de palette de couleurs HEX va au-delà des échantillons de base. Il crée des palettes structurées et prêtes pour le système qui peuvent être utilisées immédiatement dans les interfaces de produits, les systèmes de conception et les flux de travail de personnalisation.
Génération de couleurs basée sur l'harmonie
Générez automatiquement des couleurs d'harmonie complémentaires qui maintiennent l'équilibre visuel et le contraste.
Échelle tonale (50-900)
Nuances claires à foncées optimisées pour les calques de l'interface utilisateur, les états, les arrière-plans et le contraste du texte lisible.
Jetons sémantiques pour la cohérence de l'interface utilisateur
Les rôles prédéfinis aident à maintenir une utilisation cohérente entre les actions principales, les états de réussite, les avertissements et les éléments neutres.
Variables CSS prêtes à être copiées
Exportez l'intégralité de votre palette sous forme de variables CSS en un seul clic, prête à être implémentée dans votre feuille de style.