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.
1. 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 „Grab“. 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.
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.