Extract colors from any website
Capture a site's full visual language: color palettes, image assets, SVGs, gradients, animation values, typography, and the component styles that make the interface feel finished.
Extracted palette
#635BFF
#0A2540
#00D4FF
#FF5996
#F6F9FC
SVG logo
inline vector
Hero media
bg2.jpg
Hover motion
180ms ease
bg-[#635BFF] text-[#0A2540] ease-out duration-200More than a color picker
A palette is only useful when it stays connected to the page it came from. StyleLens keeps colors, assets, motion, and code context together.
Color palettes
Collect brand, background, text, border, gradient, and accent colors with HEX, RGB, and HSL values.
Images and assets
Find the visual assets behind a page, including logos, backgrounds, product imagery, and inline SVGs.
Motion details
Inspect transitions, animation timing, easing, hover states, and repeated motion patterns.
Styles with structure
Pair extracted styles with the HTML context so the palette is tied to real components.
Extract the design system behind a real page
Open any website
Use StyleLens on the live page you want to study, from a marketing site to a product dashboard.
Select the page or element
Capture the full visual system or focus on a specific card, section, nav, form, or hero.
Export the useful parts
Copy palettes, asset references, SVGs, animation values, and Tailwind-ready style output.
Turn references into reusable implementation details.
Keep the palette, assets, motion, and computed CSS in one place before converting what you need into Tailwind-ready output.