Tools

Farbpalette einer Website

Gib eine Website-Adresse ein und erhalte ihre Palette: jede Farbe mit ihrer Rolle, als Hex-Codes, CSS-Variablen, Tailwind-Theme oder JSON.

Probierstripe.com linear.app airbnb.com

stripe.com

vor 4 Tagen gemessen.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff

1#ffffff  background
2#e5edf5  surface
3#ffe0ef  surface-2
4#ffe0d1  surface-3
5#061b31  foreground
6#64748d  muted-foreground
7#533afd  primary
8#ffffff  on-primary
9#0f4d29  secondary
10#e5edf5  border

Ganze Antwortseite öffnen Designpaket öffnen

So funktioniert es

Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.

Fragen

Wie wird die Palette gemessen?

Die Website wird in einem echten Browser gerendert, und die Farben von Hintergründen, Text, Buttons, Links und Rahmen werden von der Seite gelesen, gruppiert und nach Rolle benannt (background, foreground, primary, border und so weiter). Der Akzent ist die Farbe ihrer primären Buttons und Links.

Sind die Farben des Dark Mode enthalten?

Wenn die Website ein dunkles Theme hat, wird es ebenfalls gemessen, und das CSS enthält einen Dark-Block mit den passenden Werten.

Bekomme ich die Palette auch für Tailwind oder Figma?

Das Ergebnis bietet Hex-Codes, CSS-Variablen, ein Tailwind v4 Theme und JSON. Das Designpaket enthält zusätzlich tokens.json im W3C-Format für Design-Tokens, das Style Dictionary und Figma-Plugins lesen.