# CSS DNA

> CSS DNA is a free browser extension (Chrome, Edge, Brave, Arc; Firefox build available) that inspects CSS and extracts any website's design tokens — colors, fonts, type scale, spacing, shadows and gradients — then exports them to Tailwind (v3 config or v4 @theme), CSS variables, SCSS, JSON, Figma / W3C design tokens, or an AI-ready DESIGN.md brief. It runs 100% on-device: no account, no analytics, no data leaves the browser.

Key facts:
- Free tier: click-to-copy element CSS, eyedropper, ranked color palette, full design-system preview.
- Pro ($5/month, 7-day free trial, unlocked with a license key — no sign-up): token exports (Tailwind, CSS, JSON, SCSS, Figma), AI / DESIGN.md brief, component capture (HTML + CSS, Tailwind classes, or JSX), CSS health audit, contrast auto-fix, and side-by-side comparison of two sites.
- Accessibility: reports both WCAG 2 contrast ratios (AA/AAA) and APCA Lc scores (WCAG 3 draft model), including a palette-vs-palette contrast grid.
- Color tooling: HEX / RGB / HSL / OKLCH conversion, 50–950 OKLCH tonal scales, near-duplicate (drift) detection.
- Works without DevTools by reading live computed styles, so it handles minified CSS and framework-generated class names.

## Pages

