ForHosting KIT · Entwickler-Tools

Material-Design-Farbpalette erstellen

Wandeln Sie eine Hexadezimalfarbe in eine vollständige Material-Design-Farbskala für Benutzeroberflächen, Design-Tokens, Prototypen und Dokumentationen um.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Der Generator behält Ihre Farbe auf Stufe 500 bei und berechnet die hellen Stufen 50 bis 400 sowie die dunklen Stufen 600 bis 900. Jedes Ergebnis wird als großgeschriebener #RRGGBB-Wert ausgegeben und lässt sich direkt in CSS, eine Theme-Datei oder eine Token-Pipeline übernehmen. Die Berechnung erfolgt sofort, reproduzierbar und ohne Netzwerkdienst oder subjektive Farbauswahl.

Beginnen Sie mit einer verlässlichen Basisfarbe

Geben Sie eine sechsstellige Hexadezimalfarbe mit vorangestelltem Doppelkreuz ein, etwa #3F51B5. Dieser Wert wird zur Stufe 500 und bildet den visuellen Anker der erzeugten Skala. Ein strenges Eingabeformat verhindert Mehrdeutigkeiten zwischen Kurzschreibweisen, Werten mit Alphakanal und Hexadezimalangaben ohne Doppelkreuz. Überlegen Sie vor der Auswahl, wo die Basisfarbe am häufigsten erscheint. Eine Markenakzentfarbe für Schaltflächen benötigt möglicherweise ausreichenden Kontrast auf hellen und dunklen Flächen, während sich eine dekorative Diagrammfarbe vor allem von benachbarten Datenreihen abheben muss. Der Generator verändert den Anker nicht unbemerkt, um Kontrastziele zu erfüllen; die unveränderte Stufe 500 hält die Palette nachvollziehbar mit Ihrer Auswahl verbunden. Niedrigere Nummern werden schrittweise heller, höhere Nummern dunkler. Die Ausgabe verwendet sechsstellige Großschreibung und kann ohne weitere Normalisierung in CSS-Eigenschaften, JSON-Token-Dateien, Komponenten-Themes oder Dokumentationen übernommen werden. Ungültige Zeichenfolgen werden abgelehnt und weder erraten noch teilweise ausgewertet.

So entsteht die Abstufung

Die Palette verwendet die bekannten Material-Stufen 50, 100, 200, 300, 400, 500, 600, 700, 800 und 900. Stufe 500 entspricht exakt der übermittelten Basis. Für die helle Seite wird jeder rote, grüne und blaue Kanal in festen Anteilen mit Weiß gemischt; Stufe 50 erhält die stärkste Aufhellung. Für die dunkle Seite werden dieselben Kanäle mit Schwarz gemischt, wobei Stufe 900 am stärksten abgedunkelt wird. Jeder Kanal wird auf die nächste ganze Zahl gerundet und wieder hexadezimal dargestellt. Durch die feste RGB-Interpolation bleibt der Algorithmus transparent und deterministisch: Dieselbe Eingabe erzeugt stets dieselben zehn Werte in derselben Reihenfolge. Zudem entstehen keine verborgenen Abhängigkeiten von Bildschirmprofilen, Farbverwaltung des Browsers, Netzwerk-API oder wechselnden Vorgaben einer Designsoftware. Das Ergebnis ist eine praktische Farbfamilie im Material-Stil, jedoch keine Zusage identischer wahrgenommener Helligkeitsabstände. Das menschliche Sehen reagiert je nach Farbton unterschiedlich. Nutzen Sie die Ausgabe bei strengen Wahrnehmungsanforderungen als stabilen Ausgangspunkt und beurteilen Sie sie anschließend im tatsächlichen Anwendungskontext.

Setzen Sie die Palette barrierebewusst ein

Ordnen Sie die ausgegebenen Werte semantischen Tokens zu, statt Stufennummern über die gesamte Anwendung zu verteilen. Ein Theme kann beispielsweise eine Stufe für interaktive Hintergründe, eine weitere für den Hover-Zustand und einen helleren Wert für ausgewählte Flächen festlegen. Eine zentrale Zuordnung in einer Token-Schicht ermöglicht Anpassungen des visuellen Systems, ohne jede Komponente einzeln zu bearbeiten. Prüfen Sie Vorder- und Hintergrundkombinationen immer mit der tatsächlich eingesetzten Schriftgröße und -stärke. Eine Stufenbezeichnung garantiert kein bestimmtes Kontrastverhältnis; verschiedene Basisfarben können auf derselben Stufe sehr unterschiedliche Ergebnisse für die Barrierefreiheit liefern. Untersuchen Sie Fokusmarkierungen, deaktivierte Bedienelemente, Datenvisualisierungen, Dunkelmodus und Einstellungen für hohen Kontrast getrennt. Die generierte Palette beschleunigt die Erkundung durch schlüssige Kandidaten, doch die endgültige Auswahl muss weiterhin Kontext und Bedeutung berücksichtigen. Verwenden Sie Farbe niemals als einziges Signal für Fehler oder Zustände. Dokumentieren Sie beim Austausch zwischen Design und Entwicklung die ursprüngliche Basis zusammen mit den erzeugten Werten, damit spätere Änderungen reproduzierbar bleiben.

Anwendungsfälle

Oberflächen-Tokens erstellen

Wandeln Sie eine freigegebene Markenfarbe in eine vorhersehbare Skala mit zehn Stufen für Komponentenzustände und Flächen um.

Ein Material-Theme entwerfen

Erzeugen Sie kopierfertige Hexadezimalwerte, bevor Sie Haupt-, Hover- und Auswahlzustände festlegen.

Die technische Übergabe vereinheitlichen

Teilen Sie eine reproduzierbare, JSON-taugliche Palette statt ungenau benannter Farbmuster.

Häufige Fragen

Welches Eingabeformat wird akzeptiert?

Verwenden Sie genau ein Doppelkreuz und sechs Hexadezimalziffern, beispielsweise #3F51B5. Dreistellige Kurzformen, Alphakanäle und Werte ohne Doppelkreuz werden abgelehnt.

Welche Stufe enthält die ursprüngliche Farbe?

Stufe 500 ist die normalisierte, großgeschriebene Form Ihrer Ausgangsfarbe. Der Generator verändert sie nicht.

Wie werden helle und dunkle Stufen berechnet?

Die RGB-Kanäle werden in festen Anteilen für 50 bis 400 mit Weiß und für 600 bis 900 mit Schwarz gemischt.

Garantiert eine erzeugte Farbe barrierefreien Kontrast?

Nein. Der Kontrast hängt von Vordergrund, Hintergrund, Schriftgröße und -stärke ab; prüfen Sie jede vorgesehene Kombination.

Was kostet eine API-Anfrage?

Jede API-Anfrage kostet $0.002. Die Browserversion führt dieselbe deterministische Berechnung lokal aus.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/color/material-palette-generate

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/color/material-palette-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base_color":"#3F51B5"}'

const res = await fetch("https://api.kit.forhosting.com/color/material-palette-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "base_color": "#3F51B5"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/material-palette-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "base_color": "#3F51B5"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/material-palette-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"base_color":"#3F51B5"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"base_color":"#3F51B5"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/material-palette-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "base_color": "#3F51B5"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.material_palette_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →