HEX · RGB · HSL · Tailwind classes · CSS variables · Tailwind config
Extract colors fromany website
The Design System panel scans the page and lists every colour it paints — text, backgrounds, borders, gradients and shadows — deduplicated and ranked by how much it's used, with likely primary, accent and surface roles picked out for you.
Free with an account · Chrome, Edge & Brave
Open the panel
Click the palette icon on the Xtractly toolbar. The whole page is scanned in a moment.
Inspect a colour
Click a swatch for its HEX, RGB and HSL values and ready-made Tailwind background and text classes.
Export the palette
Copy the full palette as CSS custom properties or as a Tailwind config to seed your own design system.
Built for the code you actually ship
Page or selection
Scan the entire page, or pick one element to see only the colours used inside it.
Ranked by usage
Colours are deduplicated and sorted by how often they appear, so the brand palette rises to the top.
Pixel eyedropper
Need a colour from an image or a gradient? The eyedropper samples any pixel on screen.
Every format you paste
HEX, RGB, HSL and Tailwind utility classes are each one click to copy.
Frequently asked questions
Can it read colours from images?
The page scan reads colours from CSS. For colours inside images, video or canvas, use the eyedropper, which samples the actual pixel on screen.
Does it find gradient and shadow colours?
Yes. Colour stops inside gradients and box-shadows are picked up alongside text, background and border colours.
Is the colour picker free?
Yes. Colour inspection is part of the free plan; copying values needs a free account.
Works well together
Identify the fonts on any website
Learn more about identify the fonts on any websiteIdentify any font and see the page's whole type scale, exportable as CSS or Tailwind.
Convert any website to Tailwind CSS
Learn more about convert any website to Tailwind CSSGenerate Tailwind v3/v4 classes from any element, with hover and breakpoint variants.
Download every asset from any website
Learn more about download every asset from any website
Every image, SVG, video and animation on a page — copy as code or grab a .zip.
Start today for free
Upgrade when you need more — monthly, yearly, or once for life.
Join Xtractly
Free covers inspecting, capturing and 5 exports a month.
No hidden fees. Or pay once for Lifetime and skip renewals.
Clear pricing, no surprises
Billed monthly. Cancel anytime.
- Everything in Free
- Unlimited exports — code, Figma & design tokens
- Save captures to your library & edit them in Studio
- Full page export & copy
- Bookmarks
- REST API access & keys
- Unlimited Agent Bridge saves
- Every feature we ship going forward
- Priority support