Farbpaletten-Referenz — Standard-Webfarben & Material-Design-Farben kopieren
Eine Referenzsammlung gängiger Design-Paletten: Standard-Webfarben, das Material-Design-Farbsystem und eine Graustufen-Rampe — jede mit HEX-Code und Kopieren-Button per Klick.
Standard-Webfarben
Material-Design-Palette
Graustufen (neutrale Farben)
Was eine Farbpalette ist
Diese Seite ist eine Sammlung der im Entwurf gebräuchlichen Standardfarbpaletten, samt HEX-Codes aufgelistet. Sie fasst dreierlei zusammen: die 16 Webstandardfarben, die seit den Anfängen von CSS im Gebrauch sind, die kennzeichnenden Farben des von Google systematisierten Material-Design-Farbsystems und eine Graustufenleiter, die Weiß bis Schwarz in zehn Stufen teilt. Ein Klick auf den Code einer Farbe, die Ihnen gefällt, etwa #2196F3, kopiert ihn zum unmittelbaren Einfügen in CSS oder ein Entwurfswerkzeug.
Farben eine nach der anderen aus dem Bauch heraus zu wählen hinterlässt meist ein Durcheinander ähnlicher Töne und einen Entwurf, der nie recht zusammenfindet. Jede Farbe auf dieser Seite gehört zu einem als Ganzes entworfenen System; allein die Wahl entlang der Helligkeitsnummern von Material Design (50 bis 900) oder der Graustufen (90 % Grau, 80 % Grau und so fort) erleichtert es, ein stimmiges, in Farbton und Helligkeit ausgerichtetes Schema zusammenzustellen. Die Lehre vom Zusammenstellen der Farben – Komplementär, Analog und der Rest – erläutert der Abschnitt mit dem Glossar.
So verwenden Sie die Farbpalette
- Die zum Zweck passende Gruppe wählen Die drei Gruppen – Webstandardfarben, Material Design und Graustufen – stehen untereinander. Blättern Sie zu der Gruppe, die Ihrem Gebrauch am nächsten kommt.
- Die Farbe am Musterfeld beurteilen Jedes Musterfeld erscheint neben Farbname und HEX-Code, sodass Sie Kandidaten eingrenzen können, während Sie am Bildschirm sehen, wie sie tatsächlich wirken.
- Die Kopierschaltfläche drücken Klicken Sie auf die Kopierschaltfläche unter einer Farbe, die Ihnen gefällt, dann wandert der HEX-Code selbsttätig in die Zwischenablage.
-
In CSS oder ein Entwurfswerkzeug einfügen
Fügen Sie den kopierten HEX-Code unmittelbar in eine CSS-Eigenschaft
coloroder in die Farbauswahl von Figma, Adobe XD und Ähnlichem ein.
Tipps für die Nutzung
- Klicken Sie auf die Schaltfläche „Kopieren“ unter einem Farbfeld, um dessen HEX-Code (z. B. #F44336) sofort in die Zwischenablage zu kopieren.
- Der kopierte Code lässt sich direkt in CSS oder in Design-Tools wie Figma und Adobe XD einfügen, ohne Umformatierung.
- Material-Design-Farben werden als „Farbe + Tonwertnummer“ (z. B. Red 500) benannt — eine höhere Zahl bedeutet einen dunkleren Farbton.
- Die Graustufen-Rampe ist praktisch, wenn Sie für Text, Hintergrund und Rahmen in einer Oberfläche konsistente Farbtöne brauchen.
- Bei der Farbwahl unsicher? Die 16 Standard-Webfarben als Ausgangspunkt ergeben meist eine gut lesbare, kontrastreiche Palette.
Wann die Farbpalette hilft
Die Grundlage eines Webschemas wählen
Beim Festlegen der Grundfarbe einer ganzen Seite fügt sich die Farbtrennung von Kopfbereich, Fließtext und Schaltflächen von selbst, wenn Sie Abstufungen eines Farbtons aus einer Helligkeitsleiter von Material Design nehmen.
Zustandsfarben für Oberflächenbausteine
Bereiten Sie die Farben für den Normal-, Überfahr- und Gedrücktzustand einer Schaltfläche als verschiedene Helligkeiten desselben Farbtons vor – etwa Blue 500 bis Blue 700 –, dann drücken Sie den Zustandswechsel aus und wahren zugleich die Einheit.
Den Kontrast von Text und Hintergrund entwerfen
Wählen Sie Hintergrund- und Textfarbe aus der Graustufenleiter, ergibt die Verbindung weit auseinanderliegender Stufen die bessere Lesbarkeit. Für ein strenges Urteil lohnt ein eigenes Werkzeug zur Kontrastprüfung.
Die Farben von Folien und Diagrammen vereinheitlichen
Statt die Farben von Folien und Grafiken jedes Mal nach Gefühl zu wählen, hält das Übernehmen der Farbnamen und HEX-Codes dieser Seite als hausinterner Farbleitfaden die Farben zwischen Unterlagen beisammen.
Begriffe rund um Farbschemata
- HEX-Code
- Eine Schreibweise, die eine Farbe als sechs hexadezimale Ziffern in der Form #RRGGBB ausdrückt. Rot, Grün und Blau erhalten je zwei Ziffern; sie ist die in CSS und Entwurfswerkzeugen verbreitetste Schreibweise.
- Material Design
- Das Entwurfssystem, das Google 2014 veröffentlichte. Es systematisiert Farbpaletten mit Helligkeitsnummern von 50 bis 900 je Farbton – je größer die Nummer, desto dunkler der Ton.
- Komplementärfarben
- Eine Verbindung von Farben, die auf dem Farbkreis einander gegenüberliegen. Da sie einander hervorheben, dient sie als Weg, eine Akzentfarbe zu wählen, wenn Sie starken Kontrast wollen.
- Analoge Farben
- Eine Verbindung auf dem Farbkreis benachbarter Farben. Da der Unterschied im Farbton gering ist, gerät das Schema meist geschlossen und ruhig; es dient häufig der Wahl der Grundfarbe einer Website.
- Triadisches Schema
- Ein Verfahren, das drei Farben an Positionen verbindet, die den Farbkreis dritteln. Es ist sanfter als Komplementärfarben und lässt sich mit mehr Abwechslung leichter ausbalancieren als analoge.
- Graustufen
- Eine Folge von Stufen ohne Farbton, allein aus Hell und Dunkel von Weiß bis Schwarz. Sie dient als Grundlage, den Helligkeitsunterschied von Hintergrund und Text einzustellen und die Lesbarkeit zu sichern.
- HSL
- Eine Weise, eine Farbe über drei Größen auszudrücken: Farbton, Sättigung und Helligkeit. Gegenüber HEX eignet sie sich für anschauliche Anpassungen, etwa allein die Helligkeit bei gleichem Farbton zu verändern.
Häufig gestellte Fragen
color: #F44336;. Dieselbe Schreibweise funktioniert unverändert auch in den meisten Design-Tools und Programmiersprachen.
Übrigens – Warum Designer Farben nicht „nach Gefühl“ auswählen
Als Google 2014 „Material Design“ vorstellte, war das nicht nur ein visueller Styleguide, sondern ein vollständiges Designsystem, das Farbe, Typografie, Bewegung und Layout unter einem einheitlichen Regelwerk zusammenführen sollte. Besonders die Farbpalette wurde mit ungewöhnlicher Sorgfalt gestaltet: Jeder Farbton (Red, Blue, Green usw.) verfügt über Tonwertnummern von 50 bis 900, sodass Designer ein stimmiges Farbschema für eine ganze App entwickeln können, ohne sich allein auf ihr Gefühl zu verlassen.
Wer Farben ad hoc, eine nach der anderen, auswählt, verteilt in einer App tendenziell ähnliche, aber leicht unterschiedliche Farbtöne — das Ergebnis wirkt uneinheitlich. Die Wahl aus einer vorgefertigten, systematischen Palette hält das Farbschema dagegen kohärent und erlaubt es zudem, verschiedene Zustände eines Buttons (normal, Hover, gedrückt) ganz natürlich durch eine Verschiebung auf der Tonwertskala innerhalb desselben Farbtons auszudrücken.
Die Art, Farbe in CSS anzugeben, wurde im Lauf der Jahre mehrfach erweitert. CSS1 aus dem Jahr 1996 unterstützte nur 16 grundlegende benannte Farben und HEX-Codes. Heute lassen sich Farben auch in Farbräumen angeben, die der menschlichen Wahrnehmung näherkommen, etwa HSL, HWB und LAB. Trotzdem bleibt der HEX-Code in der Praxis mit Abstand die am weitesten verbreitete Schreibweise — er ist nach wie vor die gemeinsame Sprache von Designern und Entwicklern.