Turn any website into a
design system.

Extract a site’s colors, type, spacing, radius, shadows & gradients — then export clean CSS variables, Tailwind, SCSS, W3C JSON tokens, or an AI-ready DESIGN.md. Right from your browser.

Add to Chrome — Free Buy Pro — $19

one-time · no subscription · 14-day refund

Other extractors 32 colors

A wall of near-identical values. You still do the work.

Stylewright 6 tokens

blue-500 #3b82f6

blue-600 #2563eb

cyan-400 #22d3ee

neutral-50 #f9fafb

neutral-300 #d1d5db

neutral-900 #111827

Merged perceptually, named like a real scale.

The difference

A real palette,
not a color dump.

Real pages use dozens of almost-identical colors — anti-aliasing, opacity layers, slightly-off brand shades. Other tools hand you all of them.

Stylewright compares colors the way your eye does — in perceptual CIELAB space using the CIEDE2000 distance metric — so near-duplicates collapse into a single token, ordered and named into a scale you can actually use.

ΔE₀₀ perceptual merging

12 source colors

merge

5 named tokens

neutral-950 #0b0e13

neutral-800 #1c232c

neutral-600 #4b5563

neutral-400 #9aa7b4

neutral-100 #e6edf3

Why it’s different

Built for output quality.

Plenty of extensions can grab colors. Stylewright is the one that gives you a clean, named, standards-correct system you can ship.

A real palette, not a color dump

Near-identical shades are merged the way the eye sees them — perceptual CIEDE2000 color science — so 30 almost-identical greys collapse into one clean token.

Clean, named scales

Type sizes become xs / sm / base / lg, spacing and radius snap to a consistent scale, one-off noise is filtered out. You get a system — blue-500, neutral-900, space-16.

Standards-correct W3C tokens

Exports the stable W3C Design Tokens (DTCG) format — real color objects and parsed shadows — that drops straight into Style Dictionary, Tokens Studio, and Figma. Plus a typed TypeScript tokens module.

Accessible by default

A built-in WCAG contrast audit rates every text-on-background pair (AA / AAA) right in the panel — and in the DESIGN.md export — so your rebuild stays accessible.

Tailwind v4 @theme + v3

Get a Tailwind v4 @theme block — in Tailwind’s native oklch color space — plus a legacy v3 config from the same extraction. Paste it in and your utilities just work.

AI prompt (DESIGN.md)

Export a ready-to-paste DESIGN.md — tokens, CSS variables, and instructions — and hand your whole design system to Claude Code, Cursor, or Copilot.

Element inspect

Not rebuilding the whole page? Click any element and copy its exact CSS — free, no license needed.

100% local — pages never leave your browser No analytics, no tracking Works on pages behind a login

Exports

The format your stack already speaks.

One extraction, six ways out. CSS is free — Tailwind, SCSS, W3C tokens, and the AI DESIGN.md brief are Pro.

tokens.css

/* Design tokens extracted from getstylewright.web.app · Stylewright */
:root {
 
  /* Color */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-neutral-50: #f9fafb;
  --color-neutral-500: #6b7280;
  --color-neutral-900: #111827;
 
  /* Font size */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-2xl: 1.5rem;
 
  /* Spacing */
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
 
  /* Radius */
  --radius-8: 0.5rem;
}

theme.css

/* Design tokens extracted from getstylewright.web.app · Stylewright */
@theme {
  --color-blue-500: oklch(62.3% 0.188 259.8);
  --color-blue-600: oklch(54.6% 0.215 262.9);
  --color-neutral-50: oklch(98.5% 0.002 247.8);
  --color-neutral-900: oklch(21% 0.032 264.7);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --spacing-16: 1rem;
  --radius-8: 0.5rem;
  --shadow-1: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        "blue-500": "#3b82f6",
        "neutral-900": "#111827"
      },
      fontSize: { "base": "1rem", "lg": "1.125rem" },
      spacing: { "16": "1rem", "24": "1.5rem" },
      borderRadius: { "8": "0.5rem" }
    }
  }
};

_tokens.scss

// Design tokens extracted from getstylewright.web.app · Stylewright
 
// Color
$color-blue-500: #3b82f6;
$color-neutral-900: #111827;
 
// Font size
$text-base: 1rem;
$text-lg: 1.125rem;
 
// Spacing
$space-16: 1rem;

design.tokens.json

