Outil gratuit, sans inscription

Extraire la palette de couleurs de n’importe quel site

Collez une URL pour obtenir les couleurs de marque, de texte, de fond et d’accent du site avec leurs codes hex, classées par usage. Gratuit, sans inscription. Voyez des exemples complets avec le DESIGN.md de Stripe et le DESIGN.md de Linear, ou découvrez ce qu’un DESIGN.md apporte en plus.

Essayez

Utiliser cette palette dans votre code

L’extracteur regroupe les couleurs par rôle (fond, surface, texte, marque, accent et bordure) et les classe selon la part de la page que chacune couvre. Pour les réutiliser, donnez un nom à chaque rôle au lieu de coller des codes hex dans tous vos styles : un seul changement met alors à jour chaque endroit où la couleur apparaît.

1. Nommez les couleurs par rôle, pas par teinte. --color-text-muted garde son sens après une refonte ; --gray-600 ne dit pas où il s’applique. Remplacez par les codes hex que vous avez copiés.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. Utilisez-les dans Tailwind. Chaque variable devient un ensemble d’utilitaires comme bg-surface, text-ink-muted et border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Vérifiez les paires que vous utilisez. Le texte courant a besoin d’un rapport de contraste d’au moins 4.5:1 avec son fond, et les grands textes de 3:1. L’extracteur affiche le rapport de la couleur de texte principale sur le fond de la page ; vérifiez toute autre paire que vous comptez utiliser avant de la mettre en production.

Les couleurs ne sont qu’une couche d’un design system. Un DESIGN.md les range à côté de l’échelle typographique, des espacements et des règles de composants, pour que votre agent de code utilise la bonne couleur au bon endroit.

FAQ

Questions sur la palette de couleurs

Des réponses courtes sur l’outil gratuit Extracteur de palette de couleurs de site web.

La page est chargée dans un vrai navigateur et les couleurs qu’elle affiche sont mesurées selon la part de la page qu’elles couvrent. Chaque couleur reçoit le rôle le plus probable : fond, panneau, texte, marque, accent ou bordure.

La palette liste les couleurs que la page utilise réellement, classées par couverture et limitées à douze. Les couleurs à l’intérieur des images ou des vidéos, celles qui n’apparaissent qu’au survol et celles utilisées sur d’autres pages du site ne sont pas comptées.

Non. Il lit la page dans le thème qu’un nouveau visiteur voit par défaut, généralement clair. Les sites sombres par défaut ressortent sombres. Un DESIGN.md complet couvre le mode sombre quand le site en a un.

Pas sous forme de fichier. Vous pouvez copier les codes hex : sélectionnez une pastille pour en copier un, ou copiez-les tous d’un coup, un par ligne.

Oui, un pixel à la fois. Dans Chrome ou Edge, faites un clic droit sur un élément, choisissez Inspecter et cliquez sur le carré de couleur à côté de n’importe quelle couleur dans le volet Styles ; son sélecteur dispose d’une pipette qui lit n’importe quel point de la page. Firefox propose la même pipette dans la barre d’outils de l’Inspecteur.

Cet outil ne liste que les couleurs. Un DESIGN.md couvre les couleurs avec leurs rôles, l’échelle typographique, les espacements et les règles de composants d’un site, dans un seul fichier que votre agent de code peut suivre.

Autres outils gratuits

Voir tous les outils gratuits

Besoin du design system complet ?

Obtenez un DESIGN.md avec les couleurs, l’échelle typographique, les espacements et les composants de n’importe quel site, prêt pour votre agent de code.

Obtenir un DESIGN.md