Erstellen Sie eine triadische Farbpalette aus einem Hex-Farbwert
Geben Sie #336699 ein und erhalten Sie die zwei triadischen Begleiter #993366 und #669933, um 120 und 240 Grad auf dem Farbkreis gedreht. Sättigung und Helligkeit bleiben gleich, sodass die drei Farben wie eine Familie wirken. Kostenlos 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
- #336699
- Grundfarbe
- #336699
- Triadische Farben
- #993366, #669933
- Palette
- #336699, #993366, #669933
- Farbtonversätze
- 120, 240
Dieser Generator für triadische Farbpaletten nimmt einen Hex-Farbwert und berechnet die beiden Farbtöne, die auf dem Farbkreis genau 120 und 240 Grad entfernt liegen. Sättigung und Helligkeit der Ausgangsfarbe bleiben erhalten, sodass ohne Zufallsauswahl oder manuelle Berechnung eine ausgewogene Farbfamilie entsteht. Geben Sie einen üblichen drei- oder sechsstelligen Hex-Wert mit oder ohne vorangestelltes Rautezeichen ein. Das Ergebnis enthält die normalisierte Basisfarbe, beide erzeugten Begleitfarben, die vollständige Palette und die Farbtonverschiebungen. Ungültige Formate führen zu einem eindeutigen Eingabefehler; damit eignet sich das Werkzeug für interaktive Gestaltung und automatisierte Abläufe.
So wird eine triadische Palette berechnet
Eine triadische Palette besteht aus drei Farbtönen, die in einem kreisförmigen Farbmodell gleichmäßig verteilt sind. Stellen Sie sich die Eckpunkte eines gleichseitigen Dreiecks auf dem Farbkreis vor: Jeder Schritt umfasst 120 Grad. Zuerst prüft und normalisiert der Generator den eingegebenen Hex-Farbwert.
Eine dreistellige Schreibweise wird auf sechs Stellen erweitert, sodass aus #369 der Wert #336699 wird; Buchstaben werden für vorhersehbare Ergebnisse kleingeschrieben. Anschließend werden die roten, grünen und blauen Kanäle in Farbton, Sättigung und Helligkeit umgerechnet. Nur der Farbton wird gedreht: Eine Begleitfarbe erhält 120 Grad, die andere 240 Grad, wobei Winkel nach 360 Grad korrekt umlaufen.
Sättigung und Helligkeit bleiben unverändert und bewahren die allgemeine Intensität. Danach werden beide HSL-Farben wieder in sechsstellige Hex-Werte umgewandelt. Die Antwort trennt die zwei berechneten Farben von der vollständigen Palette.
Zufall, Netzwerk, Uhrzeit und gespeicherter Zustand spielen keine Rolle; gleiche Eingaben liefern stets gleiche Ergebnisse.
Die erzeugten Farben auswählen und einsetzen
Beginnen Sie mit einer Basisfarbe, die bereits einen festgelegten Zweck erfüllt, etwa als Markenprimärfarbe, Ausgangspunkt einer Illustration oder Akzent einer Benutzeroberfläche. Die drei Farben sind mathematisch ausgewogen, müssen aber nicht gleich viel Fläche einnehmen. Häufig dominiert die Basis, eine Begleitfarbe unterstützt größere Elemente und die dritte setzt kleine Hervorhebungen.
Prüfen Sie Textkontraste separat, denn Farbharmonie garantiert keine Lesbarkeit. Da alle Farben dieselbe HSL-Helligkeit behalten, kann ihre wahrgenommene Helligkeit stark abweichen, besonders bei Gelb und Blau. Verwenden Sie die Triade daher als Ausgangspunkt und erzeugen Sie hellere oder dunklere Abstufungen für Zustände und Flächen.
Bei einer grauen Eingabe bleiben auch die Begleitfarben grau, weil eine Farbe ohne Sättigung keinen sichtbaren Farbton besitzt, der gedreht werden könnte.
Zulässige Formate, Fehler und Automatisierung
Zulässig sind genau drei oder sechs Hexadezimalstellen mit optionaler Raute, beispielsweise #f06, f06, #ff0066 oder FF0066. Äußere Leerzeichen werden vor der Prüfung entfernt. CSS-Farbnamen, RGB- oder HSL-Funktionen, Hex-Werte mit Alphakanal, 0x-Präfixe, leere Zeichenfolgen, Zahlen und nicht hexadezimale Zeichen werden abgelehnt.
Diese strikten Regeln vermeiden mehrdeutige Auslegungen. Prüfen Sie anschließend Kontrast, kulturelle Bedeutung und Markenhierarchie für das endgültige Designsystem.
Anwendungsfälle
Markenakzente entwickeln
Verwandeln Sie einen bestehenden Markenfarbwert in zwei ausgewogene Akzente für Kampagnen, Illustrationen und Identitätselemente.
Farbtoken für Oberflächen erstellen
Erzeugen Sie beim Aufbau eines Themes deterministische Kandidaten für sekundäre und tertiäre Token aus einer Primärfarbe.
Farben für Diagrammreihen vorbereiten
Erstellen Sie eine erste Palette aus drei Farbtönen und prüfen Sie danach Kontrast und Barrierefreiheit der Visualisierung.
Häufige Fragen
Was ist eine triadische Farbpalette?
Sie besteht aus drei Farbtönen, die auf dem Farbkreis jeweils 120 Grad auseinanderliegen und gleichmäßig verteilt sind.
Welche Farbformate werden akzeptiert?
Verwenden Sie drei- oder sechsstellige Hex-Schreibweise mit oder ohne Raute, beispielsweise #369 oder 336699.
Warum entstehen aus Grau weitere Grautöne?
Grau hat keine Sättigung; das Drehen seines mathematischen Farbtons erzeugt daher keinen sichtbaren Farbunterschied.
Kann ich statt eines Codes einen Farbnamen wie Rot eingeben?
Nein. Akzeptiert werden nur drei- oder sechsstellige Hex-Codes, mit oder ohne Rautezeichen, etwa #f06 oder #ff0066. Farbnamen, RGB- oder HSL-Schreibweisen und Codes mit Transparenz werden mit einer klaren Meldung abgelehnt.
Warum beginnt die Palette mit meiner eigenen Farbe?
Die Basisfarbe steht normalisiert an erster Stelle, gefolgt von den beiden Begleitern bei 120 und 240 Grad. Für #336699 lautet die Palette #336699, #993366 und #669933, Ihre bestehende Farbe bleibt also unverändert.
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/triadic-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#336699"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#336699"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#336699"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#336699"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic-palette", 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": "#336699"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_palette",
"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
Die erzeugten Farben auswählen und einsetzen
Entwickler können palette direkt übernehmen oder triadic_colors lesen, wenn das bestehende Basistoken unverändert bleiben soll.
Zulässige Formate, Fehler und Automatisierung
Übergeben Sie die Basis im Feld color als JSON-Zeichenfolge. Eine erfolgreiche Antwort enthält base_color, triadic_colors, palette und hue_offsets. Die Basis wird erweitert und normalisiert; triadic_colors enthält genau die zwei erzeugten Farben; palette führt zuerst die Basis und dann die Drehungen um 120 und 240 Grad auf. Ungültige Werte erhalten den Code invalid_input statt einer geratenen Palette. Im Browser lässt sich das Ergebnis bequem erkunden; jedes erfolgreiche API-Element kostet $0.002 und verwendet denselben deterministischen Algorithmus.
Technische Fragen
Enthält das Ergebnis die Basisfarbe?
Ja. palette enthält die normalisierte Basis und beide Begleitfarben; triadic_colors enthält nur die zwei erzeugten Farben.
Was kostet ein API-Aufruf?
Jedes erfolgreich verarbeitete Element kostet $0.002. Die Browserversion führt dieselbe deterministische Berechnung lokal aus.