Skip to main content

For Designers

The Toolkit for Designers Who Implement Their Own Work

When you split time between design and implementation, you need tools that move as fast as you do. onHover puts color picking, contrast validation, CSS inspection, screenshot capture, and responsive viewport testing in one popup — available on any page without opening DevTools.

5 tools for the design-to-implementation workflow

Color Eyedropper

Pick any color from any site, instantly

Click any pixel on any webpage and get the HEX, RGB, and HSL value. The eyedropper keeps a palette history so you can build a color set from a reference site without copying values one by one. Useful for extracting a competitor's palette, matching a client's brand colors to a design system, or verifying that the implemented color matches the Figma spec.

✓Extract a brand palette from a live site
✓Verify HEX values match design tokens
✓Build a reference palette from multiple sources

WCAG Contrast Checker

Accessibility validation during implementation

Pick any two colors from the page using the eyedropper or enter HEX/RGB values manually. onHover calculates the contrast ratio and shows AA and AAA pass-fail ratings for normal text and large text side by side. Catch contrast failures at the implementation stage, before QA or an accessibility audit does.

✓Validate text/background pairs against WCAG 2.1
✓Check AA and AAA compliance in one step
✓Test button states, placeholder text, and disabled elements

CSS Inspector

Computed value lookups without opening DevTools

Hover over any element to see its computed font family, size, weight, line-height, letter-spacing, color, background, padding, margin, and border radius — all at once, no panel digging. Useful when you're implementing a design and want to confirm the rendered output matches the spec, or when a client site uses a font or spacing value you want to reference.

✓Confirm font rendering matches Figma spec
✓Extract spacing and radius values from reference sites
✓Debug layout differences between design and implementation

Screenshot

Full page and element capture for design review and handoff

Capture the full page (including content below the fold), the current viewport, or a specific element. Screenshots are timestamped and include the URL. Use them for design review comments, bug reports with visual context, before/after comparisons, or client handoff documentation. No browser extension toolbar visible in the capture.

✓Document the implemented state for design review
✓Capture element-level screenshots for component QA
✓Produce before/after comparisons for client presentations

Responsive Tester

Viewport checking across every breakpoint

Switch between device presets (iPhone SE, iPhone 14, iPad, Android, Desktop) or enter a custom width. The page renders at that viewport immediately — no DevTools, no resize handles, no layout shift from the inspector sidebar itself taking up screen space. Rotate between portrait and landscape. Zoom in to check dense layouts.

✓Check designs at every major mobile breakpoint
✓Validate landscape layouts before deployment
✓Present responsive behavior to clients or stakeholders

A typical design review pass

How these tools fit together when you\'re QA-ing your own implementation.

1

Open the implemented page in Chrome

2

Use Responsive Tester to check every major breakpoint (375px, 768px, 1280px)

3

Hover over type elements with the CSS Inspector — confirm font, size, weight, and spacing match the spec

4

Use the Color Eyedropper on key UI elements — verify HEX values match design tokens

5

Run the WCAG Contrast Checker on text/background pairs — confirm AA compliance

6

Capture a full-page screenshot for the design review thread or handoff document

Also included in onHover

✓SEO Analyzer — meta, OG, headings
✓Tech Stack Detector — CMS, framework, CDN
✓Page Insights — Core Web Vitals snapshot
✓Assets Viewer — browse and download images, SVGs, fonts
✓API Tester — GET, POST, PUT, PATCH, DELETE
✓Network Throttle — simulate 3G and Offline
✓Code Injection — live CSS and JS per hostname
✓Extract & Export — tables, emails, Markdown, PDF
✓Image Outliner — color-coded layout audit

Common questions

Does onHover replace my design tool's inspect panel?

onHover is built for inspecting live, implemented pages in the browser — not design files. It reads the computed values the browser has actually rendered, which is useful when you need to verify the implementation matches the spec or extract values from a live reference site. Use it alongside your design tool, not instead of it.

Does the WCAG Contrast Checker cover both AA and AAA for normal and large text?

Yes. onHover shows the contrast ratio and pass/fail results for WCAG 2.1 AA and AAA thresholds at both normal text size and large text size. You can pick colors directly from the page using the eyedropper or enter HEX/RGB values manually.

Can I use the Color Eyedropper on any website, including images and gradients?

The eyedropper samples individual pixels, so it works on any visible element — including images, gradients, and video frames. The picker maintains a history of sampled colors during your session so you can build a palette without re-sampling.

Is onHover's Responsive Tester different from Chrome's built-in device mode?

Both resize the viewport, but onHover's Responsive Tester keeps your session state and cookies intact, doesn't shift the page layout by opening a sidebar, and closes cleanly without leaving a locked viewport. For quick breakpoint checks during implementation, it's faster to reach — one click from the extension popup.

Does the screenshot tool capture content below the fold?

Yes. The full-page capture option scrolls and stitches the entire page into a single image, including content below the fold. You can also capture the current viewport only, or select a specific element for a component-level screenshot.

7-day free trial, all 16 tools

No credit card required. Works on Chrome and all Chromium-based browsers.

Start Free Trial