Design Snap
Une alternative à ColorZilla pour la palette d'un site entier
ColorZilla est une excellente pipette. Quand il vous faut plus qu'une couleur — toute la palette d'un site, classée par usage, avec les polices, radius et variables CSS qui vont avec — Design Snap est l'extension Chrome gratuite faite pour ça, avec export Tailwind, shadcn/ui, CSS et Figma.
Noté 5,0/5 sur le Chrome Web Store · lire les avis · Plan gratuit · Sans compte · Analyse 100 % locale
Comment récupérer toute la palette d'un site plutôt qu'une couleur
Pipetter les couleurs une à une suffit pour une valeur. Pour une palette, Design Snap lit toutes les couleurs calculées de la page et les classe en une seule passe.
-
Installer
Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.
-
Extraire
Ouvrez le site et cliquez sur Extraire. L'onglet Couleurs affiche chaque couleur avec son hex, classée par usage réel.
-
Exporter
Copiez un hex à l'unité, ou exportez la palette en config Tailwind, variables CSS, JSON ou tokens Figma.
Design Snap vs ColorZilla
Rédigé par le développeur de Design Snap — le biais est donc annoncé d'emblée. Les fonctionnalités reflètent les deux outils au moment de la rédaction (octobre 2026) ; quand ColorZilla est le meilleur outil, le tableau le dit.
| Fonctionnalité | Design Snap | ColorZilla |
|---|---|---|
| Pipette sur n'importe quel pixel | Non — lit le CSS, pas les pixels | Oui — sa fonction principale |
| Couleurs des images, canvas et vidéos | Non | Oui — basé sur les pixels |
| Générateur de dégradés CSS | Non | Oui |
| Palette de toute la page classée par usage réel | Oui — par fréquence dans les styles calculés | Partiel — analyseur de couleurs, sans classement par usage |
| Valeurs CSS exactes, sans dérive d'anticrénelage | Oui — styles calculés | L'échantillonnage de pixels peut dériver sur dégradés et bords lissés |
| Typographie, radius, ombres | Oui | Non |
Toutes les variables CSS de :root |
Oui | Non |
| Export Tailwind, CSS, JSON, Figma | Oui — gratuit | Non |
| shadcn/ui, Tailwind v4, Style Dictionary | Oui — PRO | Non |
| Audit de contraste WCAG de la page | Oui — score gratuit, rapport complet PRO | Non |
| Prix | Gratuit · PRO 4,99 € une fois | Gratuit |
Quand ColorZilla reste le bon outil
S'il vous faut la couleur d'un pixel précis — dans une photo, un canvas, une image de vidéo ou une icône lissée — utilisez ColorZilla. Sa pipette échantillonne ce qui est à l'écran, ce que Design Snap ne fait volontairement pas. Son générateur de dégradés est aussi un outil pratique.
Quand il vous faut Design Snap
Une pipette répond à « c'est quoi cette couleur ? ». La plupart du temps, la vraie question est « c'est quoi la palette de ce site ? ». Y répondre à la pipette, c'est des dizaines de clics, un fichier de notes, et aucune idée des couleurs qui comptent. Design Snap lit toutes les couleurs du CSS calculé, compte combien de fois chacune est utilisée, et place en tête la couleur principale, le fond et le texte de la marque.
Comme il lit le CSS et non les pixels, les valeurs sont exactes : pas de hex décalé à cause de l'anticrénelage, pas de couleur mélangée sur un bord de dégradé. Et la palette arrive avec le reste du système — typographie, radius, ombres, variables CSS — prête à coller en tailwind.config.js, thème shadcn/ui ou tokens Figma.
Utilisez les deux
Ils ne se gênent pas. Beaucoup de designers gardent ColorZilla pour pipetter des pixels et utilisent Design Snap quand ils veulent tout le design system d'un site en code.
D'un hex à toute une palette
Design Snap remplace la routine clic-et-note par une extraction et une palette classée.
- Toutes les couleurs de la page, classées par usage réel
- Valeurs hex exactes issues du CSS calculé
- Polices, radius, ombres et variables CSS inclus
- Export en un clic vers Tailwind, CSS, JSON ou Figma
- 100 % local — sans compte, sans pistage
Alternative à ColorZilla — FAQ
Ça dépend du besoin. Pour pipetter un pixel, ColorZilla reste difficile à battre. Pour extraire toute la palette d'un site classée par usage — avec polices, radius et variables CSS, et un export Tailwind ou Figma — Design Snap est une alternative Chrome gratuite conçue pour ça.
Non. Design Snap lit les couleurs dans le CSS calculé de la page au lieu d'échantillonner des pixels : les valeurs sont exactes, mais il ne peut pas pipetter dans une image, un canvas ou une vidéo. Gardez une pipette pour ça.
Oui. Cliquez sur Extraire et l'onglet Couleurs liste chaque couleur de la page avec son hex, triée par fréquence d'utilisation.
Oui, Design Snap a un plan gratuit avec extraction de palette et exports Tailwind, CSS, JSON et Figma. PRO est un paiement unique de 4,99 € pour les exports avancés et le rapport de contraste complet.