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)
Tipps
- Klicke 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 du für Text, Hintergrund und Rahmen in einer Oberfläche konsistente Farbtöne brauchst.
- Bei der Farbwahl unsicher? Die 16 Standard-Webfarben als Ausgangspunkt ergeben meist eine gut lesbare, kontrastreiche Palette.
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.