- [Home](https://cssdna.com/): Product overview, features, pricing, FAQ.
- [Privacy Policy](https://cssdna.com/privacy): No data collection; processing happens on-device.
- [Chrome Web Store listing](https://chromewebstore.google.com/detail/css-dna-%E2%80%94-inspect-css-ext/lonfnaloekjpfgkjbjlaiephjaamikkd): Install CSS DNA.

## Guides

- [What CSS Framework Is This Site Using?](https://cssdna.com/blog/what-css-framework-is-this-site-using/): Class-name fingerprints for fifteen frameworks — Tailwind, Bootstrap 4 vs 5, Bulma, MUI, Ant Design, Chakra, styled-components, Emotion, CSS Modules, shadcn/ui and hand-written BEM — the Tailwind v3-vs-v4 tell (v4 declares @layer theme and publishes its palette as OKLCH custom properties), a paste-in detector, a page-wide scoring snippet, and the four cases where class names reveal nothing.
- [Modern CSS in 2026: What Actually Shipped](https://cssdna.com/blog/modern-css-2026/): Four support tiers with versions — safe everywhere (:has(), container queries, nesting, subgrid, @layer), shipped-but-recent (anchor positioning in Chrome 125 / Firefox 147 / Safari 26; @starting-style in Chrome 117 / Firefox 129 / Safari 17.5), Chromium-only (@function in Chrome and Edge 139, scroll-driven animations), and not shipped at all. Native CSS mixins (@mixin, @apply, @contents, @env) are not supported in any browser, contrary to many 2026 listicles. Baseline Widely available means 30 months after all three engines shipped a feature.
- [The CSS Specificity Graph](https://cssdna.com/blog/css-specificity-graph/): What a specificity graph is (Harry Roberts, CSS Wizardry, 2014, part of ITCSS), how to read spikes as maintainability debt, why specificity is a three-column triple compared left to right rather than a base-10 number — so eleven classes never beat one ID — the zero specificity of :where(), the most-specific-argument rule for :is()/:not()/:has(), a live specificity calculator, a console snippet that plots any page's graph, and four fixes that flatten it.
- [How to Rebuild Any Website's Design](https://cssdna.com/blog/rebuild-any-website-design/): A six-step workflow — capture the token system, read the type and spacing ratios, convert colors into roles, rebuild one component, diff against the reference, and avoid inheriting the source's CSS debt.
- [Color Contrast Checker (WCAG + APCA)](https://cssdna.com/blog/color-contrast-checker/): A free browser tool reporting the WCAG 2 ratio and the APCA Lc score for the same foreground/background pair, with pass/fail badges per threshold, a plain-language verdict when the two models disagree, and the nearest shade that clears both.
- [CSS Scan Alternatives](https://cssdna.com/blog/css-scan-alternative/): Six alternatives compared with verified pricing — CSS Scan is $120 list, $69 discounted, a one-time lifetime licence for three browser activations with a demo restricted to their own site.
- [ColorZilla Alternatives](https://cssdna.com/blog/colorzilla-alternative/): Six color pickers compared, starting with the native EyeDropper API built into Chromium browsers, and why pixel sampling returns blended values that exist in no stylesheet while computed-style extraction returns declared colors ranked by page coverage.
- [Why Every AI-Generated UI Looks the Same](https://cssdna.com/blog/why-ai-generated-uis-look-the-same/): Why unconstrained language models converge on Tailwind's indigo, Inter and a three-card grid; the origin of the indigo default; why adjective-based prompts fail; and the three-layer fix of tokens, DESIGN.md and review.
- [The Design Tokens JSON Format (tokens.json)](https://cssdna.com/blog/design-tokens-json-format/): The DTCG format at stable version 2025.10 — $value, $type, groups and inheritance, curly-brace and JSON Pointer aliases, why colors are now objects with an explicit colorSpace, file extensions, and why it is a Community Group Report rather than a W3C Recommendation.
- [How to Get Any Website's CSS Variables](https://cssdna.com/blog/css-variables-from-any-website/): Four ways to read a site's custom properties — the DevTools :root panel, a computed-style console snippet, a stylesheet walk that catches scoped theme blocks and survives cross-origin SecurityErrors, and one-click extraction.
- [CSS Peeper Alternatives](https://cssdna.com/blog/css-peeper-alternative/): Six alternatives compared — CSS DNA, CSS Scan, VisBug, CSSViewer, Chrome DevTools and font-only tools — on scope, state capture, exports, assets and price, with a stated vendor bias.
- [Best CSS Inspector Extensions for Chrome](https://cssdna.com/blog/best-css-inspector-extensions/): CSS DNA, CSS Scan, CSS Peeper, VisBug and Chrome DevTools compared on scope, state capture, export formats and privacy, with verified pricing and a stated vendor bias.
- [How to Check Color Contrast on Any Website](https://cssdna.com/blog/check-color-contrast-any-website/): WCAG 2.2 AA and AAA thresholds, APCA Lc bands, four measurement methods, and the three failures automated checkers miss — text on imagery, non-default states, and placeholder text.
- [DESIGN.md for AI Coding Agents](https://cssdna.com/blog/design-md-for-ai-coding-agents/): What a DESIGN.md is, the five parts every good one has, a complete example, and where Claude Code, Cursor, Copilot and Windsurf each look for it.
- [Hex to OKLCH](https://cssdna.com/blog/hex-to-oklch/): What the three OKLCH numbers mean, why Tailwind v4 defines its palette in oklch(), and how to build a 50–950 ramp with tapered chroma.
- [How to Copy CSS From Any Website](https://cssdna.com/blog/copy-css-from-any-website/): Five methods compared, plus the three things that break a copy-paste — unresolved custom properties, inherited values, missing layout context.
- [How to Get Any Website's Color Palette](https://cssdna.com/blog/website-color-palette/): Why screenshot sampling returns the wrong colors, how computed-style extraction differs, and detecting near-duplicate shades by ΔE in OKLab.
- [How to Extract Design Tokens from Any Website](https://cssdna.com/blog/extract-design-tokens/): Step-by-step token extraction and export workflow.
- [How to Convert Any Website to Tailwind CSS](https://cssdna.com/blog/convert-website-to-tailwind/): Producing a Tailwind v3 config or v4 @theme from any live site.
- [APCA Contrast vs WCAG 2](https://cssdna.com/blog/wcag-vs-apca-contrast/): What APCA contrast is, how the Lc algorithm computes its score step by step, the full Lc threshold table, where the two models disagree, and APCA's status in the WCAG 3 draft as of August 2026.
- [What Font Is That Website Using?](https://cssdna.com/blog/find-what-fonts-a-website-uses/): Five ways to identify a site's fonts — DevTools rendered fonts, console snippets using the Font Loading API, hover extensions, image matching for type baked into images, and whole-page type extraction with weights and the full size scale.