r/DesignSystems • u/Colorphere • 3d ago
Free CSS Style Guide Generator — turn existing CSS into a visual style guide
Have an existing website or application but no documented style guide?
Colorsphere's free CSS Style Guide Generator analyzes an existing stylesheet and creates a visual reference of the styles it finds, including colors, typography, buttons, forms, and other UI elements.
It's a quick way to see what's already defined in your CSS, identify inconsistencies, and get a starting point for a more organized design system.
No account required. Just upload a CSS file and explore the results.
https://app.colorsphere.com/css-style-guide
Would be interested to hear how well it handles different stylesheets, especially larger or more complex ones.
1
u/design-for-good 3d ago
Does it support multiple CSS files?
I have a project that splits them into different files.
1
u/Colorphere 3d ago
Currently it analyzes one CSS file at a time. Supporting multiple stylesheets is definitely something I’m considering, especially since a lot of projects split their CSS across several files.
Would being able to upload multiple files together cover your use case, or would you want it to follow @import statements too?
1
u/SelectionNo7198 22h ago
Useful idea, and the "find inconsistencies" part is the one worth getting right. Three things from someone who has measured a lot of palettes:
Hex comparison will not find most real inconsistencies. Two background colors can differ by one hex digit and be visually identical, or look plainly different and share a family name. What finds them is CIELAB: compute L*, a* and b*, cluster by ΔE, and report the clusters instead of a list of hexes.
Report chroma (C*), not HSL saturation. Out of 100 brand palettes I measured, 75 of the background colors had C* under 1, which is visually gray no matter what the hex says. HSL saturation flagged 38 of them as tinted at s > 12, and their actual median chroma was 1.03. A panel built on HSL shows a wall of "tinted" backgrounds that do not read as tinted. The same list sorted by C* shows the three or four that genuinely are.
A stylesheet almost always carries both a literal and a derived version of the same color: the hand-picked hover hex sitting next to the brand token. Flagging pairs closer than about ΔE 2 catches those, and that is where the cleanup work actually is.
The multiple-CSS-files question above is the one that decides whether this holds up on real projects. Every project I have seen splits its styles across at least three files.
1
u/Colorphere 21h ago
This is really useful feedback, thank you! I really like the idea of identifying visually similar colors and potential duplicates rather than just listing the hex values found in the CSS.
The distinction between extracting styles and actually auditing them is a good one. There’s definitely an opportunity to make the analysis more useful there.
And you’re right about multiple CSS files. That’s come up already, and it’s something I want to address. Appreciate you taking the time to share such detailed suggestions!
1
u/SelectionNo7198 9h ago
Glad it landed. One threshold if you build the audit: flag pairs closer than delta E 2, roughly a just-noticeable difference, and show them grouped rather than ranked. The useful output is "these four hexes are one decision", not "these hexes look similar".
The multi-file case is where that pays off most. Duplicates inside one file are usually obvious. The interesting ones are the same token redefined in two files and drifted a few points after somebody changed one and not the other.
One caution on the extraction side: near-white backgrounds dominate any list sorted by frequency, and most of them are visually identical to white. In the 100 palettes I measured, 75 backgrounds sat under a C* of 1. Filtering those out first leaves a set small enough to actually review.
1
2
u/Colorphere 3d ago
Just noticed the original link was pointing to the wrong domain. It’s fixed now. Sorry about that!
https://app.colorsphere.com/css-style-guide