Extract the exact color palette from any website

What it does

PocketUI walks the computed styles of every element on the page and extracts the real colors being used - not what's in the stylesheet, but what the browser actually renders. Backgrounds, text, borders, shadows, gradients. You get the full palette in HEX, RGB, and HSL, organized by frequency. Save palettes to folders and build a personal color library from sites you admire.

How it works

1. 1

   Open PocketUI on any website and choose "Colors & Fonts" mode

2. 2

   The extension scans every element's computed styles for color, backgroundColor, borderColor, and more

3. 3

   View the full palette sorted by frequency - deselect colors you don't need

4. 4

   Pick a folder and save the palette

5. 5

   Access saved palettes from any device on Pro, or export as code

Why designers use it

• Auto-detects every color on the page - no eyedropping one by one
• Reads computed styles so you get the actual rendered colors
• HEX, RGB, and HSL formats - copy any format with one click
• Save palettes to themed folders (e.g. "Dark UI", "Pastel Brands")
• Build a personal color library from hundreds of sites
• Export palettes as CSS variables or Tailwind config

Frequently asked questions

How does it detect colors?

The extension uses getComputedStyle() on every visible element to read the actual rendered colors - backgroundColor, color, borderColor, boxShadow, and gradient stops. This catches colors that developer tools might miss.

Does it find colors in images?

No. The extension extracts colors from CSS and computed styles, not from images. For image-based color extraction, you'd need a separate tool. PocketUI focuses on the design tokens (CSS colors) that you can directly reuse in code.

Can I export palettes as code?

Yes. On Pro and Lifetime plans, export saved palettes as CSS custom properties, Tailwind color config, or Figma color styles.

Why are some colors duplicated?

Colors are shown by how they appear in CSS. For example, "white" and "#ffffff" and "rgb(255,255,255)" are normalized to one entry. But similar-looking colors with slightly different values (e.g. #f5f5f5 vs #f4f4f4) are kept separate since they are distinct design decisions.

More features