What Style Information Can Stylify Me Extract from a Website?
Updated
Stylify Me extracts a site's visual style guide into a single overview: background colours, text colours (both as HEX values), typography for headings and body text, and image dimensions. It is aimed at designers who need a fast read on another site's palette and type system without digging through CSS. The output is a reference snapshot, not an export of the underlying stylesheets.
Colours
The tool reports two colour groups, each listed as HEX codes:
- Background Colours — the background values it finds on the page, shown as a row of HEX swatches.
- Text Colours — the text colour values, also shown as HEX swatches.
Because the values are given as HEX, you can paste them straight into a design tool or a CSS variable. What you get is the set of colours in use, not a mapping of which colour applies to which element — that pairing comes from the typography section and from inspecting the page yourself.
Typography
This is the most detailed part of the output. For each text level, Stylify Me lists Font, Style, Size, Leading, Colour, and renders a sample line so you can see it in context.
| Level | Reported attributes |
|---|---|
| Header 1 – Header 6 | Font, Style, Size, Leading, Colour |
| Body | Font, Style, Size, Leading, Colour |
Each heading level is shown with the sample sentence "The quick brown fox jumps over the lazy dog…", and the body entry uses lorem ipsum placeholder text. That means you can read the type scale directly — how H1 compares to H2, and how headings compare to body — rather than guessing from a screenshot.
Image Dimensions
The Image Dimensions section lists image sizes in pixels, shown in the format 00 x 00 px. This gives you the rendered width and height of images on the page, useful for understanding layout proportions and the sizes a site actually serves.
Page structure
The output is organised by page, with Homepage appearing as a section heading. So the style guide is scoped to the page being analysed rather than being a site-wide crawl — if you need other pages, you would run the tool against those URLs.
Practical notes
- The overview is built for quick orientation: colours, type, and image sizes in one view.
- Version 3.0 of the tool is credited to Annabelle Yoon and Michael Mrowetz.
- The site shows a "Buy us a beer" link, and PayPal appears as a payment platform — treat that as a voluntary support option, not a statement about the tool's pricing or access terms.
If your goal is to match a site's palette and type scale in a new design, the HEX values and the Font/Size/Leading rows are the parts to copy first. If you need to know exactly which element uses which colour, use this overview as a starting point and confirm against the page itself.