Welcome to Hexly

Hexly is a Chrome extension that reads any webpage's design system (colors, typography, and per-element styles) and puts it in one panel you can copy from. Color extraction, a pixel color picker, font detection, and a full element inspector, all in a single popover.

What Hexly does

Open Hexly on any site and it scans the live DOM with getComputedStyle to surface three things at once:

• Colors: every color actually used on the page, deduplicated and sorted by visual importance.
• Typography: each font family with its dominant size, weight, line-height, and a live preview.
• Inspect: click any element to read its box model, layout, type, and style, with a copy button per section.

Who it's for

Designers rebuilding a reference, developers matching a spec, and anyone who has ever opened DevTools just to find one hex value. If you've used the eyedropper in a design tool and wished it worked on the whole web, Hexly is that, plus fonts and full styles.

Opening Hexly

Click the Hexly icon in the Chrome toolbar to open the panel on the current tab. Pin it from the puzzle-piece menu to keep it one click away. Click the × in the panel header to close it, or press Esc to leave inspect mode.

Supported pages

Hexly works by injecting a small script into the page you're viewing, so it runs almost everywhere, but a handful of pages are off-limits by Chrome's design, not Hexly's.

Where it works

Hexly runs on most public websites: anything served over http:// or https://. If you can load it in a normal tab, Hexly can almost always read it.

Where it doesn't

Hexly cannot run on:

• chrome:// pages (settings, history, the new-tab page)
• chrome-extension:// pages, including other extensions' UIs
• The Chrome Web Store itself
• Local file:// pages, unless you enable file access for Hexly in the extension's settings
• Pages with a strict Content-Security-Policy that blocks script injection

These restrictions are enforced by the browser. There's no workaround from inside the extension.

Iframes & errors

On pages with cross-origin iframes, the inspect overlay may appear offset from the element you're hovering; the browser sandboxes those frames separately.

Keyboard shortcuts

Hexly is mostly point-and-click, but a couple of keys speed things up. More shortcuts are planned.

Color extractor

The Colors tab is what you see when Hexly opens. It collects every color the page actually renders and presents them as a clean, copyable list.

How extraction works

Hexly walks every element in the DOM and reads its computed styles via getComputedStyle, pulling color, background-color, and border-color from each. Because it reads computed values, it captures the real rendered color, including ones set by CSS variables, inherited rules, or JavaScript.

Hexly understands the full CSS Color Level 4 syntax, so colors written as lab(), lch(), oklch(), or oklab() are parsed correctly alongside hex, rgb(), and hsl().

Sorting & deduplication

A raw page can yield hundreds of near-identical colors, so Hexly cleans the list before showing it:

• Deduplication: colors that are visually indistinguishable are merged using a delta-E (perceptual) distance, not a naive string match. #FEFEFE and #FFFFFF collapse into one.
• Sorting by importance: saturated, characterful colors rise to the top; near-blacks sink toward the bottom; near-whites land last. The brand colors you're usually after appear first.

The Copy All dropdown

The Copy All button in the panel header copies the whole palette at once. Its dropdown lets you pick the output format:

• Plain Text: a comma-separated list of hex values.
• CSS Variables: a --color-n custom property per color.
• Tailwind: a colors object ready to drop into your Tailwind config.

See Copy formats for exactly what each one produces.

Copying a single swatch

Color picker

Need a color that isn't in the extracted list (a value inside an image, a gradient, or a hover state)? Use the built-in eyedropper.

Using the eyedropper

Click the eyedropper icon next to Copy All to activate the picker, then click any pixel on the page. Hexly reads that pixel's exact color and copies its hex value straight to your clipboard.

One mode at a time

• The picker auto-deactivates after a single pick. Click the icon again for the next color.
• Only one mode is active at a time: turning on the picker exits inspect mode, and entering inspect mode turns off the picker.

Font extractor

