Style Inspector Tab
The default view when opening BrowserLens is the style inspector. This tab contains color palettes and font family data.
Font List
The font list shows all the primary fonts used on a page with a preview. You can click a font to expand it and see all it's unique uses in CSS aswell as the fallback fonts.
The font list may include some fonts such as Arial or Times when they are not rendered for any visible elements on the page. This may be caused by base styles in the websites CSS or default browser styles.
Color Palette
The color palette displays all colors on a page in the HEX format (more formats coming soon). You can click a color to copy it to the clipboard.
BrowserLens extracts all color values (RGB, RGBA, HEX, HSL, HSLA) from a page and attempts to convert them to the HEX format. Values using alternative color spaces such as OKLAB are not currently supported and will be rendered 'as is' in the extension. These can still be copied but may be excluded from export files.
Gradients
The gradients list contains all the valid CSS gradients on the current page along with the raw CSS values. You can click the preview or the button next to the CSS to copy the code.
Exporting
The export button allows you to download styles and use them in a range of popular design tools. Learn more about exporting styles.