Farbmischer
Mischen Sie #FF0000 und #0000FF zu 50 %, entsteht #800080, ein Violett mit Rot 128, Grün 0 und Blau 128. So gewinnen Sie Markenmitteltöne und Zustandsfarben aus zwei Farben, die Sie schon haben. 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
- Erste Hex-Farbe
- #FF0000
- Zweite Hex-Farbe
- #0000FF
- Anteil
- 50
- T
- 0,5
- Hex-Code
- #800080
- RGB-Zeichenkette
- rgb(128, 0, 128)
Ein Farbmischer nimmt zwei Hex-Codes und einen Mischprozentsatz und liefert eine einzelne Farbe, die im RGB-Kanalraum zwischen beiden liegt. Designer nutzen dies, wenn sie einen Zwischenton zwischen einem Markenrot und einem tiefen Blau brauchen, wenn sie einen Hover-Zustand zu dreißig Prozent in Richtung einer Hervorhebung wollen, oder wenn sie gestufte Rampen erzeugen, ohne eine Desktop-Grafiksuite zu öffnen. Ungültige Hex-Codes scheitern mit einem klaren Fehler für ungültige Eingabe, damit Pipelines Tippfehler abfangen, bevor schlechte Farbfelder ausgeliefert werden.
Was beim Mischen zweier Farben passiert
Der Farbmischer betrachtet jede Farbe als drei Kanäle für Rot, Grün und Blau zwischen 0 und 255. Für jeden Kanal wird derselbe Anteil der zweiten Farbe genommen und der Rest von der ersten, dann wird auf eine ganze Zahl gerundet. Kurzformen mit drei Ziffern werden vorher auf sechs erweitert, sodass beide Schreibweisen für reines Rot dasselbe Ergebnis liefern. Bei 50 % liegt jeder Kanal genau in der Mitte; so wird aus Rot und Blau ein Violett.
Wann es hilft und worauf Sie achten sollten
Typische Einsätze sind Mitteltöne zwischen zwei Markenfarben, Abstufungen bei 25 %, 50 % und 75 % für ein Theme oder hellere und dunklere Zustände einer Schaltfläche. Beachten Sie, dass die Mischung kanalweise und nicht nach Wahrnehmung erfolgt: Liegen zwei Farben in der Helligkeit weit auseinander, kann die Mitte zur helleren Farbe hin verschoben wirken. Ein häufiger Fehler ist ein Tippfehler im Hexcode; er wird abgelehnt, statt eine falsche Farbe zu liefern.
So funktioniert die RGB-Mischung und die Wahl des Anteils
Senden Sie zwei Hex-Farben und einen Anteil von null bis hundert. Intern wird jede Farbe auf drei Kanäle im Bereich von null bis zweihundertfünfundfünfzig erweitert. Die dreistellige Kurzform wie Raute f null null wird auf sechs Ziffern erweitert, indem jedes Nibble verdoppelt wird, sodass Raute f null null und Raute FF0000 dasselbe reine Rot sind.
Optionale Präfixe mit Raute oder null-x werden akzeptiert und vor der Validierung entfernt. Lineares RGB ist nicht dasselbe wie ein perzeptueller Mittelpunkt in LAB oder HSL, daher können zwei Farben sehr unterschiedlicher Helligkeit zum helleren Elternteil verzerrt wirken; das ist das erwartete Verhalten dieses Produkts und entspricht der klassischen kanalweisen CSS-Interpolation, die viele Design-Skripte bereits nutzen.
Anwendungsfälle
Markenpalette-Zwischentöne
Mischen Sie ein primäres Marken-Hex mit einem sekundären bei 25 %, 50 % und 75 %, um gestufte Zwischentoken für UI-Themes und Marketing-Kits zu erzeugen.
Hover- und Zustandsfarben
Mischen Sie eine Basis-Buttonfarbe mit Weiß oder Schwarz bei kleinem Anteil, um hellere Hover- und dunklere Active-Zustände zu erzeugen, ohne jedes Feld manuell zu wählen.
Häufige Fragen
Was passiert bei einem ungültigen Hex-Code?
Beide Farben müssen 3- oder 6-stellige Hexadezimalwerte sein (optionales #). Falsche Länge oder Nicht-Hex-Ziffern werden abgelehnt und nicht berechnet.
Erfolgt die Mischung in HSL oder LAB?
Perzeptuelle Räume sind eine andere Produktabsicht; dieses Werkzeug folgt klassischen Hex-Kanalmischungen.
Welche Farbe entsteht aus Rot und Blau zu 50 %?
Es entsteht #800080, ein Violett. Jeder Kanal liegt auf halbem Weg: Rot sinkt von 255 auf 128, Blau steigt von 0 auf 128, Grün bleibt bei 0.
Was bedeutet der Mischanteil in Prozent?
Er gibt an, wie viel von der zweiten Farbe in die Mischung eingeht. Bei 0 bleibt die erste Farbe unverändert, bei 100 erhalten Sie die zweite und bei 50 die Mitte jedes Kanals.
Wie erzeuge ich damit eine Hover-Farbe?
Mischen Sie Ihre Schaltflächenfarbe mit Weiß oder Schwarz in einem kleinen Anteil. Mit Weiß entsteht ein hellerer Hover-Zustand, mit Schwarz ein dunklerer aktiver Zustand, ohne jede Farbe von Hand zu wählen.
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/mix \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#FF0000","color2":"#0000FF","ratio":50}'const res = await fetch("https://api.kit.forhosting.com/color/mix", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/mix",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/mix", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#FF0000","color2":"#0000FF","ratio":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#FF0000","color2":"#0000FF","ratio":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/mix", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.mix",
"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
Diese Fähigkeit führt eine deterministische lineare Mischung auf Rot, Grün und Blau unabhängig aus: bei Anteil null ist das Ergebnis reines color1, bei hundert reines color2, und Zwischenwerte interpolieren jeden Kanal und runden auf ganze 0–255-Schritte.
So funktioniert die RGB-Mischung und die Wahl des Anteils
Der Anteil wird als Prozentsatz von color2 in der Mischung interpretiert: Kanal gleich Rundung von color1 mal eins minus t plus color2 mal t, wobei t der Anteil geteilt durch hundert ist. Das bedeutet: Anteil null lässt color1 unberührt, Anteil hundert ergibt color2, und Anteil fünfzig liegt in linearem RGB für jeden Kanal in der Mitte. Identische Eingaben erzeugen stets identisches JSON, weil der Pfad reine Arithmetik ist — ohne Netzwerk, ohne Zufalls-Seed und ohne Wanduhr.
Antwort lesen: Hex, RGB und zurückgegebene Eingaben
Nutzen Sie hex, wenn Sie ein einzelnes Token für Style-Tokens oder Theme-Dateien brauchen; nutzen Sie rgb, wenn eine Canvas-, Diagramm-Bibliothek oder ein Barrierefreiheits-Checker getrennte Kanäle erwartet. Bei Erfolg gibt die Antwort normalisierte color1 und color2 als sechsstellige Großbuchstaben-Hex mit führender Raute zurück, den gesendeten numerischen Anteil und t als das im Lerp verwendete Einheitsintervall. Das gemischte Ergebnis erscheint auf drei Arten: hex als primäres Mischfeld, rgb als Objekt mit ganzzahligen Feldern r g und b, und rgb_string als lesbare Zeile rgb öffnende Klammer r Komma g Komma b schließende Klammer zum Einfügen in CSS oder Designnotizen. color1_rgb und color2_rgb legen die geparsten Elternkanäle offen, damit UIs beide Enden eines Verlaufs ohne erneutes Parsen zeichnen können. Die method-Kennzeichnung ist stets rgb_lerp, damit nachgelagerter Code ohne Formenschnüffeln verzweigen kann. Fehlendes color1, fehlendes color2, fehlendes ratio, ratio außerhalb von null bis hundert und jeder ungültige Hex-Code scheitern mit invalid_input und werden nach Ablehnung durch die Engine nicht berechnet. Fehlermeldungen nennen das Feld, damit API-Clients präzise Formularvalidierung anzeigen können.
API-Nutzung, Preise, Design-Workflows und praktische Grenzen
Rufen Sie den kostenlosen Farbmischer im Browser für Palette-Skizzen, Markentönungs-Experimente und schnelle Mittelmisch-Checks auf, ohne ein Design-Tool zu installieren. Nur Hex-Eingabe wird unterstützt — benannte CSS-Farben und rgb-Klammerstrings liegen außerhalb des Umfangs —, normalisieren Sie daher stromaufwärts, wenn Ihre Quelldaten Namen verwenden. Autoren, die SDKs ausliefern, können hex und rgb direkt in Farbwähler und Token-Tabellen abbilden, die Studierende und Designer bereits erwarten. Senden Sie einen JSON-Body mit den erforderlichen String-Feldern color1 und color2 sowie der erforderlichen Zahl ratio. Die Aliase hex1, hex2, a, b, from, to, percent, amount und mix werden akzeptiert, wenn dokumentiert, damit ältere Formularfelder sauber abgebildet werden. Nutzen Sie die vorausbezahlte API, wenn ein Theme-Generator, Design-System-Pipeline, E-Commerce-Swatch-Builder oder Marketing-Asset-Dienst einen stabilen Vertrag unter KIT-Guthaben zu $0.002 pro erfolgreichem Element braucht; Validierungsfehler verbrauchen nie Guthaben. Kombinieren Sie diesen Endpoint mit Hex-zu-HSL- oder Komplementärfarb-Werkzeugen, wenn der nächste Schritt eine volle Palette ist, oder mit Kontrastprüfern, wenn die gemischte Farbe WCAG gegen Text erfüllen muss.
Integrationsbeispiele
Automatisierte Theme-Pipelines
Design-System-Skripte rufen die vorausbezahlte API auf, um zwei Saatfarben zu bit-identischen JSON-Token über CI-Läufe hinweg zu verschmelzen.
Technische Fragen
Wie mische ich zwei Hex-Farben mit diesem Farbmischer?
Senden Sie JSON mit color1, color2 und ratio (0–100). Beispiel: color1 "#FF0000", color2 "#0000FF", ratio 50 liefert die RGB-Mittelmischung als Felder hex und rgb.
Was bedeutet der Anteilsprozentsatz?
Ratio ist der Prozentsatz von color2 in der Mischung. 0 behält color1 rein, 100 liefert color2 rein, und 50 ist eine gleichmäßige lineare Mischung jedes RGB-Kanals.
Ist der Farbmischer kostenlos?
Das Browser-Werkzeug läuft kostenlos auf Ihrem Gerät. API-Aufrufe nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Element; Validierungsfehler werden nicht berechnet.