Couleurs

Extrayez la palette de couleurs de n'importe quel site

Design Snap est une extension Chrome gratuite qui extrait la palette de couleurs complète de n'importe quel site web — chaque couleur en swatch avec sa valeur hex, classée par fréquence d'apparition réelle sur la page. Copiez un hex à l'unité, ou exportez toute la palette vers Tailwind, variables CSS, JSON ou Figma en un clic.

Ajouter à Chrome — gratuit Voir les plans PRO

Plan gratuit · Sans compte · Analyse 100 % locale

Comment récupérer la palette de couleurs d'un site

Récupérer la palette de couleurs d'un site tient en trois étapes : installer Design Snap, appuyer sur Extract sur la page, et ouvrir l'onglet Colors. Chaque couleur est capturée depuis les styles calculés de la page — pas depuis une capture d'écran — donc les valeurs hex sont exactes, pas approximées au pixel.

  1. Installer

    Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.

  2. Extraire

    Ouvrez le site et appuyez sur Extract. L'onglet Colors affiche la palette classée par usage réel, avec les valeurs hex.

  3. Copier ou exporter

    Copiez chaque hex individuellement, ou exportez toute la palette en config Tailwind, variables CSS, JSON ou tokens Figma.

Des valeurs exactes, un ordre qui a du sens

Les pipettes échantillonnent des pixels — l'antialiasing et les dégradés faussent le résultat. Design Snap lit les styles calculés de la page : chaque hex est la valeur exacte utilisée par le CSS du site.

  • Couleurs classées par fréquence d'usage réelle sur la page
  • Valeurs hex exactes issues des computed styles, pas d'échantillonnage de pixels
  • Grille de swatches avec copie en un clic par couleur
  • Survolez n'importe quel élément avec l'inspecteur pour voir ses couleurs précises
  • 100 % local — les pages que vous visitez ne sont jamais transmises
stripe.com
Onglet Colors de Design Snap sur stripe.com : palette extraite en swatches avec valeurs hex, classée par usage, avec l'option Show all

Palette de couleurs — FAQ

Installez l'extension Chrome Design Snap, ouvrez le site et appuyez sur Extract. L'onglet Colors affiche chaque couleur utilisée sur la page sous forme de swatch avec sa valeur hex, classée par fréquence d'apparition réelle — la couleur primaire de la marque sort en premier, pas un gris de footer au hasard.

Une page peut contenir des dizaines de couleurs, mais seule une poignée définit son identité. Le classement par fréquence d'usage réelle place les couleurs primaires, de fond et de texte en tête, et repousse les couleurs décoratives ponctuelles — exactement ce qu'il faut pour réutiliser une palette de façon pertinente.

Oui. La palette extraite s'exporte en JSON Style Dictionary, variables CSS, objet colors de tailwind.config.js, ou tokens Figma (JSON Tokens Studio) — le tout gratuitement. PRO ajoute le mapping sémantique shadcn/ui et un bloc @theme Tailwind v4. Voir tous les formats d'export.

Générateur de thème Tailwind

Un tailwind.config.js ou un @theme Tailwind v4 prêt à coller depuis n'importe quel site.

Générateur de thème shadcn/ui

Mappez la palette d'un site sur les rôles sémantiques shadcn/ui, prêt pour globals.css.

Extraire les variables CSS

Listez toutes les custom properties déclarées sur :root de n'importe quel site.

vs DevTools & CSS Peeper

Comment Design Snap se compare aux DevTools de Chrome et à CSS Peeper.