Die Farbpalette jeder Website holen
Dir gefällt, wie eine Seite aussieht, und du willst ihre Farben. Hier drei Wege dorthin, vom gründlichen bis zum schnellen.
Video abspielen1. Chromes CSS-Übersicht
Öffne die DevTools (F12), dann über „Weitere Tools“ das Panel „CSS-Übersicht“, und erstelle eine Übersicht. Sie listet jede Farbe, die das CSS der Seite nutzt, getrennt nach Hintergrund, Text, Füllung und Rahmen.
Vollständig, aber lang: Eine typische Seite hat Dutzende Farben, viele davon nur einmal genutzt, und nichts sagt dir, welche das Design tragen.
2. Ein Screenshot und ein Palettengenerator
Mach einen Screenshot und zieh ihn in ein Paletten-Tool für Bilder. Du bekommst die Farben der Pixel, also auch Fotos, Schatten und die Unschärfe um Text, statt der Farben, aus denen das Design besteht.
3. Ein Klick mit Pigmo
Klick auf das Pigmo-Symbol, dann auf „Palette dieser Seite holen“. Pigmo liest die Farben der Elemente der Seite, etwa Hintergründe, Text, Rahmen und Icons, fasst gleich aussehende Farben zusammen und zeigt bis zu acht, sortiert von der meistgenutzten zur seltensten. Zu jeder steht, wo sie vorkommt, etwa im Kopfbereich oder auf Buttons.
Klick auf ein Farbfeld, um es als HEX, RGB oder HSL zu kopieren. Mit Pro speicherst du die Palette unter einem Namen und exportierst sie als CSS-Variablen, Tailwind-Theme, JSON oder PNG.
Von der Palette zum Code
Eine Palette nützt erst, wenn sie im Projekt ist. Mit Pro exportierst du eine gespeicherte Palette in vier Formen: CSS-Variablen für jedes Stylesheet, einen Tailwind-Theme-Block, JSON für Skripte und Design-Tokens oder ein PNG fürs Moodboard oder den Chat.
Tipps für eine saubere Palette
- Hol die Palette auf einer Seite, die das Design zeigt, etwa der Startseite oder einer Produktseite, nicht auf einem Login-Formular oder einem Blogartikel, der fast nur Text ist.
- Bestätige erst Cookie-Banner und schließ Popups. Ihre Farben zählen sonst mit.
- Hat die Seite einen Dunkelmodus, hol die Palette in beiden. Du bekommst zwei Paletten, die zusammengehören.
- Reines Weiß und fast schwarzer Text tauchen auf fast jeder Seite auf. Die Farben danach sind meist die der Marke.
Was du wann nimmst
Die CSS-Übersicht, wenn du jede Farbe brauchst, für ein Audit oder ein Redesign. Pigmo, wenn du die paar Farben willst, die eine Seite so aussehen lassen, wie sie aussieht.