What does the CaIoT Design Inspector check?

It inspects colors, gradients, typography, CSS selectors, dimensions, contrast, responsive overflow, image alt text, form labels, touch targets and heading structure.

Does CaIoT upload the inspected page or report?

No. Inspection and report generation run locally in the browser. The current URL is sent to DeviceLab only when the user explicitly chooses a DeviceLab handoff.

Can I verify the page on a real Android phone?

Yes. Real Android Replay passes the selected HTTP or HTTPS URL and a small audit summary to DeviceLab, where the user can choose or reuse a real device session.

CaIoT browser extension

Inspect the design. Verify the experience.

Q: How do I generate a CSS gradient?

Choose a linear, radial, conic or repeating gradient; add any number of color and opacity stops; adjust hue, saturation, lightness and direction; then preview it on a realistic UI object and copy CSS, variables or Tailwind output.

Move from a pixel on the page to copy-ready CSS and release evidence. Pick exact colors, inspect live design properties, create gradients, catch accessibility and responsive risks, and export a client-ready audit—all without uploading the page.

Get the extension — Free Try the color tools

User-invoked access
Reports stay local
Real Android handoff

Website Design Audit

92Design score

example.com

Audit ready

18 colors · 7 font styles · 2 findings

Contrast reviewedActionable results with affected element counts

↔

Responsive risksOverflow, viewport and touch-target checks

Color & pixel pickerCSS gradient generatorElement inspectorAccessibility auditReal-device replay

One focused workflow

From visual detail to release evidence.

Designed for developers, designers, QA engineers and agencies who need more than a swatch picker.

⌁

Pick any visible color

Sample elements or image pixels and copy HEX, RGB and HSL values with surrounding design context.

{ }

Inspect computed design

See selectors, text and background colors, fonts, dimensions, spacing, borders and contrast.

◒

Discover the visual system

Extract frequently used colors, copy detected linear, radial and conic gradients, and map typography patterns from the active page.

✓

Audit practical risks

Check contrast, overflow, viewport metadata, alt text, labels, headings and touch-target sizing.

↻

Run a Fresh Test

Clear cache and Cache Storage for only the current site, with an optional service-worker reset.

⇩

Export useful evidence

Download a formatted, printable HTML report or raw JSON with colors, gradients, fonts, findings and page context.

Built around real design work

See the details. Keep the context.

Every result connects a visual decision to the page, CSS and test evidence behind it.

CaIoT website color picker showing sampled colors and inspected CSS — **Pixel-accurate picking**Sample text, backgrounds, images and gradients, then copy HEX, RGB or HSL.

CaIoT design audit showing palette and typography results — **Visual-system discovery**Bring colors, gradients and typography into one reviewable report.

CaIoT DeviceLab handoff for real Android website validation — **Real-device confidence**Carry the inspected URL into an authorized Android session when simulation is not enough.

Free browser design tools

Turn a color into an accessible, code-ready design system.

Go beyond one-off color values. Generate harmonies, a 10-step UI scale, reusable CSS tokens, verified contrast pairs and production-ready gradients—instantly, without an account or upload.

Design fasterMove from inspiration to a coherent palette in seconds.
Catch risk earlierSee WCAG text, large-text and UI contrast results together.
Hand off cleanlyCopy tokens, accessible pairs and gradient CSS directly into your product.

Choose a foundation color

Color harmonyClick any swatch to copy

UI shade scale50 → 900

Ready-to-use CSS variables

Accessibility contrast checker

TextBackground

Readable design builds trust.

16.9 : 1Passes WCAG AA and AAA

AA textAA largeAAA textUI graphics

Best readable text

▧ Import image

Gradient typeAngle 135° Repeat gradient

Color stopsAdd, remove and position any number of colors

Opacity stopsControl transparency independently

Hue 0°Saturation 0%Lightness 0%

CaIoTDesign with confidenceLive object preview

Export format

Copy-ready output

Modern browser output: Chrome, Edge, Firefox, Safari and Opera support the generated unprefixed CSS.

CaIoT design inspector showing extracted colors, gradients and typography — Inspect the live page and preserve the design context—not only a screenshot.

Browser to real device

Keep the exact URL moving through your test workflow.

Inspect

Open the extension on an HTTP or HTTPS page and pick a color or run the full audit.

Review and export

Prioritize findings, copy selectors, and save HTML or JSON evidence locally.

Reserve, connect and replay

Choose an available Android phone. DeviceLab reserves it, waits for the first live frame, then opens the inspected URL automatically.

1Reserved at LaunchNo phone is occupied while you are only browsing.2Metered when liveDevice minutes begin at the first visible frame.3Released by End SessionCleanup runs before the phone returns to the pool.

When simulation is not enough

Validate touch, rendering and responsive behaviour on physical hardware.

The extension sends only the inspected HTTP(S) URL and compact audit counts after you choose Real Android Replay. DeviceLab keeps it queued until the selected phone is live, opens it automatically, and clears the replay after delivery. End Session terminates the stream, cleans the session and releases the reservation.

Try DeviceLab free

Privacy by design

Useful access, only when you ask for it.

The extension does not request persistent access to every site. It runs on the active tab after a direct user action.

Local inspectionColors, CSS, audits, history and report generation stay in the browser.
Scoped Fresh TestOnly current-site cache data is removed; cookies, passwords, history and local storage remain.
Explicit handoffA page URL leaves the extension only when you choose Responsive Test or Real Android Replay.

Browser extension

Website Color Picker & Design Inspector - CaIoT

The production packages are prepared for Chrome, Edge, Firefox and Opera. Store links will activate here as each listing is approved.

◉

Google Chrome

Manifest V3 package with user-invoked active-tab access.

◫

Microsoft Edge

Chromium-compatible Edge Add-ons package.

◉

Mozilla Firefox

Firefox package with equivalent inspection workflow.

Opera

Opera Add-ons package for Chromium browsers.

Questions

What teams usually ask.

Is the Website Color Picker & Design Inspector free?

The extension’s current inspection, audit, Fresh Test, and local export features are prepared as a free browser utility. Real-device use follows the DeviceLab plan and device-minute rules shown in the portal.

How do I generate a CSS gradient?

Open the Gradient tab above and choose a linear, radial, conic or repeating layout. Add unlimited color and opacity stops, adjust HSL, reverse or rotate it, import CSS or a local image, preview it on a UI object, then copy production-ready output.

What can the audit detect?

It checks common design and delivery signals including colors, gradients, typography, contrast, horizontal overflow, viewport metadata, missing alt text, unlabeled controls, small touch targets and heading structure. It is a focused assistant, not a substitute for a complete accessibility review.

Does Fresh Test sign me out?

No. It clears cache and Cache Storage only for the active website. Cookies, saved passwords, history, form data and local storage are preserved. Resetting the current site’s service worker is optional.

What happens when I end a DeviceLab session?

DeviceLab stops the stream, performs the applicable cleanup, releases the device reservation, and synchronizes the ended state across open DeviceLab tabs.