Softonic

Material Design Farbpicker

Schritt 1 / 3 Farbfamilie auswählen

Feste Material-Design-Palette von 2014 (Material Design 2). Material 3 verwendet stattdessen erzeugte Tonpaletten.

Farbfamilie auswählen

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Die Material Design Palette definiert 19 Farbfamilien, Rot, Pink, Lila bis Grau und Blau-Grau, jede mit einem Verlauf von Farbton 50 (blass) bis 900 (nahe Schwarz), plus optionale Akzenttöne A100–A700. Dieser Picker zeigt jede Farbpalette in einem Raster an und ermöglicht es Ihnen, jeden Wert als HEX, RGB, HSL oder Material-Token-Namen für die Verwendung in Tailwind, CSS-Variablen, iOS UIColor oder Android-Farben zu kopieren.

So verwenden Sie die Palette

  1. 1

    Raster scannen

    Familien laufen links; Farbtöne laufen oben von 50 bis 900.

  2. 2

    Tippen Sie auf eine Farbpalette

    Sehen Sie HEX, RGB, HSL und den kanonischen Material-Token-Namen (z.B. Indigo 500).

  3. 3

    Kopieren Sie das benötigte Format

    Ein Klick kopiert den genauen String: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Kontrast überprüfen

    Das Panel zeigt das WCAG-Kontrastverhältnis gegen Weiß und Schwarz an, um zugängliche Textfarben auszuwählen.

Die Farbtonleiter

Farbton Verwendung
50 Hover-Hintergründe, blasse Oberflächen
100 Chip-Hintergründe, schwach betonte Füllungen
200 Deaktivierte Zustände, sekundäre Oberflächen
300 Ränder, Trennlinien
400 Sekundärtext auf hellen Hintergründen
500 Standard-/Primärfarbe, die Basis
600 Interaktive Zustände (Hover, gedrückt)
700 Überschriften, starke Betonung
800 Dunkler Text auf hellen Hintergründen
900 Höchstes Kontrastelement (nahe Schwarz)
A100 Heller Akzent
A200 Heller als der Standard-Akzent
A400 Akzent (oft das “helle” Marken-Highlight)
A700 Tiefer Akzent

Familien in der Materialpalette

Rot, Pink, Lila, Dunkel-Lila, Indigo, Blau, Hellblau, Cyan, Teal, Grün, Hellgrün, Limette, Gelb, Bernstein, Orange, Dunkel-Orange, Braun, Grau, Blau-Grau.

Braun, Grau und Blau-Grau haben keine Akzenttöne, sie sind die neutralen Familien.

Auswahl einer Primärfarbe

Die Spezifikation schlägt 500 als Primärfarbe, 700 für die dunklere Variante (verwendet in der Statusleiste auf Android) und einen A200 oder A400 Akzent für sekundäre Aktionen vor. Dies ist eine Konvention, keine Regel, modernes Material 3 (dynamische Farbe) leitet Paletten von einer einzigen Grundfarbe ab, anstatt aus festen Abstufungen auszuwählen.

Zugänglichkeitsprüfungspunkt

  • Fließtext: Kontrastverhältnis ≥ 4.5:1 gegen seinen Hintergrund (WCAG AA).
  • Großer Text (18 pt+ fett oder 24 pt+ normal): ≥ 3:1.
  • UI-Komponenten und grafische Objekte: ≥ 3:1.

Die Palette ist nicht standardmäßig kontrastsicher. Gelb 500 auf Weiß fällt bei WCAG stark durch. Überprüfen Sie immer das Verhältnis, bevor Sie eine Kombination veröffentlichen, der Picker zeigt es inline an.

Unterstützte Formate

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (moderne Syntax) oder rgb(63, 81, 181) (veraltet).
  • HSL: hsl(231 48% 48%).
  • Material-Token: Indigo 500, praktisch für Entwurfsdokumente und Figma.
  • Tailwind: indigo-500, direkt in ein Klassenattribut einfügen, wenn Ihr Tailwind-Thema die Material-Skala verwendet.
  • Android-Farb-XML: <color name="indigo_500">#FF3F51B5</color>, ARGB-Format.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Häufig gestellte Fragen

Dieses Werkzeug bildet Googles feste Material-Design-Palette von 2014 ab, die später auf der Material-Design-2-Website dokumentiert wurde. Es erzeugt keine Material-3-Tonpaletten aus einer Ausgangsfarbe. Verwende es für die klassischen nummerierten Farbstufen und Akzentfarben.

Braun, Grau und Blau-Grau sind neutral und nehmen nicht an Akzentfarbkombinationen teil. Die Spezifikation lässt A100–A700 einfach für sie weg.

Die Standardpalette von Tailwind ist inspiriert von Material, aber nicht identisch. Wenn Sie exakte Materialfarben möchten, erweitern Sie theme.extend.colors mit den Materialwerten und verweisen Sie darauf als material-indigo-500 in Ihren Klassennamen.

Die Konvention sagt ja, aber nichts hindert Sie daran, 700 oder einen Akzent als primär zu verwenden. Die 500-Konvention dient dazu, einen zuverlässigen Basisfarbton mit 8 Abstufungen in jede Richtung für Variation zu haben.

Verwandte Tools

Graffiti-Generator

Erstelle Graffiti-Schrift mit Tag-, Bubble-, Block-, Stencil-, Neon- und Wild-Effekten. Passe Farben an und exportiere PNG oder SVG direkt im Browser.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Favicon-Generator für Initialen und Emojis

Erstellen Sie ein Favicon aus ein oder zwei Initialen oder einem Emoji. Wählen Sie Form und Hintergrundfarbe; bei Initialen können Sie zusätzlich Zeichenfarbe und Schriftstil anpassen.

QR-Code-Generator

Erstellen Sie einen QR-Code lokal im Browser aus URL, Klartext oder einer korrekt formatierten QR-Nutzlast und laden Sie ihn als PNG herunter.

Barcode-Generator

Erstellen Sie im Browser 1D-Barcodes in Code 128, EAN, UPC, ITF-14 und weiteren unterstützten Formaten und laden Sie SVG oder PNG herunter.

Fotoeditor

Browser-basierter Fotoeditor mit Zuschneiden, Drehen, Helligkeit, Kontrast, Sättigung, Filtern, Textüberlagerung und Export nach JPG, PNG oder WebP.