Hexly — Color Picker, Font Inspector & CSS Extractor

Hexly is a designer's browser tool for extracting colors, typography, assets, and element styles from any website. Open Hexly on any page and it instantly scans the site and surfaces what you need: the full color palette, every typeface in use, every image and SVG on the page, and the ability to inspect any element's CSS down to the box model. Everything you copy is saved to History, so you can go back and grab it again later. Page content stays on your device. Signing in enables history sync across browsers. COLORS TAB Hexly scans every element on the page and extracts the complete color palette. Backgrounds, text colors, borders, and more. Colors are sorted by visual prominence, so brand and accent colors surface first. Copy individual colors as plain hex with one click, or use Copy All to export the entire palette in your preferred format: Plain Text: Comma-separated hex values, ready to paste anywhere CSS Variables: Formatted as --color-1: #hex; declarations Tailwind: Formatted as a colors: {} config block with arbitrary values COLOR PICKER Click the eyedropper to activate pixel-level color picking. Hover anywhere on the page with a magnified loupe showing the exact pixel under your cursor. Click to copy the hex instantly. Perfect for colors that aren't in the extracted palette; gradients, images, canvas elements, and more. TYPOGRAPHY TAB Hexly identifies every typeface on the page, grouped by font family. Each font card shows: Font name with license badge (Free, Paid, System, or Unknown) Live "AaBbCcDdEe" preview rendered in the actual font Font size, weight, line height, letter spacing, color, and contrast ratio. Where to get it, direct links to Google Fonts, foundry pages, or font retailers Copy each font's properties as CSS or Tailwind with one click. FONT PICKER Click the font picker icon to activate font picker mode. Hover over any text on the page to see its font details in a tooltip. Click to pin a card with full specs. Pin multiple fonts to compare them side by side, and copy any of them as CSS or Tailwind directly from the pinned card. ASSETS TAB Hexly pulls every image and SVG off the page into a browsable grid. Filter by type to isolate raster images or vectors, and see each asset's filename and file size at a glance. Copy any asset to your clipboard or download it directly — no right-clicking through nested elements, no digging through the network tab. SVGs are shown on a checkerboard background so transparency is visible, and can be copied as raw markup. INSPECT TAB Click the Inspect tab to activate element inspection mode. A crosshair cursor appears and elements highlight as you hover. Click any element to see its full computed styles, broken into sections: PROPERTIES: Layout and positioning values including display, width, height, padding, margin, flexbox properties, position, z-index, overflow, and cursor. Only non-default values are shown, so you see what actually matters. TYPOGRAPHY: Font family, size, weight, line height, letter spacing, color, and text alignment. Includes a live contrast ratio with WCAG AA compliance badge so you can check accessibility at a glance. STYLE: Visual properties including background color, border, border radius, box shadow, and opacity. Color values are shown with a swatch for quick identification. BOX MODEL: A nested diagram showing the exact margin, border, padding, and content dimensions of the inspected element. Like browser DevTools, but surfaced right in the panel. Copy any section individually as CSS or Tailwind, or use the master Copy button to grab everything at once. HISTORY TAB Every color, font, asset, and element you copy is saved automatically. History groups entries by date and shows the source site for each one, so you can trace where something came from days later. Re-copy any saved item in one click without revisiting the page. Useful when you're pulling from several sites across a project and don't want to lose track of what you grabbed. WHO IT'S FOR Hexly is built for designers and developers who reverse-engineer websites as part of their workflow — auditing a competitor's design system, pulling brand colors for a client project, checking typography consistency, collecting reference assets, or just working out how a site is built. It works on any website, with no permissions beyond what's needed to read the current tab. PRIVACY Hexly reads computed styles from the active tab only when you open it. It does not run in the background, does not track your browsing, and does not send page content to external servers. Your copy history is stored locally on your device. If you sign in, it syncs across your browsers so your history follows you. When you sign in, Hexly stores your account details and records feature usage events tied to your account, so we can understand how the extension is used and improve it. This data is stored on our backend and is never sold or shared with third parties. FORMATS SUPPORTED Colors: plain hex, CSS variables, Tailwind config Typography: CSS block, Tailwind arbitrary-value classes Assets: direct download, clipboard copy, raw SVG markup Inspect: CSS block, Tailwind arbitrary-value classes per section