Color Palette analyse chaque élément d'une page web et extrait l'ensemble complet des couleurs utilisées — du texte et des arrière-plans jusqu'aux bordures, ombres et accents. Les couleurs sont affichées sous forme de color swatches visuels triés par fréquence (les plus utilisées en premier), chacun indiquant sa valeur HEX et son nombre d'utilisations. Cliquez sur un swatch pour le copier, ou exportez toute la palette sous forme de liste de codes couleur.
Tout site web bien conçu possède une palette de couleurs cohérente — généralement 3 à 8 couleurs primaires plus quelques neutres. Color Palette extrait cette palette automatiquement en analysant les valeurs calculées de color, background-color, border-color et box-shadow de chaque élément. Le résultat est un ensemble trié par fréquence de toutes les couleurs de la page, vous donnant une vue complète du système de couleurs du site. Les couleurs dominantes (couleur principale de la marque, couleur d'arrière-plan, couleur du texte) apparaissent en premier avec un nombre d'utilisations élevé. Les couleurs d'accent et les valeurs ponctuelles apparaissent plus bas. C'est un outil précieux pour la recherche en design — visitez n'importe quel site web et extrayez sa palette exacte en quelques secondes. C'est aussi utile pour auditer votre propre site : y a-t-il des couleurs parasites qui n'appartiennent pas à votre système de design ? Utilisez-vous 5 nuances de gris légèrement différentes alors que la spécification de design n'en définit que 3 ? Color Palette rend l'ensemble de l'utilisation des couleurs visible et quantifiable.
Analyse chaque élément visible de la page et extrait les couleurs depuis les propriétés calculées : color, background-color, border-color, couleur de box-shadow, outline-color et text-decoration-color. Toutes les couleurs utilisées sur la page sont capturées.
Les couleurs sont triées par nombre d'utilisations — la couleur la plus utilisée apparaît en premier. Les couleurs de marque dominantes et les arrière-plans remontent en haut, tandis que les couleurs d'accent ponctuelles apparaissent en dernier. Identifiez instantanément les couleurs primaires, secondaires et d'accent de la page.
Chaque couleur est rendue sous forme d'un grand swatch visuel avec son code HEX et son nombre d'utilisations affichés en dessous. Les swatches sont suffisamment grands pour distinguer les différences de nuances subtiles (comme #333 vs #2a2a2a).
Cliquez sur n'importe quel color swatch pour copier immédiatement sa valeur HEX dans votre presse-papiers. Inutile d'ouvrir un panneau de couleurs ou une boîte de dialogue secondaire — un clic, copié, terminé.
Cliquez sur « Tout exporter » pour copier la palette entière sous forme de liste formatée de codes couleur HEX. Collez dans un outil de design, un fichier de variables CSS ou une documentation de couleurs. La liste conserve l'ordre de tri par fréquence.
Les couleurs sont normalisées (les représentations rgb et hex d'une même couleur sont fusionnées) et dédupliquées. La palette affiche uniquement les couleurs uniques, avec les comptes d'utilisation combinés pour les représentations dupliquées.
Visitez des sites web aux belles palettes de couleurs et extrayez leur palette exacte. Utilisez les couleurs comme point de départ pour votre propre design — ou documentez simplement quelles combinaisons de couleurs fonctionnent bien ensemble.
Exécutez Color Palette sur votre propre site pour vérifier la cohérence des couleurs de marque. Y a-t-il 4 bleus légèrement différents là où il ne devrait y en avoir qu'un ? Des couleurs hors charte s'introduisent-elles ? Le tri par fréquence rend les incohérences évidentes.
Exportez la palette et convertissez-la en propriétés CSS personnalisées (--color-primary, --color-secondary, etc.). Le résultat trié par fréquence vous indique quelles couleurs méritent les rôles primaire, secondaire et accent.
Extrayez les palettes de couleurs des sites concurrents pour comprendre leur positionnement de marque. Couleurs chaudes vs couleurs froides, fort contraste vs tons atténués — la palette révèle des choix de design intentionnels.
Visualisez toutes les couleurs de texte aux côtés des couleurs d'arrière-plan. Certaines combinaisons texte-arrière-plan ont-elles un contraste trop faible ? La palette vous fournit l'ensemble complet des couleurs à vérifier selon les exigences de contraste WCAG.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Color Palette. L'outil analyse chaque élément de la page et extrait toutes les valeurs de couleur.
Une grille de color swatches apparaît, triée par fréquence d'utilisation. Les couleurs les plus utilisées sont en haut. Chaque swatch affiche le code HEX et le nombre d'éléments utilisant cette couleur.
Cliquez sur un swatch pour copier sa valeur HEX dans votre presse-papiers. Une brève confirmation apparaît.
Cliquez sur « Tout exporter » pour copier toutes les couleurs sous forme de liste formatée. Collez dans votre fichier de variables CSS, votre outil de design ou votre documentation.
Naviguez vers différentes pages du même site et extrayez des palettes pour vérifier la cohérence des couleurs sur l'ensemble du site.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
