01
Verstehe, was du siehst.
Entdecke CSS, Abmessungen und Schriftarten jedes Elements.
Pro 1 Monat kostenlosWebdesign prüfen.
Die Chrome-Erweiterung für Design und Entwicklung
Webdesign prüfen.
Direkt in Chrome.
Untersuche CSS, Farben, Schriften und Abstände. Prüfe Layouts, analysiere Seiten und erstelle Screenshots mit einer Chrome-Erweiterung.
Danach 0,99 $/Monat. Vor Testende kündbar.
Deine nächste Idee, ganz nahJetzt ausprobieren
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
FÜR DIE DETAILS GEMACHT
Gutes Design steckt im Detail.
Vier Werkzeuge bleiben kostenlos. Teste alle Pro-Werkzeuge einen Monat lang gratis.
02
Finde deine Farbwelt.
Extrahiere Paletten, erkenne Schriften und prüfe Kontraste.
03
Jedes Pixel am richtigen Ort.
Miss Abstände, prüfe das Raster und halte das Ergebnis fest.
01
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.
02
Farbpaletten-Extraktion
ProErfasst automatisch alle auf einer Webseite verwendeten Farben und ordnet sie per Clustering-Algorithmus in Kategorien ein.
03
Font-Inspektor
ProZeigt sofort 6 Eigenschaften von Textelementen an: font-family, size, weight, line-height, letter-spacing und color.
04
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).
05
Abstandsmessung
ProZeigt den horizontalen, vertikalen und diagonalen Abstand zwischen zwei Elementen in Pixeln (px) mit roten gestrichelten Linien im Figma-Stil an.
06
CSS kopieren
ProKopiert das Computed CSS eines Elements mit einem Klick in die Zwischenablage. Bereichsauswahl möglich.
07
Grid Overlay
KostenlosBlendet ein 12-Spalten CSS Grid ein, um die Layoutausrichtung visuell zu überprüfen.
08
Style Strip
ProEntfernt CSS schrittweise in 4 Stufen, um die HTML-Struktur zu analysieren.
09
Seiten-QA
ProPrüfe Überlauf, Bildbeschreibungen, Namen und Überschriften. Zeige Elemente an und exportiere den Bericht.
10
Palette als CSS
ProMache aus extrahierten Farben wiederverwendbare CSS-Variablen. Mit einem Klick kopieren oder herunterladen.
Kann man PixelKit ohne Installation testen?
Ja — erleben Sie die Kernfunktionen von PixelKit hier direkt, ohne die Erweiterung installieren zu müssen.
Gute Werkzeuge. Kleiner Preis.
Die Grundlagen gratis. Alle Pro-Funktionen einen Monat kostenlos.
Free
$0Dauerhaft
Kostenlos installieren
- Hoverify Inspektor
- Color Picker (5 Verlaufseinträge)
- Grid Overlay
- Screenshot (nur sichtbarer Bereich)
Pro Monthly
Pro 1 Monat kostenlos$0im ersten Monat
Danach 0,99 $/Monat. Vor Testende kündbar.
Kostenlos testen- 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
- Seiten-QA, Überschriften und JSON-Berichte
Pro Lifetime
$19.99Einmalzahlung
Pro kaufen
- Alle Pro-Funktionen enthalten
- Lebenslange Updates
- Prioritäts-Support
Der kostenlose Testmonat gilt für Pro Monthly. Zahlungsdaten sind erforderlich. Ohne Kündigung vor Testende verlängert sich das Abo für 0,99 $/Monat. Die Lifetime-Lizenz ist ein separater Einmalkauf für 19,99 $.
1
Pro Monthly bei Polar kostenlos testen.
2
Lizenzschlüssel in Polar oder per E-Mail finden.
3
Schlüssel in PixelKit eingeben und Pro aktivieren.
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?+
Vier Basiswerkzeuge bleiben kostenlos. Pro Monthly beginnt mit einem kostenlosen Monat und kostet danach 0,99 $/Monat. Lifetime kostet 19,99 $.
Wie funktioniert der kostenlose Test?+
Wähle Pro Monthly bei Polar und aktiviere den Lizenzschlüssel in der Erweiterung. Zahlungsdaten sind erforderlich. Nach einem Monat kostet das Abo 0,99 $/Monat, sofern du nicht vor Testende bei Polar kündigst. Lifetime ist separat für 19,99 $ erhältlich.
Wie prüfe ich CSS und Schriften einer Website?+
Installiere PixelKit aus dem Chrome Web Store und öffne eine Website. Aktiviere den Inspektor und zeige auf ein Element, um CSS und Typografie zu sehen. Pro ergänzt Schriftprüfung und CSS-Kopie.
Kann ich das Design vor der Veröffentlichung prüfen?+
Pro Page QA prüft horizontalen Überlauf, fehlende Bildbeschreibungen, Ladefehler, Felder, Schaltflächen und Links ohne Namen sowie übersprungene Überschriftenebenen. Zeige Elemente an und exportiere JSON. Ohne iframes und Shadow DOM; kein Ersatz für ein vollständiges Barrierefreiheits-Audit.
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.
Pro 1 Monat kostenlos
Deine nächste Idee beginnt hier.
Entdecke alle Pro-Werkzeuge einen Monat lang kostenlos.
Kostenlos testenDanach 0,99 $/Monat. Vor Testende kündbar.