Hexly is a free Chrome extension that reads any webpage's design system (colors, typography, spacing) and outputs it in the formats you actually use.
Everything Hexly pulls is structured, copyable, and ready to drop into your own work.
Every color on the page, ranked by how often it's used. Copy one or grab them all as hex, CSS variables, or Tailwind.
Every typeface in use (size, weight, line height, tracking) with the CSS ready to copy and a note on where to get it.
Hover any element for its box model, full CSS, and contrast ratio. Copy the whole rule as CSS or Tailwind.
Most inspector tools stop at showing you the values. Hexly copies them in the format you actually work in: plain CSS, CSS variables, or Tailwind arbitrary-value classes. One click. No reformatting.
Learn more about copy formats →Click any element to instantly see its box model, layout properties, typography, and visual styles, all organized and ready to copy. No digging through computed styles.
Learn more about the inspect tab →Hexly scans every element and extracts the full color palette, deduplicating near-identical shades and sorting brand colors to the top. Supports modern CSS Color Level 4 formats including oklch() and lab().
Learn more about color extraction →Hexly identifies every typeface on the page and shows you a live preview rendered in the actual font. License badges tell you at a glance whether a font is free, paid, or a system font, so you know before you use it.
Learn more about font extraction →Most inspector tools show you values and leave the rest to you. Hexly closes the gap between inspecting and building.
Hexlylab(), oklch(), modern formatsAny live site, a staging build, or a design you want to learn from.
Hexly scans the page and ranks every color by how often it's used.
Grab one swatch or the whole palette as hex, CSS variables, or Tailwind.
Land on the page whose type you want to break down.
See every typeface in use with size, weight, line height, and tracking.
Copy the ready-made CSS and jump to where each font is hosted.
Pull up the page with the element you want to reverse-engineer.
Hover any element for its box model, full styles, and contrast ratio.
Copy the whole rule in one click, no digging through computed styles.
The same palette, ready as plain values, CSS variables, or a Tailwind config, one click each.
#533AFD, #7389FF, #FF6118, #0B1120, #F8FAFC, #475569, #E2E8F0, #94A3B8, #1E293B, #CBD5E1, #FFFFFF, #0F172A
--color-1: #533AFD; --color-2: #7389FF; --color-3: #FF6118; --color-4: #0B1120; --color-5: #F8FAFC; --color-6: #475569;
colors: { 'color-1': '#533AFD', 'color-2': '#7389FF', 'color-3': '#FF6118', 'color-4': '#0B1120', }
Pro plan coming soon: unlimited runs and priority support.
Some pages use strict Content Security Policies (CSP) that block script injection. This prevents Hexly from reading the page's styles. It also won't work on Chrome's own pages like chrome:// or the Chrome Web Store. Try refreshing the page first. If the error persists, the page is likely restricted.
Hexly works on any Chromium-based browser like Chrome, Arc, Edge, Brave, and Opera. Firefox and Safari are not supported.
Hexly matches fonts against a bundled database of around 1,500 common fonts. If a font isn't in the database like custom fonts, proprietary typefaces, or obscure families, it'll show an Unknown badge. The font name and specs are still shown; only the license info is missing.
No. Hexly uses getComputedStyle to read the browser's computed styles, the same values DevTools shows you. It never reads raw source files, network requests, or anything outside the visible DOM.
No page content, URLs, or style data ever leaves your device. Hexly collects anonymous usage analytics via GA4. Things like which tabs you open and how often — but nothing personal and nothing about the pages you visit.