Monochromer Paletten-Generator
Fünf Stufen aus #3366cc ergeben #000000, #193366, #3366cc, #99b2e6 und #ffffff, alle mit Farbton 220 und 60 % Sättigung. So bleibt Ihr Markenblau von tiefen Flächen bis zu hellen Hintergründen wirklich blau. Gratis in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Farbe
- #3366cc
- Anzahl
- 5
- Hue
- 220
- Sättigung
- 60
- Basishelligkeit
- 50
Ein Generator für monochrome Paletten nimmt eine CSS-Hex-Farbe und eine ganzzahlige Stufenzahl und liefert N Felder, die denselben Farbton und dieselbe Sättigung teilen, während die Helligkeit in gleichen Schritten von Schwarz nach Weiß wandert.
Wie eine monochrome Palette die Helligkeit stuft
Beginnen Sie mit einer CSS-Hex-Farbe wie #3366cc oder der Kurzform #36c. Der Parser entfernt Leerzeichen, setzt die Ziffern auf Kleinbuchstaben, expandiert dreistellige Codes nach der CSS-Verdoppelungsregel und wandelt jedes Paar in Rot-, Grün- und Blau-Ganzzahlen von null bis zweihundertfünfundfünfzig. Diese Kanäle werden mit den üblichen Formeln von CSS und W3C auf Farbton, Sättigung und Helligkeit abgebildet: Die Helligkeit ist der Mittelwert der maximalen und minimalen Kanalbrüche, die Sättigung hängt von dieser Helligkeit ab, und der Farbton wird in Grad um den Farbkreis gemessen, wobei achromatische Grautöne den Farbton null melden.
Für den Stufenindex i von null bis N minus eins ist die Helligkeit i mal einhundert geteilt durch N minus eins, sodass das erste Feld stets reines Schwarz bei Helligkeit null ist, das letzte stets reines Weiß bei Helligkeit einhundert, und die Zwischenstopps in der HSL-Helligkeit gleichmäßig liegen. Nach jeder neuen Helligkeit wandelt derselbe CSS-Pfad von Farbton nach RGB das HSL zurück in ganzzahlige Kanäle und einen sechsstelligen kleingeschriebenen Hex-Code.
Fünf Stufen auf einem Blau mittlerer Helligkeit ergeben daher Schwarz, ein tiefes Navy, einen Mittelton nahe dem Original, einen blassen Himmel und Weiß — alle noch mit dem ursprünglichen Farbton und der ursprünglichen Sättigung. Es gibt keine Zufallsstartwerte, keine Uhrzeitstempel und keine Netzaufrufe, sodass dieselben Eingaben stets dieselbe geordnete Palette liefern. Alpha-Hex-Formen mit vier oder acht Ziffern werden abgelehnt, weil dieser Vertrag nur opakes RGB ist.
Nichtganzzahlige Stufen oder Werte außerhalb von zwei bis einundzwanzig scheitern an der Validierung, damit Clients den erlaubten Bereich nicht still überschreiten.
Was Sie senden und was Sie zurückerhalten
Senden Sie zwei Felder: color als Hex-Zeichenkette und steps als ganze Zahl zwischen zwei und einundzwanzig einschließlich. Jedes Palettenfeld enthält index, hex, ganzzahlige r g b, Zahlen für Farbton Sättigung Helligkeit sowie druckbare rgb- und hsl-Zeichenketten. Die ursprüngliche Farbe wird stets als base zurückgegeben, damit Clients den Samen neben der Rampe anzeigen können; dieser Samen erscheint in swatches nur, wenn seine Helligkeit genau auf einem geraden Stopp landet, zum Beispiel Helligkeit fünfzig bei fünf Stufen.
Typische Prüfungen sind fünf Stufen auf #3366cc, drei Stufen auf dem kurzen Rot #f00 und die Bestätigung, dass eine Nicht-Hex-Zeichenkette die Validierung nicht besteht. Verbinden Sie das kostenlose Browser-Formular für Design-Reviews und schnelle Rampen und rufen Sie denselben Vertrag aus Skripten auf, wenn Sie Massenerzeugung von Token-Skalen brauchen. Halten Sie steps im dokumentierten Bereich, statt sich auf stilles Abschneiden zu verlassen — dieses Werkzeug scheitert laut, damit Designsysteme vorhersagbar bleiben.
Wo monochrome Paletten in der Praxis auftauchen
Produktdesigner bauen Ein-Farbton-UI-Rampen, damit ein Markenprimärton Text, Flächen, Chips und deaktivierte Zustände abdecken kann, ohne einen zweiten Farbton einzuführen, der gegen die Identität kämpfen würde. Barrierefreiheitsprüfer erkunden Begleiter einer Text- oder Icon-Farbe entlang einer Helligkeitsleiter und übergeben Kandidaten an einen Kontrastprüfer, statt Mitteltöne nach Augenmaß zu raten. Marketingteams erzeugen Kampagnenpastelle und tiefe Akzente aus einem gesättigten Logo für Social-Banner und E-Mail-Kopfzeilen und bewahren dabei die Farbtonidentität der Marke.
Frontend-Entwickler skripten monochrome Rampen in der kontinuierlichen Integration, sodass eine einzige Markenfarbe eine dokumentierte Leiter für Diagramme, Abzeichen und Sekundärknöpfe liefert. Wenn Sie später ein komplementäres Gegenüber, ein analoges Nachbarpaar, eine einhundertzwanzig-Grad-Triade oder einen einzelnen Aufhellungsschritt brauchen, behandeln Sie diese als eigene Suchintentionen und Landings, statt diese monochrome Seite zu überladen. Benannte CSS-Farben wie tomato liegen außerhalb des Umfangs; lösen Sie sie zuerst nach Hex auf.
Anwendungsfälle
UI-Flächen und Zustände in einem Farbton
Leiten Sie tiefe Flächen, mittlere Füllungen und blasse Hintergründe aus einer Primärfarbe ab und halten Sie Farbton und Sättigung stabil.
Markenkampagnen, die im Farbton bleiben
Erzeugen Sie kampagnentaugliche hellere und dunklere Felder aus einer gesättigten Logofarbe für Banner, Folien und Social-Motive.
Häufige Fragen
Wie baut dieser Generator für monochrome Paletten N Farben?
Er wandelt Hex in HSL, hält Farbton und Sättigung fest und setzt die Helligkeit auf L_i = i × 100 / (N − 1) für i von 0 bis N − 1; danach wandelt er jede Stufe zurück nach Hex und RGB. Das erste Feld ist schwarz, das letzte weiß.
Was bedeutet der Parameter steps?
Steps ist die Gesamtzahl der Palettenfelder (ganze Zahl 2–21), nicht eine Zählung auf jeder Seite der Basis. Fünf Stufen erzeugen fünf Farben bei Helligkeit 0, 25, 50, 75 und 100 Prozent.
Enthält die Palette die ursprüngliche Basisfarbe?
Die ursprüngliche Farbe wird stets als Basisfeld mit dem geparsten RGB zurückgegeben.
Welche Hex-Formate werden akzeptiert?
Drei- und sechsstelliges CSS-Hex, mit oder ohne führendes Rautenzeichen.
Warum sind die erste und die letzte Farbe immer Schwarz und Weiß?
Die Helligkeit wird gleichmäßig von 0 % bis 100 % verteilt. Die erste Stufe liegt deshalb immer bei reinem Schwarz, die letzte bei reinem Weiß; die Zwischenstufen tragen Farbton und Sättigung Ihrer Ausgangsfarbe.
Verwandte Tools
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
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/monochromatic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":5}'const res = await fetch("https://api.kit.forhosting.com/color/monochromatic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/monochromatic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/monochromatic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/monochromatic", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"color": "#3366cc",
"steps": 5
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.monochromatic",
"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
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. |
Technische Hinweise
Designer greifen zu dieser klassischen Ein-Farbton-Harmonie, wenn ein Markennavy von tiefen Flächen bis zu blassen Hintergründen Navy bleiben muss, ohne zu einem Nachbarton abzudriften, wie es ein analoges Schema täte. Das Werkzeug wandelt Hex in HSL, hält H und S fest und setzt die Helligkeit auf i mal einhundert geteilt durch N minus eins, sodass fünf Stufen bei null, fünfundzwanzig, fünfzig, fünfundsiebzig und einhundert Prozent landen. Ungültige Hex-Zeichenketten und Stufenzahlen außerhalb des erlaubten Ganzzahlbereichs scheitern mit invalid_input statt stillschweigendem Abschneiden. Kein Netz, keine Zufallsstartwerte, keine Wanduhr — dieselbe Farbe und dieselben Stufen erzeugen stets dasselbe JSON.
Wie eine monochrome Palette die Helligkeit stuft
Ein monochromes Schema dreht den Farbton nicht und mischt in RGB nicht Richtung Schwarz oder Weiß; es verändert nur den Helligkeitsprozentsatz, während Farbton und Sättigung genau die Werte der Basisfarbe bleiben.
Was Sie senden und was Sie zurückerhalten
Color akzeptiert außerdem die Aliase hex und base; steps akzeptiert count und n. Fehlende Felder, Nicht-Hex-Zeichen, falsche Längen, NaN, Infinity, Nichtganzzahlen und steps außerhalb des geschlossenen Intervalls scheitern mit invalid_input und werden nicht berechnet. Im Erfolgsfall spiegelt die Antwort die normalisierte sechsstellige Farbe und die ganze Zahl steps wider und liefert dann count gleich steps, den Basis-Farbton und die Basis-Sättigung, lightness_base aus dem ursprünglichen HSL, ein Basisfeld, das das geparste Eingabe-RGB bewahrt, ein swatches-Array vom dunkelsten zum hellsten, eine Bequemlichkeitsliste hexes und eine kurze formula-Zeichenkette. Der Preis erfolgreicher API-Aufrufe ist die veröffentlichte Basis von $0.002 pro Posten; Validierungsfehler verbrauchen kein Prepaid-Guthaben.
Wo monochrome Paletten in der Praxis auftauchen
Design-Token-Pipelines geben CSS-Variablen oder JSON-Theme-Skalen aus einem einzigen Basis-Hex aus und speichern jedes abgeleitete Feld für Flächen im Hell- und Dunkelmodus. Lehrplanautoren, die Farbharmonie unterrichten, können zeigen, dass ein monochromes Schema das Ein-Farbton-Mitglied der klassischen Familie ist, zu der auch komplementäre, analoge, triadische und tetradische Drehungen gehören — jene anderen Landings drehen den Farbton, während diese Seite nur die Helligkeit abschreitet. Da diese Fähigkeit eine reine parse-Engine ist, gilt als API-Preis die veröffentlichte Basis von $0.002 pro erfolgreichem Posten, und fehlgeschlagene Validierung wird nicht berechnet. Fehlgeschlagene Aufgaben, die invalid_input zurückgeben, werden nicht berechnet, was explorative Designskripte und Formularvalidierung günstig hält, während Lernende unvollkommene Zwischenablagewerte einfügen.
Integrationsbeispiele
Monochrome Rampen für Design-Token
Erzeugen Sie eine N-stufige Leiter vom dunkelsten zum hellsten aus einem Marken-Hex für CSS-Variablen, Theme-JSON und Mehrmarken-Systeme.
Technische Fragen
Was kostet der Generator für monochrome Paletten?
Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Anfragen nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Posten; ungültige Eingabe wird nicht berechnet.