Couleurs depuis une URL
Extracteur de couleurs de site web
L'Extracteur de couleurs de site web lit le HTML et le CSS d'un site à partir de son URL et renvoie la palette du site : la couleur de marque, les accents, les fonds, le texte et les bordures, avec la variable CSS et la part d'utilisation de chaque couleur.
- Gratuit, sans inscription
- Lit le vrai CSS et ses variables
- Rien n'est conservé
Site bloqué ? Collez son HTML ou son CSS
Comment fonctionne l'extracteur de couleurs de site web ?
L'extracteur de couleurs de site web télécharge une page et ses feuilles de style, lit chaque valeur de couleur du code et classe les couleurs selon l'endroit et la fréquence où la page les utilise.
Saisissez une adresse
Tapez un domaine comme example.com ou collez l'URL complète de n'importe quelle page publique. L'extracteur récupère la page et jusqu'à 25 de ses feuilles de style.
Les feuilles de style sont analysées
Chaque syntaxe de couleur est lue : hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() et les 148 couleurs nommées. Les variables CSS sont résolues en leurs valeurs.
Les couleurs reçoivent un rôle
La propriété CSS fixe le rôle de chaque couleur : fond, texte, bordure, remplissage ou ombre. Les règles qui ciblent des éléments de la page comptent trois fois.
Copiez la palette
La couleur de marque vient en tête, suivie des accents, des fonds et des couleurs de texte. Exportez la palette en CSS, Tailwind ou jetons de design.
Comment l'extracteur trouve-t-il la couleur de marque d'un site ?
La couleur de marque est la couleur saturée la plus utilisée sur les boutons, les liens ou les variables CSS nommées d'après la marque.
- Saturation. Seules les couleurs dont la chroma OKLCH atteint 0,05 ou plus sont retenues comme couleurs de marque ou d'accent. Les gris et les quasi-gris comptent comme neutres.
- Emplacement. Les couleurs des sélecteurs comme
.btn,button,aet.ctagagnent du poids. - Nommage. Les variables comme
--primary,--brandet--accentgagnent du poids. - theme-color. Une valeur
<meta name="theme-color">qui correspond à une couleur CSS ajoute un signal de marque fort.
| Rôle | Propriétés CSS |
|---|---|
| Fond | background, background-color, dégradés |
| Texte | color, text-decoration-color, caret-color |
| Bordure | border, outline, column-rule |
| Remplissage | fill, stroke, stop-color, accent-color |
| Ombre | box-shadow, text-shadow (listées, exclues de la palette principale) |
Comment sépare-t-il les couleurs utilisées du CSS inutilisé ?
L'extracteur donne trois fois plus de poids aux règles CSS dont les sélecteurs ciblent des éléments du HTML de la page. Les frameworks CSS contiennent de nombreuses couleurs qu'une page n'utilise jamais, et la correspondance des sélecteurs empêche ces couleurs de passer devant le vrai design.
- Les couleurs
:hoveret:focuscomptent pour moitié, car elles n'apparaissent que lors d'une interaction. - Les règles
@media printsont ignorées. - Les couleurs sous 35 % d'opacité sont ignorées en tant que superpositions et voiles.
- Les couleurs séparées par moins de ΔE_OK 0,02 fusionnent en un seul échantillon qui liste ses variantes.
L'extracteur trouve-t-il les couleurs du mode sombre ?
Oui. Les règles dans @media (prefers-color-scheme: dark) et les règles sous des sélecteurs comme .dark ou [data-theme="dark"] forment une palette distincte pour le mode sombre.
Les valeurs sombres des variables CSS remplacent les valeurs claires quand l'extracteur résout une règle sombre, donc la palette sombre montre les couleurs qu'un visiteur voit en mode sombre.
Quelles couleurs l'extracteur de site web ne peut-il pas lire ?
L'extracteur de site web lit le code envoyé par le serveur, donc trois types de couleurs restent hors de portée.
- Styles appliqués à l'exécution. Les bibliothèques CSS-in-JS injectent les styles après le chargement de la page dans un navigateur.
- Couleurs des images. Les couleurs des photos, des logos matriciels et des vidéos sont des pixels, pas du CSS. L'extracteur lit séparément les couleurs du logo et de l'icône du site.
- Sites protégés. Les sites derrière une protection anti-bots refusent les requêtes automatisées.
Dans ces cas, collez le HTML ou le CSS de la page dans la zone de code, ou faites une capture d'écran et déposez-la dans l'Extracteur de palette de couleurs. Le guide en anglais Comment trouver les couleurs d'un site web couvre aussi les méthodes avec les DevTools du navigateur.
Qui utilise un extracteur de couleurs de site web ?
Designers
Auditez les couleurs de marque actuelles d'un client avant une refonte, ou étudiez la palette d'un site de référence.
Développeurs
Récupérez les jetons de couleur et les noms de variables d'un site pour reconstruire un thème.
Responsables marketing
Alignez les pages d'atterrissage, les publicités et les e-mails sur les couleurs du site principal.
Experts en accessibilité
Testez les paires texte et fond du site selon les seuils de contraste WCAG dans l'onglet Contraste.
FAQ de l'extracteur de couleurs de site web
Pourquoi certaines couleurs du site manquent-elles ?
Les couleurs appliquées par JavaScript à l'exécution, les couleurs des images et les couleurs des pages protégées par une connexion n'apparaissent pas dans le HTML et le CSS envoyés par le serveur.
Puis-je extraire les couleurs d'un site qui bloque les bots ?
Oui, avec une solution de repli. Ouvrez le site dans votre navigateur et collez son HTML ou une feuille de style dans la zone de code, ou déposez une capture d'écran dans l'Extracteur de palette de couleurs.
L'extracteur enregistre-t-il les sites web que je vérifie ?
Non. Le serveur récupère la page et ses feuilles de style pour votre requête et n'en garde aucune copie. L'analyse des couleurs s'exécute dans votre navigateur.
Que signifie le pourcentage à côté d'une couleur ?
Le pourcentage est la part de la couleur dans l'utilisation CSS pondérée de la page. Il mesure la fréquence d'utilisation de la couleur dans le code, pas la surface d'écran qu'elle couvre.
Puis-je analyser une autre page que la page d'accueil ?
Oui. Saisissez l'URL complète de n'importe quelle page publique, par exemple example.com/pricing.