Website-Farben auslesen: Hex-Code jedes Elements finden
Prüfe die Farben jeder Website direkt auf der Live-Seite. Zeig auf das Element, und im Bereich „Farben“ siehst du Text-, Hintergrund- und Rahmenfarben. Ein Klick kopiert den Hex-Code.
Aktualisiert am
Ag
- Ink
- Amber
- Paper
Du willst Website-Farben auslesen: die exakte Textfarbe oder Hintergrundfarbe eines Buttons oder einer Überschrift auf einer Live-Website. Du musst nicht anhand eines Screenshots raten. SuperchargeInspect ist ein Farb-Inspektor für Websites, der genau dafür gebaut ist. Zeig auf das Element, und der Bereich „Farben“ zeigt seine Text-, Hintergrund- und Rahmenfarbe. Ein Klick kopiert den Hex-Code in deine Zwischenablage.
Was der Bereich „Farben“ anzeigt
Im Bereich „Farben“ erscheinen die Farbkacheln des Elements, auf das du zeigst.
Text. Die Textfarbe des Elements, der color-Wert, mit dem der Browser es dargestellt hat.
Hintergrund. Die Hintergrundfarbe des Elements, der background-color-Wert.
Rahmen. Die Rahmenfarbe – wird nur angezeigt, wenn das Element tatsächlich einen Rahmen hat.
Jede Kachel kopiert beim Klick genau diesen einen Wert, sodass du CSS-Farbwerte einzeln kopieren und in dein eigenes Stylesheet einfügen kannst. Es handelt sich um die berechneten Farben dieses einzelnen Elements, nicht um die Farben der ganzen Seite.
Website-Farben auslesen: Hex, RGBA und transparent
Das Format einer kopierten Farbe hängt davon ab, wie transparent die Farbe ist. Deckende Farben werden als Hex ausgegeben, in der kompakten #rrggbb-Form, die du direkt in CSS einfügst. Die Tabelle zeigt, was du an jeder Stelle in den drei Fällen erhältst.
| Farbe | Klick im Panel | Referenztext kopieren | Fußzeile des Referenz-PNG |
|---|---|---|---|
| Deckend | #rrggbb (Hex) | roher rgb()-Wert | Hex |
| Teilweise transparent | roher rgba()-Wert | roher rgba()-Wert | 8-stelliges Hex |
| Vollständig transparent | transparent | rgba() mit Alpha 0 | transparent |
Über „Referenztext kopieren“ erhältst du die Rohwerte, die der Browser zurückgegeben hat, sodass du genau siehst, was berechnet wurde. Die PNG-Fußzeile stellt sie als Hex dar – für eine saubere, kurze Referenz. SuperchargeInspect verwendet kein HSL.
Was es ausliest und was nicht
Es funktioniert nur mit CSS-Farbwerten. Eine Farbe in einem Foto, ein Verlauf oder ein Hintergrundbild ist kein CSS-Farbwert und erscheint daher nicht als Kachel.
Ein Fall, den du kennen solltest: Wenn die Hintergrundfarbe als transparent ausgelesen wird, stammt die Farbe, die du tatsächlich siehst, von einem Element dahinter. Wechsle mit Ctrl+Up (Option+Up unter macOS) zum übergeordneten Element und lies die Farbe dort ab.
Navigation per Tastatur
Du kannst den gesamten Ablauf per Tastatur steuern. Drück Alt+Shift+E, um die Inspektion zu starten. Mit den Pfeiltasten wechselst du zum vorherigen oder nächsten Element. Halte Ctrl gedrückt und drück Up oder Down, um zum übergeordneten oder zu einem untergeordneten Element zu wechseln. Unter macOS ist das Option statt Ctrl.
Drück Enter, um das aktuelle Element zu fixieren. Drück Esc, um zur Auswahl zurückzukehren oder das Panel zu schließen.
Alles bleibt auf deinem Gerät
SuperchargeInspect läuft lokal auf deinem Gerät und stellt keine Netzwerkverbindungen her. Es gibt kein Konto und keine Analysen im Hintergrund.
Mit dem CSS-Viewer auch Schriften und Abstände auslesen.
Häufig gestellte Fragen
Wie finde ich den Hex-Farbcode eines Elements auf einer Website?
Kann es die Hintergrundfarbe eines Elements ermitteln?
Was passiert bei transparenten oder halbtransparenten Farben?
Kann ich eine Farbe aus einem Bild auswählen?
Werden Seitendaten irgendwohin gesendet?
Ähnliche Funktionen
Zeig deinem KI-Coding-Tool genau das Element, das geändert werden soll
Zeig auf das Element, schreib eine Notiz dazu und kopiere eine Referenz mit annotiertem Screenshot und beobachteten Styles – dann füge sie in das KI-Coding-Tool ein, das du bereits nutzt.
CSS-Viewer für jedes Element: CSS-Werte ansehen und kopieren
Ein CSS-Viewer, mit dem du das CSS jedes Elements auf einer Website ansehen kannst. Lies Schrift, Farben, Abstände und Box-Modell ab und kopiere CSS-Werte in deine Zwischenablage.
Schriftart einer Website finden: den deklarierten Font-Stack anzeigen
SuperchargeInspect erkennt die Schriftart von Website-Text. Es zeigt den deklarierten font-family-Stack, Schriftgröße, Schriftstärke und Zeilenhöhe an und kopiert sie mit einem Klick.