Hexly - Color Picker, Font & CSS Inspector

Extract and inspect colors, fonts & CSS from any website. Color picker, Tailwind, CSS variables — no DevTools needed.

Hexly is a designer's browser tool for extracting colors, typography, and element styles from any website, instantly, with no account required. Open Hexly on any page and instantly scan the site and surface everything you need: the full color palette, every typeface in use, and the ability to inspect any element's CSS properties down to the box model. No account required. No page content leaves your device. Anonymous usage analytics are collected to help improve Hexly. --- 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, with brand and accent colors surfacing 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 icon 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 code instantly. Perfect for grabbing colors that aren't in the extracted palette like gradients, images, canvas elements, and more. --- TYPOGRAPHY TAB Hexly identifies every typeface used 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, which 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 element 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. Each pinned card shows the complete type specs and lets you copy as CSS or Tailwind directly. --- 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 three 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, just 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. --- WHO IT'S FOR Hexly is built for designers and developers who reverse-engineer websites as part of their workflow. Whether you're auditing a competitor's design system, pulling brand colors for a client project, checking typography consistency, or just curious how a site is built. It works on any website. No setup, no login, no extension permissions beyond what's needed to read the current tab. --- PRIVACY Hexly collects no personal data. The extension 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 any page content to external servers. Anonymous usage analytics are collected via Google Analytics to help improve the product. This includes basic interaction events (tabs opened, copy actions used) with no personally identifiable information. A randomly generated anonymous ID is stored locally to count sessions, it is never linked to your identity or browsing history. --- FORMATS SUPPORTED Colors: Plain hex, CSS variables, Tailwind config Typography: CSS block, Tailwind arbitrary-value classes Inspect: CSS block, Tailwind arbitrary-value classes per section --- NO ACCOUNT REQUIRED. NO PAYWALL. FREE TO USE.