Palette de la page
Avec les couleurs triées selon leur fréquence d’utilisation : fonds, textes, bordures et boutons. Chacune en HEX, RGB et HSL.
Couleur
Extrayez la palette de couleurs de n’importe quel site
Smart Design Inspector extrait la palette de couleurs d’un site web triée par usage, avec une pipette pour n’importe quel pixel et le contraste WCAG de chaque paire texte/fond.
Palette, pipette et contraste WCAG : gratuit pour toujours
Couleurs · votreclient.example
- #FFFFFFrgb 255 255 255Fond214
- #0B0B0Brgb 11 11 11Texte188
- #2563EBrgb 37 99 235Boutons46
- #E5E7EBrgb 229 231 235Bordures39
- #6B7280rgb 107 114 128Texte27
- #16A34Argb 22 163 74Accent8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Grand texte uniquement
- Aa#9CA3AF / #FFFFFF2,54:1Insuffisant
01
Ce que vous obtenez
3 outilsPipette
Pour prélever la couleur de n’importe quel point, y compris dans les images.
Contraste WCAG
De chaque texte avec son fond, avec le niveau atteint (AA ou AAA) et une alerte pour ceux qui sont insuffisants.
La pipette la plus utilisée de Chrome n’est plus mise à jour depuis mai 2024. Celle-ci est réunie avec les polices, le CSS et le SEO dans la même extension.
02
Essayez-le sur cette page
Sans installationUn site web d’exemple et le panneau des couleurs, sans rien installer. Vous voyez sa palette en HEX, RGB et HSL. Survolez un texte, ou choisissez-le dans la liste, et voyez son contraste avec le fond et le niveau WCAG atteint.
Choisissez un élément
Smart Design Inspector · Couleursh1.hero-title
- Texte
- —
- Fond
- —
- RGB
- —
- HSL
- —
- Contraste
- —
- Taille
- —
- AA
- —
- AAA
- —
Palette de la page
—
Site d’exemple · les valeurs sont lues sur cette page
03
Pourquoi le contraste compte
WCAG 2.2 · AAUn texte gris clair sur fond blanc peut sembler lisible sur votre écran et devenir illisible sur un mobile en plein soleil. Les règles WCAG exigent un contraste minimal de 4,5:1 pour le texte normal (niveau AA). L’extension signale chaque texte insuffisant.
04
Emportez la palette dans votre projet
Pro · accès anticipéAvec la version Pro, vous exportez les couleurs avec la typographie et les espacements vers Tailwind v4 @theme, des variables CSS ou DESIGN_SPECS.md. Extraire le design system
| Gratuit0 €pour toujours | Pro49 €paiement unique | |
|---|---|---|
| Palette de la page triée par usage, en HEX, RGB et HSL | ||
| Pipette pour n’importe quel point, y compris dans les images | ||
| Contraste WCAG de chaque paire texte/fond | ||
| Exporter la palette en variables CSS ou en tokens Tailwind (avec la typographie et les espacements) | — | Accès anticipé gratuit |
Est-ce gratuit ?
Oui. La palette, la pipette et le contraste WCAG sont gratuits pour toujours.
Récupère-t-il les couleurs des images ?
La palette utilise les couleurs du CSS de la page. Pour prélever la couleur d’une image, il y a la pipette.
Dans quels formats copie-t-il les couleurs ?
HEX, RGB et HSL. Avec la version Pro, également en variables CSS ou en tokens Tailwind.
De quel niveau de contraste ai-je besoin ?
Pour le texte normal, 4,5:1 (AA). Pour le grand texte, 3:1. Pour AAA, 7:1 et 4,5:1.
Sur quels navigateurs et systèmes fonctionne-t-elle ?
Sur Chrome, Edge, Brave, Arc, Opera et Vivaldi, sous Windows, Mac et Linux, dès la 1.0. Elle fonctionne partout de la même façon, car c’est le navigateur qui exécute l’extension, pas le système. Le code est prêt à être porté sur Firefox et Safari sans réécriture. Pendant le développement, des changements sont possibles.
07
Continuer avec
Fonctions prochesPolices
Famille, graisses, origine, licence et échelle typographique de toute la page.
Polices d’un site web →Design system
Couleurs, espacements et typographie vers Tailwind v4 @theme, des variables CSS ou DESIGN_SPECS.md.
Extraire le design system →Comparer des sites web
Enregistrez la fiche de chaque concurrent et comparez-les dans un tableau exportable.
Comparer des sites web →Liste d’attente
Soyez parmi les premiers à l’essayer
Smart Design Inspector est en cours de développement. Laissez-nous votre e-mail et nous vous préviendrons le jour de sa sortie sur le Chrome Web Store, avec les 7 fonctions Pro gratuites en accès anticipé.
Un e-mail le jour du lancement et très peu d’autres · Désinscription en un clic