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

linear.app

vor 4 Tagen gemessen.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111

1#08090a  background
2#101112  surface
3#1c1d1e  surface-2
4#07220a  surface-3
5#f7f8f8  foreground
6#8a8f98  muted-foreground
7#e5e5e6  primary
8#111111  on-primary
9#5e6ad2  secondary
10#1c1d1e  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.