Website-Farben herausfindenDie Markenpalette, wie Besucher sie sehen.

Geben Sie die Adresse oben ein. Das Werkzeug lädt die Seite und alle Stylesheets, gleicht jede CSS-Regel mit den sichtbaren Elementen ab und zeigt die Farben nach Rolle: Hintergrund, Überschriften, Text, Links, Buttons. Für einzelne Elemente geht es auch im Browser: Rechtsklick, „Untersuchen“, dann im Reiter „Berechnet“ (englisch „Computed“) die Werte color und background-color ablesen.

Weil es nur zählt, was Besucher sehen. Viele Seiten laden Hunderte Farbwerte, etwa die Standardpaletten von Bootstrap, Tailwind oder WordPress, die kein Element benutzt. Bewertungssterne, Logos anderer Firmen, Social-Media-Symbole und Cookie-Hinweise blenden wir aus und nennen sie gesondert. Fast gleiche Töne fassen wir zusammen.

Es sind verschiedene Schreibweisen derselben Farbe. HEX (#020B60) und RGB (rgb(2 11 96)) geben die Anteile von Rot, Grün und Blau an. HSL beschreibt Farbton, Sättigung und Helligkeit. OKLCH ist neuer: Helligkeit, Buntheit und Farbton so, wie das Auge sie wahrnimmt. Tailwind CSS v4 definiert seine Farben in OKLCH. Im Export können Sie das Format wählen.

Nach WCAG 2.2, Stufe AA, braucht normaler Text mindestens 4,5 : 1 zu seinem Hintergrund, große Schrift 3 : 1. Groß heißt ab 18 Punkt (etwa 24 Pixel) oder ab 14 Punkt fett (etwa 18,7 Pixel). Für Stufe AAA gelten 7 : 1 und 4,5 : 1. Bedienelemente wie Rahmen von Eingabefeldern brauchen 3 : 1. Wir prüfen jede Schrift auf dem Hintergrund, auf dem sie tatsächlich steht, und runden dabei nie auf.

Seit dem 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es betrifft viele Produkte und Dienstleistungen für Verbraucher, darunter Online-Shops und Buchungsstrecken. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind bei Dienstleistungen ausgenommen. Ausreichende Kontraste gehören in jedem Fall dazu. Diese Einordnung ist keine Rechtsberatung.

Einzelne Farben sind in der Regel nicht geschützt. Es gibt aber Farbmarken: Unternehmen können eine Farbe für bestimmte Waren oder Dienstleistungen schützen lassen. Wer Farben, Logo und Aufbau einer fremden Marke nachahmt, riskiert Verwechslungen. Nutzen Sie fremde Paletten als Anregung, nicht als Kopie. Diese Einordnung ist keine Rechtsberatung.

Wir lesen Quelltext und Stylesheets, ohne die Seite in einem echten Browser zu zeichnen. Fotos, Videos und Logos als Bilddatei sehen wir deshalb nicht farbig, Text auf Bildern prüfen wir nicht. Farben, die erst ein Skript setzt, fehlen. Baut sich eine Seite komplett im Browser auf, werten wir ihre Stylesheets an einem typischen Seitengerüst aus und sagen das im Ergebnis. Seiten mit Bot-Schutz prüfen wir nicht, statt ein falsches Ergebnis zu zeigen.

Unter „Export“ stehen die Farben als CSS-Variablen, SCSS, Tailwind v4 (@theme), Tailwind v3 (tailwind.config.js), als Design Tokens im JSON-Format der W3C Community Group und als ASE-Datei für Illustrator, Photoshop und InDesign. Die Namen folgen der Rolle (primary, cta, text), nicht einer Nummer. Im Farbpaletten-Generator können Sie die Palette weiterentwickeln.