Kostenloses Tool, ohne Registrierung

Farbpalette aus jeder Website extrahieren

Füge eine URL ein und erhalte die Marken-, Text-, Hintergrund- und Akzentfarben der Website mit Hex-Codes, sortiert nach Nutzung. Kostenlos, ohne Registrierung. Sieh dir vollständige Beispiele an: die DESIGN.md von Stripe und die DESIGN.md von Linear, oder erfahre, was eine DESIGN.md zusätzlich bietet.

Probier mal

Diese Palette im Code verwenden

Der Extraktor gruppiert die Farben nach Rolle (Hintergrund, Fläche, Text, Marke, Akzent und Rahmen) und sortiert sie danach, wie viel der Seite jede abdeckt. Um sie wiederzuverwenden, gib jeder Rolle einen Namen, statt Hex-Codes quer durch deine Styles zu kopieren. So aktualisiert eine einzige Änderung jede Stelle, an der die Farbe vorkommt.

1. Farben nach Rolle benennen, nicht nach Farbton. --color-text-muted ergibt auch nach einem Redesign noch Sinn; --gray-600 sagt nicht, wohin die Farbe gehört. Setz die kopierten Hex-Codes ein.

:root {
  --color-brand: #635bff;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-border: #e3e8ee;
}

body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }

2. In Tailwind verwenden. Jede Variable wird zu einer Reihe von Utilities wie bg-surface, text-ink-muted und border-line.

/* app.css, Tailwind CSS v4 */
@theme {
  --color-brand: #635bff;
  --color-ink: #0a2540;
  --color-ink-muted: #425466;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f9fc;
  --color-line: #e3e8ee;
}

3. Genutzte Farbpaare prüfen. Fließtext braucht ein Kontrastverhältnis von mindestens 4,5:1 zu seinem Hintergrund, großer Text 3:1. Der Extraktor zeigt das Verhältnis der Haupttextfarbe zum Seitenhintergrund; prüfe jedes andere Paar, das du verwenden willst, bevor du es auslieferst.

Farben sind eine Ebene eines Designsystems. Eine DESIGN.md hält sie zusammen mit Typo-Skala, Abständen und Komponentenregeln fest, damit dein Coding-Agent die richtige Farbe an der richtigen Stelle einsetzt.

FAQ

Fragen zur Farbpalette

Kurze Antworten zum kostenlosen Farbpaletten-Extraktor für Websites.

Die Seite wird in einem echten Browser geladen, und die Farben, die sie darstellt, werden danach gemessen, wie viel der Seite sie abdecken. Jede Farbe bekommt eine geschätzte Rolle: Hintergrund, Panel, Text, Marke, Akzent oder Rahmen.

Die Palette listet die Farben, die die Seite tatsächlich verwendet, sortiert nach Abdeckung und auf zwölf begrenzt. Farben in Bildern oder Videos, Farben, die nur beim Hovern erscheinen, und Farben auf anderen Seiten der Website werden nicht gezählt.

Nein. Er liest die Seite in dem Theme, das ein neuer Besucher standardmäßig sieht, meist hell. Websites, die standardmäßig dunkel sind, kommen dunkel zurück. Eine vollständige DESIGN.md deckt den Dark Mode ab, wenn die Website einen hat.

Nicht als Datei. Du kannst die Hex-Codes kopieren: Wähle ein Farbfeld für einen einzelnen Code aus oder kopiere alle auf einmal, einen pro Zeile.

Ja, jeweils einen Pixel. Klicke in Chrome oder Edge mit der rechten Maustaste auf ein Element, wähle „Untersuchen“ und klicke im Bereich „Stile“ auf das Farbquadrat neben einer Farbe; der Farbwähler hat eine Pipette, die jeden Punkt der Seite ausliest. Firefox hat dieselbe Pipette in der Symbolleiste des Inspektors.

Dieses Tool listet nur Farben auf. Eine DESIGN.md umfasst die Farben samt ihren Rollen, die Typo-Skala, die Abstände und die Komponentenregeln einer Website, in einer Datei, der dein Coding-Agent folgen kann.

Weitere kostenlose Tools

Alle kostenlosen Tools ansehen

  • DESIGN.md-Validator

    Füge eine DESIGN.md ein, um Struktur und Tokens zu prüfen und eine Vorschau zu sehen, direkt im Browser.

    DESIGN.md-Validator öffnen

Du brauchst das ganze Designsystem?

Hol dir eine DESIGN.md mit den Farben, der Typo-Skala, den Abständen und den Komponenten jeder Website, fertig für deinen Coding-Agenten.

DESIGN.md erstellen