Free Chrome extension for designers

The only design extension you need.

20+ design tools in one toolbar. No account, no paywall.

Add to Chrome, it’s free See every tool

Press Alt+Shift+D on any website to open it.

halcyon.app
Pixelkit inspecting a button on a website: size, padding, radius and typography in a panel, with the toolbar at the bottom
20+design tools
1shortcut to open them
$0now and later
0trackers or ads

Replaces 12 extensions.

Stop hunting the store for single-purpose tools, half of them behind a paywall.

Color picker
PROFont finder
Ruler
Grids
PROInspector
PROStyle guide
PROScreenshots
PROMockups
PROAssets
Contrast
Color-blind
Responsive
pıxelkıt
$0

All of them, in one toolbar.

IInspect

Inspect anything.

  • Size, type, colour, spacing, radius and shadow
  • Walk the page with arrow keys
  • Copy the CSS in one click
Inspect panel showing a button's box, typography and fill
ELive edit

Edit any website, live.

  • Text, fonts, colours, images and spacing
  • Any Google Font, right on the page
  • Undo any change, then copy the CSS
Live edit panel with font, size, weight, colour and padding controls
SStyle guide

Copy any site’s style guide.

  • Palette, fonts, type scale and spacing
  • Export CSS variables, Tailwind or design tokens
  • Download it as a PNG style sheet
Style guide panel listing the page's colours, fonts and type scale
PScreenshots

Screenshots worth sharing.

  • Full page, one element or a region
  • Arrows, boxes, text and blur
  • Browser and phone mockups in one click
Screenshot editor in mockup mode: a website inside a browser frame on a purple gradient
UAudit

Catch issues early.

  • Contrast checks with the closest passing colour
  • Tiny text, tap targets, alt text and headings
  • Preview the page as colour-blind users see it
Quick audit panel with low-contrast and small-text issues

Every tool. One toolbar.

InspectEvery style of any element
Live editChange the page in place
Color pickerHEX, RGB, HSL, OKLCH
Font finderThe font that really renders
MeasureDistances between elements
Grid and guidesColumns, rows, guides
Style guideAny site’s design system
AssetsImages, SVGs, icons, video
ScreenshotPage, element or region
AnnotateArrows, boxes, text, blur
MockupsBrowser and phone frames
ContrastWCAG grades and fixes
Vision simulatorColour blindness, blur
Quick auditAccessibility at a glance
Responsive viewerPhone, tablet, desktop
CollectionsSave what you find
Palette builderAny colour to 50–950
GradientsSmooth OKLCH blends
ShadowsLayered, natural depth
Converterspx, rem, colour, ratio
PlaceholdersText, images, avatars
Command searchFind any tool fast

One key per tool.

Alt⇧DOpen
IInspect
EEdit
CColour
FFont
MMeasure
SStyle
PShot
EscClose

Pro features. Free.

Everything other extensions charge for is included.

No account

Install it and start. Nothing to sign up for.

No ads

Just your tools, nothing in the way.

No tracking

Everything stays on your computer.

No limits

Save, export and download all you like.

Kept free by people like you

If Pixelkit saves you time, a coffee helps keep it going. Totally optional.

Buy me a coffee

Questions

Is it really free?

Yes. Every tool is included and there’s no Pro plan, trial or account. If it saves you time, you can buy me a coffee on Ko-fi.

Does Pixelkit collect my data?

No. It only runs on a tab when you open it there, and everything you save stays on your computer. There’s no server, analytics or tracking. Read the privacy policy.

Why does it sometimes ask to “Allow” access?

Pixelkit only works on the tab you open it on. Downloading all of a page’s assets, the responsive viewer and a few side panel buttons need to reach further, so they ask once. Say Not now and every other tool keeps working.

How do I open it?

Click the Pixelkit icon in your toolbar or press Alt+Shift+D on any website. Each tool has its own key, and Esc closes it.

Which browsers does it work in?

Google Chrome 116 or newer. Chromium browsers that install from the Chrome Web Store, like Edge, Brave and Arc, should work too.

Does it work on every website?

On almost all of them. Chrome doesn’t let extensions run on its own pages, like chrome:// pages and the Chrome Web Store.

Can I export to Tailwind or Figma tokens?

Style guides export as CSS variables, a Tailwind config or W3C design tokens (DTCG), which token plugins can import.

The only design extension you need.

Add to Chrome, it’s free