Which tool should you use
for web design analysis?
PixelKit offers 8 tools including CSS inspection, color extraction, typography, spacing measurement (px), and WCAG 2.1 contrast checking (AA 4.5:1 / AAA 7:1).
4 free tools + 9 Pro tools to complete your web design workflow for designers and developers.
Can you try PixelKit without installing?
Yes — experience PixelKit's core features right here, no extension installation required.
What features does PixelKit have?
4 free + 5 Pro-only, 8 core tools in total
Hoverify Inspector
FreeHover over any element to instantly view Box Model, 6 Typography properties (font-family, size, weight, line-height, letter-spacing, color), Layout, Background, and accessibility info in real time.
Color Palette Extraction
ProAutomatically collects all colors used on a web page and categorizes them using a clustering algorithm.
Font Inspector
ProInstantly check 6 properties of any text element: font-family, size, weight, line-height, letter-spacing, and color.
WCAG Contrast Checker
ProCalculates foreground/background contrast ratios in real time using the WCAG 2.1 formula. Determines AA (4.5:1) and AAA (7:1) compliance levels.
Spacing Measurement
ProDisplays horizontal, vertical, and diagonal distances between two elements in pixels (px) with Figma-style red dashed lines.
CSS Copy
ProCopy an element's computed CSS to the clipboard with a single click. Range selection is also available.
Grid Overlay
FreeOverlay a 12-column CSS Grid to visually verify layout alignment.
Style Strip
ProProgressively removes CSS in 4 stages to analyze the underlying HTML structure.
How much does PixelKit cost?
Start free ($0), Pro is $1/month or $20 lifetime. 4 core tools are free forever.
Free
- ✓Hoverify Inspector
- ✓Color Picker (5 history items)
- ✓Grid Overlay
- ✓Screenshot (visible area only)
Pro Monthly
- ✓All Free features included
- ✓Palette Extractor
- ✓Font Inspector
- ✓Spacing Measure
- ✓WCAG Contrast Checker
- ✓CSS Copy / Style Strip
- ✓Visual Editor / Layout Editor
- ✓Quick Theme / Presets
- ✓Full API tools
Frequently Asked Questions
What is PixelKit?+
PixelKit is a Chrome extension for analyzing and editing the visual design of web pages. It provides 8 tools including CSS inspection, color extraction, typography analysis, spacing measurement, and WCAG contrast checking.
How do you install PixelKit?+
Search for 'PixelKit' on the Chrome Web Store or click the install button on the landing page. It's ready to use immediately after installation.
Is PixelKit free?+
Yes, 4 core tools (Hoverify Inspector, Color Picker, Grid Overlay, Screenshot) are free forever. Pro plan is $1/month or $20 lifetime.
What additional features does the Pro plan include?+
Pro plan adds 9 tools: Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme, and Presets.
How does the WCAG contrast checker work?+
It calculates contrast ratios between foreground (text) and background colors in real time based on the WCAG 2.1 formula. It automatically determines AA (4.5:1 or higher) and AAA (7:1 or higher) compliance levels.
Can I use PixelKit on browsers other than Chrome?+
Yes, PixelKit can be installed and used on Chromium-based browsers such as Edge, Brave, and Arc via the Chrome Web Store.
How do you install PixelKit?
Search for 'PixelKit' on the Chrome Web Store, or click the button below to go directly to the install page.
Start for free and upgrade to Pro when you need it.