Hellste Farbe in einer Liste
Aus #000000, #808080 und #ffffff ist #ffffff an Position 2 (gezählt ab 0) mit Luminanz 1 die hellste. Ordnen Sie Marken-, Flächen- und Akzentfarben so, wie das Auge sie wahrnimmt, statt nach Gefühl. 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
- Farben
- #000000, #808080, #ffffff
- Anzahl
- 3
- Index
- 2
- Farbe
- #ffffff
- Hex
- #ffffff
Designsysteme, Theme-Generatoren und Barrierefreiheits-Reviews starten oft mit einer Handvoll Hex-Kandidaten und brauchen eine einzige Antwort auf eine einfache Frage: welche Probe ist die hellste? Mitteltöne nach Augenmaß zu schätzen ist unzuverlässig, und rohe RGB-Mittelwerte ignorieren, dass das menschliche Auge Grün weit stärker gewichtet als Blau. Diese Fähigkeit nimmt eine Liste von CSS-Hex-Farben, berechnet die WCAG-2.x-Relativluminanz jedes Eintrags nach korrekter sRGB-Linearisierung und liefert die hellste Farbe zusammen mit ihrem nullbasierten Index in der Originaliste. Unentschieden werden deterministisch gelöst, indem das früheste Vorkommen behalten wird, sodass automatisierte Pipelines nicht je nach Runtime zwischen zwei gleichen Weißtönen wechseln.
Wie die Relativluminanz die hellste Probe wählt
Relativluminanz ist das WCAG-Maß dafür, wie hell eine Farbe unter Standard-Sehbedingungen erscheint. Im Gegensatz zur HSL-Helligkeit, die Rot, Grün und Blau nach der Umrechnung symmetrisch behandelt, startet die Relativluminanz von acht-Bit-sRGB-Kanälen, wandelt jeden Kanal in einen Einheitsbruch um, linearisiert die gammakodierten Werte mit der stückweisen sRGB-Transferfunktion und kombiniert sie mit festen Koeffizienten: null Komma zwei eins zwei sechs für Rot, null Komma sieben eins fünf zwei für Grün und null Komma null sieben zwei zwei für Blau.
Diese Gewichte entsprechen dem Standardbeobachter, sodass reines Grün deutlich heller als reines Blau rangiert, selbst wenn beide Kanäle bei zweihundertfünfundfünfzig liegen. Dieser Endpunkt wendet diese Formel auf jede Farbe Ihrer Liste an und wählt dann die maximale Luminanz. Teilen zwei Einträge exakt denselben Luminanzwert, behält der Algorithmus den niedrigeren Index, damit das Ergebnis über Sprachen und Runtimes stabil bleibt.
Kurze dreistellige Hex-Codes werden vor dem Parsen auf sechs Stellen erweitert; das führende Rautenzeichen ist optional; Alpha-Formen mit vier oder acht Ziffern werden abgelehnt, weil der Vertrag nur undurchsichtiges RGB ist. Es gibt keinen Zufalls-Seed, keinen Wanduhr-Zeitstempel und keinen Netzwerkaufruf im Pfad, sodass dieselbe Liste immer denselben Gewinner, Index und gerundeten Luminanz-Array liefert.
Wo das Finden der hellsten Farbe echten Nutzen bringt
Produktdesigner, die Marken-, Oberflächen- und Akzent-Tokens ordnen, brauchen einen schnellen Weg, den hellsten Hintergrund-Kandidaten zu markieren, bevor sie den Kontrast zum Fließtext prüfen. Design-Token-Pipelines erzeugen Tönungen aus mehreren Basis-Hex-Werten und müssen den hellsten Schritt für Papierweiß-Oberflächen wählen, ohne einen vollständigen Bildeditor zu öffnen. Barrierefreiheits-Prüfer vergleichen Kandidatenfarben für Icons auf dunklem Chrome und wollen die hellste Option für Sekundärbeschriftungen, bevor sie das Paar an einen Kontrastprüfer übergeben.
Marketing-Teams stellen Kampagnenpaletten aus Logo-Extraktionen zusammen und brauchen ein reproduzierbares Ranking, wenn mehrere Nahe-Weißtöne auf dem Projektor identisch wirken. Wenn Sie später einen einzelnen Hex abdunkeln, Kontrastverhältnisse berechnen, nach HSL umrechnen oder komplementäre Schemata bauen müssen, behandeln Sie das als getrennte Suchabsichten und Landings statt diese Seite zur hellsten Farbe in der Liste zu überladen.
Anwendungsfälle
Hellsten Oberflächen-Token wählen
Ordnen Sie Marken- und Theme-Hex-Kandidaten nach WCAG-Relativluminanz und behalten Sie die hellste Probe als Papierweiß- oder Karten-Hintergrund-Token.
Barrierefreiheits-Palette triagieren
Wählen Sie aus einer kurzen Liste von Icon- oder Beschriftungsfarben die hellste Option für dunkles Chrome, bevor Sie eine volle Kontrastprüfung ausführen.
Häufige Fragen
Welche Hex-Formate werden akzeptiert?
Drei- und sechsstellige CSS-Hex-Werte, mit oder ohne führende Raute, ohne Groß-/Kleinschreibung.
Wie viele Farben darf ich senden?
Zwischen 1 und 64 einschließlich. Ein leeres Array oder mehr als 64 Einträge scheitert an der Validierung und wird nicht berechnet.
Was passiert, wenn zwei Farben dieselbe Luminanz haben?
Es wird das erste Vorkommen (niedrigster nullbasierter Index) zurückgegeben, damit Ergebnisse über Runtimes deterministisch bleiben.
Warum gilt reines Grün als viel heller als reines Blau?
Die relative Luminanz gewichtet Grün mit 0.7152 und Blau nur mit 0.0722, weil das Auge auf Grün am empfindlichsten reagiert. Deshalb gewinnt Grün, selbst wenn beide Kanäle voll aufgedreht sind.
Ist das dasselbe wie die Helligkeit in HSL?
Nein. HSL behandelt Rot, Grün und Blau gleich. Die relative Luminanz rechnet dagegen erst die Bildschirmkurve heraus und gewichtet die Kanäle nach der Wahrnehmung, daher kann die Reihenfolge abweichen.
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/lightest-in-list \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"colors":["#000000","#808080","#ffffff"]}'const res = await fetch("https://api.kit.forhosting.com/color/lightest-in-list", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"colors": [
"#000000",
"#808080",
"#ffffff"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/lightest-in-list",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"colors": [
"#000000",
"#808080",
"#ffffff"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lightest-in-list", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"colors":["#000000","#808080","#ffffff"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"colors":["#000000","#808080","#ffffff"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lightest-in-list", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"colors": [
"#000000",
"#808080",
"#ffffff"
]
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lightest_in_list",
"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 Hex-Zeichenketten, leere Listen und zu große Arrays scheitern mit invalid_input, statt einen Gewinner zu erfinden.
Eingabevertrag, Antwortform und Validierungsregeln
Jeder Eintrag darf hash-RGB oder hash-RRGGBB sein, mit oder ohne führende Raute, in beliebiger Groß-/Kleinschreibung. Beispiel: Schwarz, Mittelgrau und Weiß liefert Weiß am Index zwei mit Luminanz eins. Beispiel: reines Rot, reines Grün und reines Blau liefert Grün am Index eins, weil der Grün-Koeffizient dominiert. Nutzen Sie das kostenlose Browserformular, wenn Sie eine Palette von Hand prüfen, und rufen Sie denselben Vertrag aus Skripten auf, wenn Sie Massen-Rankings von Token-Leitern oder Theme-Kandidaten brauchen. Senden Sie per POST ein JSON-Objekt mit dem Pflichtfeld colors: ein Array aus einem bis vierundsechzig Hex-Farbzeichenketten. Die Aliase list, swatches und palette werden für dasselbe Feld akzeptiert. Fehlendes colors, ein Nicht-Array-Wert, ein leeres Array, mehr als vierundsechzig Einträge, Nicht-Hex-Zeichen, falsche Längen und Alpha-Formen scheitern mit invalid_input und nennen das problematische Feld oder den Index; fehlgeschlagene Validierung wird nicht berechnet. Bei Erfolg enthält die Antwort count als Listenlänge, index als nullbasierte Position der hellsten Farbe, color und hex als normalisierten Kleinbuchstaben-Sechs-Ziffern-Code mit Raute, ganzzahlige r-g-b-Kanäle, eine druckbare rgb-Zeichenkette, relative_luminance des Gewinners als saubere Gleitkommazahl zwischen null und eins, luminances als die bereinigte Luminanz jedes Eingangs in Reihenfolge und eine kurze formula-Zeichenkette, die die WCAG-Pipeline dokumentiert. Der Preis erfolgreicher API-Aufrufe ist die veröffentlichte Basis von $0.002 pro Element.
Wo das Finden der hellsten Farbe echten Nutzen bringt
Weil diese Fähigkeit eine reine Parse-Engine ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Basispreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netzwerk, und fehlgeschlagene Validierung verbraucht kein Prepaid-Guthaben.
Integrationsbeispiele
CI-Golden für Theme-Leitern
Stellen Sie in der Continuous Integration sicher, dass der hellste Schritt einer generierten Tönungsleiter nach Palette-Änderungen am erwarteten Index und Hex bleibt.
Technische Fragen
Wie wird die hellste Farbe gewählt?
Jeder Hex wird nach sRGB gewandelt, mit der WCAG-Transferfunktion linearisiert und mit Relativluminanz L = 0.2126 R + 0.7152 G + 0.0722 B bewertet. Das maximale L gewinnt; exakte Unentschieden behalten den niedrigsten Index.
Was kostet der Hellste-Farbe-Finder?
Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Anfragen nutzen das Prepaid-KIT-Guthaben zu $0.002 pro erfolgreichem Element; ungültige Eingabe wird nicht berechnet.