Visualiseur de palettes de couleurs
Voyez une palette ou une couleur de marque sur un site web complet, avec de vraies polices, des contrôles de contraste en direct et les modes clair et sombre.
Comment prévisualiser des couleurs sur une vraie interface
- Partez d’une palette, par exemple en l’ouvrant depuis le générateur, ou passez à Depuis une couleur de marque et choisissez une seule couleur.
- Choisissez un modèle d’aperçu : page d’accueil, tableau de bord, appli mobile ou article, et basculez entre les modes clair et sombre.
- Cliquez sur un rôle, comme l’arrière-plan ou la couleur principale, pour lui donner une autre couleur de la palette, ou appuyez sur Mélanger les rôles pour essayer une autre répartition. Choisissez un duo de polices, ou mélangez les polices.
- Consultez la liste de contraste en direct et appliquez Corriger à toute paire non conforme, puis copiez les rôles en variables CSS, en tokens Tailwind v4 ou shadcn/ui, ou copiez le lien pour partager l’aperçu.
Ce que vous pouvez faire
Quatre modèles d’aperçu
Voyez vos couleurs sur une page d’accueil, un tableau de bord, un écran d’appli mobile et une mise en page d’article.
Attribution des rôles
Décidez quelle couleur de la palette sert d’arrière-plan, de texte, d’action principale et des autres rôles de l’interface, et annulez n’importe quel changement.
De vraies polices
Associez une police de titres et une police de texte parmi une liste intégrée et voyez-les dans l’aperçu, avec une échelle typographique.
Contrôles de contraste en direct
Les principales paires texte et arrière-plan sont vérifiées pendant que vous modifiez, avec une correction en un clic pour les paires non conformes.
Modes clair et sombre
Basculez tout l’aperçu entre clair et sombre pour voir les deux versions de vos couleurs.
Exporter et partager
Copiez les rôles en variables CSS, en tokens Tailwind v4 ou shadcn/ui, ou copiez un lien qui ouvre le même aperçu.
Questions fréquentes
Comment prévisualiser une palette de couleurs sur un site web ?
Ouvrez le visualiseur avec votre palette, choisissez un modèle comme une page d’accueil ou un tableau de bord, et voyez les couleurs appliquées à une mise en page complète. Basculez entre les modes clair et sombre et changez le rôle joué par chaque couleur.
Pourquoi prévisualiser une palette sur une vraie mise en page ?
Les nuanciers cachent les problèmes. Sur une page, vous voyez comment une couleur se comporte comme bouton, lien, texte courant ou fond de carte, et si le texte posé dessus reste lisible.
Puis-je utiliser ma propre couleur de marque au lieu d’une palette ?
Oui. Choisissez Depuis une couleur de marque, saisissez un code hex, et le visualiseur déduit les rôles de l’interface à partir de cette seule couleur.
Le visualiseur vérifie-t-il l’accessibilité ?
Oui. Il liste le contraste des principales paires texte et arrière-plan, signale celles qui échouent et propose Corriger, qui ajuste la couleur pour cette paire.
Comment exporter les couleurs ?
Utilisez la section Partager et exporter pour copier les rôles en variables CSS, en thème Tailwind v4 ou en tokens shadcn/ui, ou copiez le lien vers l’aperçu.