Vivid-Light-Mischung
Kombinieren Sie eine Basis- und eine obere Farbe wie Vivid Light: Grau #808080 unter einem helleren #C0C0C0 steigt bis #FFFFFF. Jeder Kanal wird einzeln mit Mittelgrau 128 verglichen, das ergibt kräftigen Kontrast. 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
- Basis
- #808080
- Top
- #C0C0C0
- Hex
- #FFFFFF
- RGB-Zeichenkette
- rgb(255, 255, 255)
- Modus R
- color_dodge
- Modus G
- color_dodge
Vivid Light ist ein kontrastreicher Kompositions-Mischmodus, der pro RGB-Kanal unabhängig Farbig nachbelichten oder Farbig abwedeln anwendet, gesteuert durch die obere Mischfarbe. Liegt ein oberer Kanal unter dem Mittelgrau, brennt Vivid Light: der Kontrast steigt und der Basiskanal wird abgedunkelt, als würde das Inverse der Basis durch das Doppelte des oberen Kanals geteilt. Liegt ein oberer Kanal beim Mittelgrau oder darüber, wedelt Vivid Light ab: der Basiskanal wird angehoben, als würde er durch das Doppelte des Inversen des oberen Kanals geteilt, und erzeugt knackige Lichter. Fotografen, Textur-Künstler und Theme-Pipeline-Ingenieure greifen zu Vivid Light, wenn sie dieselbe Photoshop-Vorschau aus zwei Hex-Token brauchen — Überlagerung einer Kontrastmaske, Abgleich eines Ebenenmisch-Swatchs in der kontinuierlichen Integration oder Erzeugung von Akzentfarben ohne Desktop-Editor. Diese Fähigkeit akzeptiert zwei validierte Hex-Farben, wendet eine deterministische Regel pro Kanal an und liefert den gemischten Swatch als Hex und RGB.
Wie Vivid Light pro Kanal color-burn oder color-dodge wählt
Vivid Light behandelt die obere Farbe als Kontrast-Entscheidungsfläche, nicht als Mischverhältnis. Für jeden Kanal im Bereich von null bis zweihundertfünfundfünfzig vergleichen Sie den oberen Kanal mit dem Mittelgrau (einhundertachtundzwanzig). Ist der obere Kanal streng kleiner als einhundertachtundzwanzig, läuft der color-burn-Zweig: das Doppelte des oberen Kanals wird zum Brennteiler.
Das Ergebnis ist zweihundertfünfundfünfzig minus das gerundete Produkt aus Inversbasis und zweihundertfünfundfünfzig geteilt durch diesen Teiler, danach auf den zulässigen Kanalbereich begrenzt. Ist der obere Kanal null, verschwindet der Brennteiler; das Ergebnis ist null, es sei denn der Basiskanal ist bereits weiß und bleibt weiß. Ist der obere Kanal größer oder gleich einhundertachtundzwanzig, läuft der color-dodge-Zweig: das Doppelte des Inversen des oberen Kanals wird zum Abwedelteiler.
Das Ergebnis ist das gerundete Produkt aus Basiskanal und zweihundertfünfundfünfzig geteilt durch diesen Teiler, danach begrenzt. Ist der obere Kanal weiß, verschwindet der Abwedelteiler; das Ergebnis ist weiß, es sei denn der Basiskanal ist bereits schwarz und bleibt schwarz. Obere Kanäle im Mittelgrau sitzen am Drehpunkt und lassen die meisten Basiswerte nahezu unberührt, weil die Hüllen von Brennen und Abwedeln nahe der Identität zusammentreffen.
Die Reihenfolge zählt: base und top zu tauschen ist eine andere Operation, anders als ein fünfzig-prozentiger RGB-Lerp.
Eingabevertrag, Antwortfelder und Validierungsfehler
Jeder Wert muss eine drei- oder sechsstellige Hexadezimalfarbe mit optionalem hash- oder zero-x-Präfix sein. CSS-Farbnamen und rgb-Klammerstrings liegen außerhalb des Umfangs — normalisieren Sie sie stromaufwärts. Validierungsfehler werden nicht berechnet.
Nutzen Sie Hex, wenn Sie ein einzelnes Token für Theme-Dateien brauchen; nutzen Sie rgb, wenn Zeichenflächen-Code oder Barrierefreiheits-Werkzeuge getrennte Kanäle erwarten; nutzen Sie die Modus-Beschriftungen beim Erklären oder Fehlersuchen, welcher Kontrastzweig bei einer gemischten Grau-und-Farbton-Oberfarbe feuerte. Halten Sie beide Zeichenketten kurz: dieser Endpunkt liest niemals Bilder, tastet niemals Pixel ab und ruft niemals eine Grafikbibliothek auf — zwei Hex-Token hinein, ein gemischter Swatch hinaus.
Workflows, Preise und Unterschiede zu anderen Farbwerkzeugen
Rufen Sie die kostenlose Vivid-Light-Mischung im Browser für schnelle Kontrastmaskenprüfungen, Logo-Überlagerungsversuche und Textur-Vorschauen auf, ohne eine Desktop-Suite zu installieren. Vivid Light ist die richtige Suchintention, wenn Nutzende vivid light blend modus, vivid light zwei farben oder Photoshop vivid light hex tippen — diese Anfragen bedient weder ein generischer Mischer noch Pin Light. Halten Sie Anfragen auf zwei Hex-Zeichenketten, vermeiden Sie benannte Farben ohne Konvertierung und dokumentieren Sie, dass base die untere Ebene ist, damit das Team die Reihenfolge nie versehentlich umkehrt.
Autoren, die Entwicklungskits mappen, können Hex und die drei Modus-Beschriftungen neben Farbwählern zeigen, die Studierende und Produktionsdesigner bereits erwarten.
Anwendungsfälle
Knackige Kontrastüberlagerungen aus zwei Hex-Token
Setzen Sie eine Mittleton-Flächenfarbe unter ein oberes Masken-Hex, damit dunkle Kanäle Schatten brennen und helle Kanäle Lichter abwedeln, ohne einen vollständigen Bildeditor.
Akzentfarben für Spiel und Oberfläche erzeugen
Materialautorinnen mischen ein Basis-Albedo-Token mit einer oberen Beleuchtungshinweisfarbe, um Vivid-Light-Akzent-Swatches für HUD-Häute und Requisitenpaletten zu erzeugen.
Häufige Fragen
Wie mischt Vivid Light zwei Farben?
Für jeden RGB-Kanal gilt: liegt top unter 128, entsteht ein color-burn mit dem Doppelten des oberen Werts; liegt top bei 128 oder höher, ein color-dodge mit dem Doppelten des Inversen. Senden Sie base und top als Hex.
Worin unterscheiden sich base und top?
Base ist die Farbe der unteren Ebene. Top ist die Mischfarbe, die pro Kanal color-burn oder color-dodge wählt. Die Reihenfolge zählt; ein Tausch ergibt ein anderes Ergebnis.
Was geschieht bei einem ungültigen Hex-Code?
Beide Farben müssen drei- oder sechsstellige Hexadezimalwerte sein (optionales #). Falsche Länge oder Nicht-Hex-Ziffern werden abgelehnt und nicht berechnet.
Ist das dasselbe wie Pin Light oder color.mix?
Nein. color.mix ist ein linearer RGB-Lerp nach Verhältnis. Pin Light wählt Abdunkeln oder Aufhellen. Vivid Light wählt color-burn oder color-dodge — höherer Kontrast, andere Suchintention.
Welche Farbschreibweisen werden akzeptiert?
Drei- oder sechsstellige Hex-Codes, wahlweise mit Rautezeichen oder dem Präfix 0x. Farbnamen und RGB-Schreibweisen in Klammern werden nicht angenommen, damit kein Tippfehler unbemerkt zu einer falschen Farbe wird.
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/vivid-light \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":"#808080","top":"#C0C0C0"}'const res = await fetch("https://api.kit.forhosting.com/color/vivid-light", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": "#808080",
"top": "#C0C0C0"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/vivid-light",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": "#808080",
"top": "#C0C0C0"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/vivid-light", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":"#808080","top":"#C0C0C0"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":"#808080","top":"#C0C0C0"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/vivid-light", 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": "#808080",
"top": "#C0C0C0"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.vivid_light",
"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
Ungültige oder fehlende Eingaben scheitern mit invalid_input, damit Skripte nie still eine falsche Farbe ausliefern. Der kostenlose Browser-Pfad und die Prepaid-API teilen ein reines Modul, sodass Goldens bitidentisch bleiben bei $0.002 pro erfolgreichem Element.
Wie Vivid Light pro Kanal color-burn oder color-dodge wählt
Der Algorithmus ist reine Arithmetik ohne Netz, ohne Zufalls-Seed und ohne Wanduhr, sodass identische Eingaben stets dasselbe JSON erzeugen.
Eingabevertrag, Antwortfelder und Validierungsfehler
Senden Sie einen JSON-Body mit zwei erforderlichen Zeichenkettenfeldern: base (die untere Ebene) und top (die Mischebene, die color-burn oder color-dodge wählt). Die Aliase color1, bottom, hex1, from und background mappen auf base; color2, blend, hex2, to und foreground mappen auf top, sodass ältere Formularfelder und Design-Werkzeug-Vokabular sauber anschließen. Bei Erfolg spiegelt die Nutzlast normalisiertes base- und top-Hex, die Kanalobjekte base_rgb und top_rgb, das gemischte Hex, rgb als ganze Zahlen Rot Grün Blau, rgb_string zum Einfügen in ein Stilblatt, mode_r mode_g und mode_b als die Wörter color_burn oder color_dodge pro Kanal sowie method stets gleich vivid_light, damit Clients verzweigen können ohne Formen zu erschnüffeln. Fehlende base, fehlende top, leere Zeichenketten, Nicht-Hex-Ziffern und falsche Längen scheitern mit invalid_input; Meldungen nennen das Feld, damit die Formularvalidierung das genaue Steuerelement markiert.
Workflows, Preise und Unterschiede zu anderen Farbwerkzeugen
Nutzen Sie die Prepaid-API, wenn eine Design-System-Pipeline, ein Spielmaterial-Generator, ein E-Commerce-Swatch-Dienst oder ein Marketing-Asset-Bot einen stabilen Vertrag unter KIT-Guthaben zu $0.002 pro erfolgreichem Element braucht. Kombinieren Sie diesen Endpunkt mit color.mix, wenn Sie einen Ratio-Lerp statt selektivem Brennen oder Abwedeln brauchen, mit color.mix_subtractive für farbenartigen RYB-Schlamm, mit color.pin_light wenn Sie das mildere Abdunkeln-oder-Aufhellen-Geschwister wollen, und mit color.lighten oder color.darken, wenn nur eine Farbe prozentual verschoben werden soll.
Integrationsbeispiele
Photoshop-Vivid-Light-Vorschauen in CI abgleichen
Theme- und Textur-Pipelines rufen die API auf, damit automatisierte Builds dasselbe Vivid-Light-Hex erzeugen, das eine Gestalterin in Photoshop sah, bitidentisch bei jedem Lauf.
Technische Fragen
Ist die Vivid-Light-Mischung kostenlos?
Das Browser-Werkzeug läuft kostenlos auf Ihrem Gerät. API-Aufrufe nutzen Prepaid-KIT-Guthaben zu $0.002 pro erfolgreichem Element; Validierungsfehler werden nicht berechnet.