The Typography tab scans every element on the page, groups what it finds by font family, and shows the most common size / weight / line-height combination for each: the way that font is actually used, not just that it's loaded.

What each card shows

Every font family gets a card with:

• Font name and a license badge (see below)
• A live preview: AaBbCcDdEe rendered in the actual font, when it's available on the page
• Specs: size, weight, line-height, and letter-spacing
• Where to get it: a link to the source (for example, Google Fonts for free families)
• Text color for that family, with its own copy button

License badges

Each card carries a badge describing the font's licensing:

• Free: freely usable (e.g. open-source / Google Fonts)
• Paid: a commercial font that requires a license
• System: a built-in OS font like system-ui or Arial
• Unknown: not found in the bundled font database

Where to get the font

For free families, the card links straight to where you can download or embed it, usually Google Fonts, so you can match a site's type in your own project in seconds.

Inspect tab

The Inspect tab turns Hexly into a focused element inspector: DevTools' most-used readouts, distilled and copyable.

Entering inspect mode

Click the Inspect tab to enter element-selection mode. Hover any element to see a blue highlight, then click to lock it in. Press Esc at any time to exit. Hexly then breaks the element down into four sections, each with its own Copy CSS button.

Box model

A nested diagram of the selected element's margin → border → padding → content, with the measured pixel value on every side, the fastest way to see why something isn't lining up.

Properties

The layout essentials: display, position, and, when relevant, the element's flex or grid configuration.

Typography & contrast

Font family, size, weight, line-height, letter-spacing, and text color for the selected element, plus the WCAG contrast ratio against its background, tagged AA when it passes and Fail when it doesn't.

Style

The surface details: background, border, border-radius, box-shadow, and opacity, everything you need to recreate the look.

Copy formats

When you use Copy All in the Colors tab, the dropdown decides how the palette lands on your clipboard. Here's the same three-color palette in each of the three formats.

#D73546, #FFFFFF, #BCE531

--color-1: #D73546;
--color-2: #FFFFFF;
--color-3: #BCE531;

colors: {
  'color-1': '#D73546',
  'color-2': '#FFFFFF',
  'color-3': '#BCE531',
}

Individual swatches always copy as plain hex; only Copy All honors the selected format.

Privacy

What runs locally

Everything runs locally in your browser. Hexly reads styles with getComputedStyle; it makes no network requests to extract data. The page content, the colors, the fonts, the inspected styles: none of it is ever sent anywhere. No account is required.

Analytics

Hexly collects anonymous usage analytics via GA4: page views and feature-usage counts only. No personal data, no page content, and no URLs are collected. No data ever leaves your device except for these anonymous analytics pings.

FAQ

Why does the panel show an error on some pages?

Usually because the page loaded before Hexly was active, or the page blocks script injection. Refresh the page and reopen Hexly. If it still fails, the page is likely a restricted one: a chrome:// page, the Chrome Web Store, or a site with a strict Content-Security-Policy. See Supported pages.

Does Hexly work on Firefox or Safari?

Hexly is a Chrome extension and runs on Chrome and Chromium-based browsers (Edge, Brave, Arc, Opera). It is not currently available for Firefox or Safari.

Why are some fonts showing as "Unknown"?

License badges come from a bundled font database. When a font family isn't in that database, Hexly shows Unknown instead of guessing its license. The font's specs and preview still work; only the license is unknown.

Does Hexly read the actual source code?

No. Hexly reads the computed styles of the live, rendered page via getComputedStyle, the final values the browser applied. It does not read or parse your CSS or HTML source files.

Is my browsing data sent anywhere?

No. Extraction happens entirely on your device with no network requests. The only thing Hexly sends is anonymous GA4 analytics: feature-usage counts and page views, never page content or URLs. See Privacy.

Can I use Hexly on password-protected pages?

Yes. Once you're logged in and viewing the page normally, Hexly reads it like any other page; it only sees what's already rendered in your browser, and nothing leaves your device.