# Extracteur de styles de conception web Capture une page publique et exporte les couleurs, la typographie, les espacements et les composants observés avec une image. > Page canonique: https://elysiatools.com/fr/tools/website-design-style-extractor - **Catégorie:** Design - **Mots-clés:** style de site, jetons de conception, CSS, typographie, palette de couleurs, capture d’écran ## Présentation Affiche une page publique dans Chromium sans IA. Choisissez ordinateur (1440 × 1000) ou mobile (390 × 844), une préférence claire ou sombre et une attente supplémentaire de 0–3000 ms. Le ZIP contient design.md, screenshot.png, tokens.json et tokens.css ; le Markdown intègre le PNG pour rester autonome. La capture couvre la fenêtre fixe. L’analyse examine au maximum 2000 éléments DOM et échantillonne jusqu’à 1000 éléments rendus visibles, y compris sous le premier écran, sans défilement automatique. Couleurs, piles de polices CSS, espacements, bordures, rayons, ombres, composants et propriétés personnalisées lisibles sont des observations, pas le système de conception d’origine. Les piles CSS ne prouvent pas la police réellement affichée. Les fréquences comptent les déclarations CSS échantillonnées, pas la surface peinte, le rôle des couleurs de marque ou la conformité d’accessibilité. Seules les URL publiques HTTP sur le port 80 et HTTPS sur le port 443 sont autorisées, sans identifiants. Limites par capture : 40 secondes, 30 Mio de trafic réseau et 200 requêtes, avec un maximum de 8 Mio par document HTML ; les ressources bloquées et les limites d’échantillonnage peuvent réduire la couverture. L’environnement isolé désactive les fenêtres contextuelles, l’envoi de formulaires, les téléchargements, les connexions WebSocket et les workers en arrière-plan ; le contenu qui en dépend peut différer de celui d’un navigateur normal. Aucune connexion, acceptation de cookies, résolution de CAPTCHA, interaction par clic ni inspection de cadres d’une autre origine. La démonstration intégrée utilise la véritable extraction Chromium hors ligne, avec tout le réseau bloqué. ## Entrées - **Source** (select) - **URL du site** (text) - **Fenêtre** (select) - **Thème de couleurs** (select) - **Format de sortie** (select) - **Attente supplémentaire (ms)** (number) ## Quand l'utiliser - Analyser la charte graphique et les jetons de style réels d'une page concurrente ou inspirante. - Auditer les variables CSS, polices et espacements déclarés sur son propre site en affichage mobile ou bureau. - Générer rapidement une archive de conception regroupant capture PNG, variables CSS et documentation Markdown autonome. ## Fonctionnement - Saisissez l'URL publique de la page ou sélectionnez la démonstration hors ligne intégrée. - Définissez le format d'affichage (ordinateur 1440 × 1000 ou mobile 390 × 844), le thème clair ou sombre, et le délai d'attente réseau supplémentaire. - L'environnement Chromium isolé charge la page, capture la zone visible et échantillonne les déclarations CSS observées. - Téléchargez le résultat sous la forme d'un document Markdown autonome ou d'une archive ZIP incluant `design.md`, `screenshot.png`, `tokens.json` et `tokens.css`. ## Cas d'usage - Rétro-ingénierie rapide de tokens de conception CSS pour intégrateurs et designers web. - Audit de cohérence des couleurs et tailles de polices entre versions bureau et mobile d'une landing page. - Archivage visuel et technique d'une interface utilisateur dans la documentation d'un projet. ## Questions fréquentes ### Quels fichiers contient l'archive ZIP générée ? L'archive ZIP comprend les fichiers `design.md`, `screenshot.png`, `tokens.json` et `tokens.css`. ### L'outil peut-il extraire les styles derrière une authentification ou un bandeau cookie ? Non, les pages nécessitant une connexion, un clic interactif, la résolution d'un CAPTCHA ou la validation d'un bandeau de cookies ne sont pas prises en charge. ### Quelles sont les limites techniques imposées par capture ? Chaque analyse est limitée à 40 secondes, 200 requêtes, 30 Mio de trafic réseau global, 8 Mio pour le document HTML, et inspecte au maximum 2000 éléments DOM. ### Les polices extraites correspondent-elles exactement aux polices rendues à l'écran ? Non, l'outil extrait les piles de polices CSS déclarées dans les règles d'échantillonnage, ce qui ne garantit pas la police effectivement restituée par l'appareil. ### L'outil prend-il en charge les protocoles locaux ou ports personnalisés ? Seules les adresses publiques utilisant les protocoles HTTP sur le port 80 et HTTPS sur le port 443 sans identifiants sont acceptées. ## Outils associés - [Convertisseur de couleur CMYK](https://elysiatools.com/fr/tools/cmyk-converter): Convertit les couleurs entre HEX, RGB, HSL et CMYK. - [Convertisseur d'espaces colorimetriques](https://elysiatools.com/fr/tools/color-space-converter): Convertit une couleur entre HEX, RGB, HSL, CIELAB et Display-P3 avec sortie CSS et verification de gamme. - [Visualiseur d’Easing et d’Animation CSS](https://elysiatools.com/fr/tools/css-easing-visualizer): Visualise une courbe d’easing cubic-bezier CSS, prévisualise sur position/opacité/échelle, choisit des préréglages et exporte le CSS - [Convertisseur de Couleur OKLCH](https://elysiatools.com/fr/tools/oklch-color-converter): Conversion bidirectionnelle entre HEX, RGB, HSL, OKLCH et Display-P3 selon CSS Color 4, avec lecture luminosité/chroma/teinte, vérification de gamut sRGB et Display-P3, et suggestion de rognure hors-gamut - [Verificateur de contraste de palette accessible](https://elysiatools.com/fr/tools/accessible-color-palette-contrast-checker): Controle les combinaisons de couleurs selon WCAG 2.1 AA et AAA avec suggestions dustement - [Convertisseur Adobe RGB vers HEX](https://elysiatools.com/fr/tools/adobe-rgb-to-hex-converter): Convertir les valeurs de couleur Adobe RGB en format HEX pour le design web - [Couleurs Analogues](https://elysiatools.com/fr/tools/color-analogous): Générer des schémas de couleurs analogues harmonieux avec des couleurs adjacentes sur la roue chromatique, créant des combinaisons unifiées et paisibles - [Complément de Couleur](https://elysiatools.com/fr/tools/color-complement): Trouver des couleurs complémentaires et créer des schémas harmonieux avec des relations triadiques, tétradriques et analogues ## Exemples - [Exemples Ant Design](https://elysiatools.com/fr/samples/ant-design): Exemples de composants Ant Design - Langage de conception UI de niveau entreprise et bibliothèque UI React avec riche ensemble de composants de haute qualité - [Échantillons d'Extracteur de Journal des Changements](https://elysiatools.com/fr/samples/changelog-extractor): Différents formats de journaux des changements pour tester les outils d'analyse et d'extraction - [Exemples d'Extracteur de Liens Markdown](https://elysiatools.com/fr/samples/markdown-with-links): Documents Markdown d'échantillon avec divers types de liens pour tester l'outil d'extraction de liens Markdown - [Exemples d'Extracteur de Numéros de Téléphone](https://elysiatools.com/fr/samples/phone-number-extractor): Collection de texte mixte contenant des numéros de téléphone de divers pays pour les tests d'extraction