{
  "color": {
    "blue-500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.2314, 0.5098, 0.9647],
        "alpha": 1,
        "hex": "#3b82f6"
      }
    }
  },
  "spacing": {
    "space-16": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } }
  }
}

tokens.ts

/* Design tokens extracted from getstylewright.web.app · Stylewright */
 
export const colors = {
  "blue-500": "#3b82f6",
  "blue-600": "#2563eb",
  "neutral-50": "#f9fafb",
  "neutral-900": "#111827",
} as const;
 
export const spacing = {
  "space-16": "1rem",
  "space-24": "1.5rem",
} as const;
 
export type ColorToken = keyof typeof colors;

DESIGN.md

# Design System — getstylewright.web.app
 
Extracted with Stylewright. Use the tokens below as the single
source of truth when rebuilding or theming this UI.
 
## Colors
| Token | Hex | Roles | Uses |
| --- | --- | --- | --- |
| `blue-500` | `#3b82f6` | background | 45 |
| `neutral-900` | `#111827` | text | 80 |
 
## Instructions
- Treat the colors, type scale, spacing, and radius as the tokens.
- Reuse the named tokens instead of inventing new values.

How it works

Three clicks to a design system.

Open any site

Click the Stylewright icon on any page. A side panel opens — no setup, no account.

getstylewright.web.app

Extract

See the merged palette, type scale, spacing, radius, shadows & gradients — instantly.

Export

Copy CSS, Tailwind, SCSS, W3C tokens or DESIGN.md — or inspect a single element.

:root {

--color-blue-500: #3b82f6;

--space-16: 1rem;

}

Pricing

Pay once. Own it.

No subscription, no seats, no nonsense. Try it free, upgrade when you need the exports.

Free

$0 forever

Everything you need to peek and grab CSS.

Element inspect → copy any element’s CSS
View the full palette, type & spacing
WCAG contrast audit (AA / AAA)
Export CSS variables

Add to Chrome

Pro

$19 one-time · no subscription

The full design-system toolkit. Pay once, own it.

Everything in Free
Tailwind v4 @theme (oklch) + v3 config
SCSS variables
W3C JSON design tokens
TypeScript typed tokens
AI prompt (DESIGN.md) export

Buy Pro — $19

14-day refund · Lemon Squeezy is the Merchant of Record (handles VAT & receipts) · Seller: Zeynep Nur Asker

FAQ

Good questions.

Still curious? Email tezaapps@gmail.com.

What makes Stylewright better than the free extractors?

Output quality. Most tools dump every color they find; Stylewright merges near-identical shades in perceptual color space (CIEDE2000) and names everything like a real scale (blue-500, neutral-900, text-lg, space-16) — a clean, usable system instead of a value dump. It also emits standards-correct W3C tokens, Tailwind v4 @theme in oklch (and v3), typed TypeScript tokens, a free WCAG contrast audit, and a ready-to-paste AI design brief.

Does it check color contrast / accessibility?

Yes — a free WCAG contrast audit rates the text-on-background pairs it extracts as AA / AAA right in the panel, and writes the results into the DESIGN.md export so the contrast story travels with your tokens.

How is it different from CSS Scan or CSS Peeper?

Those mostly give you one element’s CSS or a flat color list. Stylewright extracts the whole page as a themeable system — named scales you can drop straight into Tailwind or a token pipeline — for a one-time price instead of a high fee or a subscription.

Is it free?

Yes — the free tier covers element-inspect CSS copy, viewing the full palette / type / spacing, and exporting CSS variables. Pro unlocks the Tailwind (v4 + v3), SCSS, W3C JSON token, and AI DESIGN.md exports.

How much is Pro, and is it a subscription?

Pro is a one-time $19 payment — no subscription. You own it. There’s a 14-day refund if it’s not for you.

It can read all sites — does it send my pages anywhere?

No. The extension needs page access to read styles from whatever site you point it at, but all analysis happens on your device — the styles it reads never leave your browser. There are no analytics and no servers receiving page data. The only network call is validating your Pro license key with Lemon Squeezy.

Which browsers does it work in?

Chrome and other Chromium browsers (Edge, Brave, Arc). A Firefox build is planned.

How do I activate Pro after buying?

After checkout you’ll receive a license key by email. Open the extension → Export tab → click a Pro format → paste your key → Activate. One license covers up to 2 devices, and you can move it between machines by deactivating one.

Turn your next reference site into a design system.

Free to try. $19 one-time for the full export toolkit.