Webdesign-Analyse,
welches Tool sollten Sie verwenden?
PixelKit bietet 8 Tools: CSS-Inspektion, Farbextraktion, Typografie, Abstandsmessung (px) und WCAG 2.1-Kontrastprüfung (AA 4.5:1 / AAA 7:1).
4 kostenlose + 9 Pro-Tools für den kompletten Webdesign-Workflow von Designern und Entwicklern.
Kann man PixelKit ohne Installation testen?
Ja — erleben Sie die Kernfunktionen von PixelKit hier direkt, ohne die Erweiterung installieren zu müssen.
Welche Funktionen bietet PixelKit?
4 kostenlose + 5 Pro-exklusive, insgesamt 8 Kerntools
Hoverify Inspektor
KostenlosBewegen Sie die Maus über ein Element, um in Echtzeit Box Model, 6 Typography-Eigenschaften (font-family, size, weight, line-height, letter-spacing, color), Layout, Background und Barrierefreiheit anzuzeigen.
Farbpaletten-Extraktion
ProErfasst automatisch alle auf einer Webseite verwendeten Farben und ordnet sie per Clustering-Algorithmus in Kategorien ein.
Font-Inspektor
ProZeigt sofort 6 Eigenschaften von Textelementen an: font-family, size, weight, line-height, letter-spacing und color.
WCAG-Kontrastprüfung
ProBerechnet das Kontrastverhältnis in Echtzeit nach der WCAG 2.1-Formel. Bestimmt die Stufen AA (4.5:1) und AAA (7:1).
Abstandsmessung
ProZeigt den horizontalen, vertikalen und diagonalen Abstand zwischen zwei Elementen in Pixeln (px) mit roten gestrichelten Linien im Figma-Stil an.
CSS kopieren
ProKopiert das Computed CSS eines Elements mit einem Klick in die Zwischenablage. Bereichsauswahl möglich.
Grid Overlay
KostenlosBlendet ein 12-Spalten CSS Grid ein, um die Layoutausrichtung visuell zu überprüfen.
Style Strip
ProEntfernt CSS schrittweise in 4 Stufen, um die HTML-Struktur zu analysieren.
Was kostet PixelKit?
Starten Sie kostenlos ($0), Pro für $1/Monat oder $20 einmalig. Die 4 Basistools sind dauerhaft kostenlos.
Free
- ✓Hoverify Inspektor
- ✓Color Picker (5 Verlaufseinträge)
- ✓Grid Overlay
- ✓Screenshot (nur sichtbarer Bereich)
Pro Monthly
- ✓Alle Free-Funktionen enthalten
- ✓Palette Extractor
- ✓Font Inspector
- ✓Spacing Measure
- ✓WCAG Contrast Checker
- ✓CSS Copy / Style Strip
- ✓Visual Editor / Layout Editor
- ✓Quick Theme / Presets
- ✓Alle API-Tools
Pro Lifetime
- ✓Alle Pro-Funktionen enthalten
- ✓Lebenslange Updates
- ✓Prioritäts-Support
Häufig gestellte Fragen
Was ist PixelKit?+
PixelKit ist eine Chrome-Erweiterung zur Analyse und Bearbeitung des visuellen Designs von Webseiten. Sie bietet 8 Tools einschließlich CSS-Inspektion, Farbextraktion, Typografie-Analyse, Abstandsmessung und WCAG-Kontrastprüfung.
Wie installiert man PixelKit?+
Suchen Sie im Chrome Web Store nach 'PixelKit' oder klicken Sie auf den Installations-Button auf der Startseite. Nach der Installation sofort einsatzbereit.
Ist PixelKit kostenlos?+
Ja, 4 Basistools (Hoverify Inspektor, Color Picker, Grid Overlay, Screenshot) sind dauerhaft kostenlos. Der Pro-Plan kostet $1/Monat oder $20 einmalig.
Welche zusätzlichen Funktionen bietet der Pro-Plan?+
Der Pro-Plan fügt 9 Tools hinzu: Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme und Presets.
Wie funktioniert die WCAG-Kontrastprüfung?+
Sie berechnet in Echtzeit das Kontrastverhältnis zwischen Text- und Hintergrundfarbe basierend auf der WCAG 2.1-Formel. Sie bestimmt automatisch die Stufe AA (4.5:1 oder höher) und AAA (7:1 oder höher).
Funktioniert PixelKit auch in anderen Browsern als Chrome?+
Ja, PixelKit kann über den Chrome Web Store in Chromium-basierten Browsern wie Edge, Brave und Arc installiert und verwendet werden.
Wie installiert man PixelKit?
Suchen Sie im Chrome Web Store nach 'PixelKit' oder klicken Sie auf den Button unten, um direkt zur Installationsseite zu gelangen.
Starten Sie kostenlos und upgraden Sie bei Bedarf auf Pro.