Palette der Seite
Mit den Farben sortiert danach, wie oft sie vorkommen: Hintergründe, Texte, Rahmen und Buttons. Jede in HEX, RGB und HSL.
Farbe
Extrahieren Sie die Farbpalette jeder Website
Smart Design Inspector liest die Farbpalette einer Website nach Häufigkeit sortiert aus – mit Pipette für jedes Pixel und dem WCAG-Kontrast jedes Text-Hintergrund-Paars.
Palette, Pipette und WCAG-Kontrast: für immer kostenlos
Farben · ihrkunde.example
- #FFFFFFrgb 255 255 255Hintergrund214
- #0B0B0Brgb 11 11 11Text188
- #2563EBrgb 37 99 235Buttons46
- #E5E7EBrgb 229 231 235Rahmen39
- #6B7280rgb 107 114 128Text27
- #16A34Argb 22 163 74Akzent8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Nur großer Text
- Aa#9CA3AF / #FFFFFF2,54:1Nicht erfüllt
01
Was Sie bekommen
3 WerkzeugePipette
Um die Farbe jedes beliebigen Punkts aufzunehmen, auch in Bildern.
WCAG-Kontrast
Für jeden Text mit seinem Hintergrund, mit der erreichten Stufe (AA oder AAA) und einem Hinweis bei allen, die sie nicht erreichen.
Die meistgenutzte Pipette für Chrome wird seit Mai 2024 nicht mehr aktualisiert. Diese hier steckt zusammen mit Schriften, CSS und SEO in derselben Erweiterung.
02
Probieren Sie es auf dieser Seite
Ohne InstallationEine Beispiel-Website und das Farben-Panel, ohne etwas zu installieren. Sie sehen ihre Palette in HEX, RGB und HSL. Fahren Sie mit der Maus über einen Text oder wählen Sie ihn in der Liste: Sie sehen seinen Kontrast zum Hintergrund und die erreichte WCAG-Stufe.
Element wählen
Smart Design Inspector · Farbenh1.hero-title
- Text
- —
- Hintergrund
- —
- RGB
- —
- HSL
- —
- Kontrast
- —
- Größe
- —
- AA
- —
- AAA
- —
Palette der Seite
—
Beispiel-Website · die Werte werden von dieser Seite gelesen
03
Warum Kontrast wichtig ist
WCAG 2.2 · AAHellgrauer Text auf Weiß kann auf Ihrem Bildschirm gut aussehen und auf dem Smartphone in der Sonne unlesbar sein. Die WCAG-Richtlinien verlangen für normalen Text einen Kontrast von mindestens 4,5:1 (Stufe AA). Die Erweiterung markiert jeden Text, der das nicht erreicht.
04
Nehmen Sie die Palette in Ihr Projekt mit
Pro · VorabzugangMit Pro exportieren Sie die Farben zusammen mit Typografie und Abständen nach Tailwind v4 @theme, in CSS-Variablen oder DESIGN_SPECS.md. Designsystem extrahieren
| Kostenlos0 €für immer | Pro49 €Einmalzahlung | |
|---|---|---|
| Palette der Seite nach Häufigkeit sortiert, in HEX, RGB und HSL | ||
| Pipette für jeden beliebigen Punkt, auch in Bildern | ||
| WCAG-Kontrast jedes Text-Hintergrund-Paars | ||
| Die Palette als CSS-Variablen oder Tailwind-Tokens exportieren (mit Typografie und Abständen) | — | Vorabzugang kostenlos |
Ist es kostenlos?
Ja. Palette, Pipette und WCAG-Kontrast sind für immer kostenlos.
Liest es die Farben aus Bildern aus?
Die Palette nutzt die Farben aus dem CSS der Seite. Für die Farbe eines Bildes gibt es die Pipette.
In welchen Formaten kopiert es die Farben?
HEX, RGB und HSL. Mit Pro zusätzlich als CSS-Variablen oder Tailwind-Tokens.
Welchen Kontrast brauche ich?
Für normalen Text 4,5:1 (AA). Für großen Text 3:1. Für AAA 7:1 bzw. 4,5:1.
In welchen Browsern und auf welchen Systemen läuft sie?
In Chrome, Edge, Brave, Arc, Opera und Vivaldi, unter Windows, Mac und Linux, ab Version 1.0. Sie läuft überall gleich, weil der Browser die Erweiterung ausführt, nicht das Betriebssystem. Der Code ist so vorbereitet, dass sie ohne Neuschreiben auf Firefox und Safari kommen kann. Während der Entwicklung kann sich noch etwas ändern.
07
Weiter mit
Verwandte FunktionenSchriften
Familie, Stärken, Herkunft, Lizenz und Schriftskala der ganzen Seite.
Schriften einer Website →Designsystem
Farben, Abstände und Typografie nach Tailwind v4 @theme, in CSS-Variablen oder DESIGN_SPECS.md.
Designsystem extrahieren →Websites vergleichen
Speichern Sie den Steckbrief jedes Wettbewerbers und vergleichen Sie sie in einer exportierbaren Tabelle.
Websites vergleichen →Warteliste
Gehören Sie zu den Ersten, die es testen
Smart Design Inspector ist in Entwicklung. Hinterlassen Sie Ihre E-Mail-Adresse, und wir benachrichtigen Sie am Tag der Veröffentlichung im Chrome Web Store – mit den 7 Pro-Funktionen kostenlos im Vorabzugang.
Eine E-Mail am Starttag und nur wenige weitere · Abmeldung mit einem Klick