ForHosting KIT · Bilder bearbeiten & analysieren

Farbe hell oder dunkel

Weiß #ffffff erreicht eine Helligkeit von 255, über dem Schwellwert 128, gilt also als hell und bekommt schwarzen Text (#000000). So wählen Sie die Beschriftungsfarbe für Schaltflächen, Badges und Chips. Gratis in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Rechenbeispiel

Wenn Sie eingeben

Farbe: #ffffff

Erhalten Sie

Eingabe-Hex: #ffffff
Eingabe-RGB: 255, 255, 255
Widerstand (Ω): 255
G: 255

Schwarzen oder weißen Beschriftungstext auf einem farbigen Button zu wählen ist ein klassisches Barrierefreiheits- und Markenproblem: reines Weiß auf blassem Gelb scheitert am Kontrast, und reines Schwarz auf Marineblau kann falsch wirken, wenn die Füllung fast schwarz ist. Dieser Hell-oder-Dunkel-Klassifikator nimmt eine opake Hex-Farbe, berechnet eine deterministische wahrgenommene Helligkeit mit den ITU-R-BT.601-Koeffizienten, die Grün stärker als Rot und Blau gewichten, vergleicht diese Helligkeit mit einem konfigurierbaren Schwellwert (Standard hundertachtundzwanzig auf der Skala von null bis zweihundertfünfundfünfzig) und liefert zurück, ob der Swatch hell oder dunkel ist, plus eine empfohlene Overlay-Textfarbe. Designer, die Theme-Tokens verdrahten, Entwickler, die Icon-Farben auf dynamischen Badges wählen, und automatisierte Tests, die Hell-gegen-Dunkel-Entscheidungen einfrieren, brauchen jedes Mal dieselbe Arithmetik.

Warum wahrgenommene Helligkeit statt rohem Kanalmittel

Eine naive Mittelgrau-Regel, die Rot, Grün und Blau mittelt, behandelt reines Blau und reines Gelb als gleich hell, was nicht dazu passt, wie menschliches Sehen und die meisten UI-Bibliotheken Hell gegen Dunkel entscheiden. Die wahrgenommene Helligkeit dieser Seite folgt den lang etablierten BT.601-Luma-Koeffizienten aus Video- und Web-Werkzeugen: die Helligkeit ist gleich null Komma zwei neun neun mal Rot plus null Komma fünf acht sieben mal Grün plus null Komma eins eins vier mal Blau, wobei jeder Kanal eine Ganzzahl von null bis zweihundertfünfundfünfzig ist.

Grün dominiert die Summe, weil das Auge dort am empfindlichsten ist; Blau trägt am wenigsten bei. Nach der Berechnung vergleicht das Werkzeug die Helligkeit mit einem Schwellwert. Der Standard-Schwellwert ist hundertachtundzwanzig, der Mittelpunkt der Acht-Bit-Skala, und entspricht vielen Open-Source-isLight-Helfern, die Helligkeit größer oder gleich diesem Schnitt als hell behandeln.

Sie können einen eigenen Schwellwert übergeben, wenn Ihr Designsystem mehr Farben als dunkel (Schwellwert erhöhen) oder mehr als hell (senken) klassifizieren soll. Die Klassifikation ist auf der hellen Seite inklusiv: Helligkeit größer oder gleich dem Schwellwert ergibt hell, und alles strikt darunter ergibt dunkel.

Praktische Tipps, Grenzen und verwandte Suchen

Schreiben Sie Unit-Tests, die mindestens einen fast weißen Hintergrund abdecken, der hell sein muss, eine fast schwarze Füllung, die dunkel sein muss, eine gesättigte Markenfarbe im mittleren Ton nahe dem Standard-Schwellwert, eine dreistellige Kurzform, einen eigenen Schwellwert, der eine Grenzfarbe umkippt, und ein absichtlich ungültiges Hex, damit Validierungsregressionen nicht durchrutschen.

Denken Sie daran, dass dieser Klassifikator Hell gegen Dunkel für einen einzelnen Swatch beantwortet; er berechnet keinen WCAG-Kontrast zwischen Vorder- und Hintergrund, liefert keine relative Luminanz auf einer linearisierten sRGB-Skala von null bis eins als primären Score (er meldet BT.601-Kanalhelligkeit) und passt weder Alpha noch Textgröße an. Übergeben Sie keine Alpha-Formen wie #RRGGBBAA — diese Seite klassifiziert nur opakes Hex. CSS-Farbnamen und rgb()-Zeichenketten sollten zuerst zu Hex aufgelöst und dann hier übergeben werden, damit die Validierungsfläche eine einzige gut spezifizierte Farbzeichenkette bleibt.

Diese Seite zielt auf Suchende nach Farbe hell oder dunkel, Hell-Dunkel-Hex-Prüfer, wahrgenommene Helligkeit für Overlay-Text oder Hex hell dunkel kostenlos online klassifizieren; sie ist kein vollständiger Palettengenerator, kein Abdunkel- oder Aufhell-Mixer und kein Mehrraum-Konverter. Bevorzugen Sie diese Fähigkeit, wenn Sie bereits ein Hex-Token haben und nur ein deterministisches Hell-oder-Dunkel-Label plus eine Standard-Empfehlung für schwarzen oder weißen Overlay brauchen; wenn Ihre Pipeline Kontrastverhältnisse oder AA-Flags zwischen zwei Farben braucht, nutzen Sie danach einen eigenen Kontrastprüfer.

Anwendungsfälle

Dynamische Badge- und Chip-Beschriftungen

Wählen Sie schwarzen oder weißen Beschriftungstext auf vom Nutzer gewählten Badge-Farben, damit Produkt-UIs lesbar bleiben, ohne jedes Marken-Hex von Hand zu justieren.

Automatisierung von Theme-Tokens

Klassifizieren Sie Oberflächen-Tokens des Designsystems als hell oder dunkel, damit Icon-Sets und Haarlinienränder in der CI automatisch umschalten.

Häufige Fragen

Welche Overlay-Textfarbe empfiehlt er?

Dunklen Text (#000000) auf hellen Hintergründen und hellen Text (#ffffff) auf dunklen Hintergründen. Prüfen Sie WCAG-Kontrast für kleinen Produktionstext stets nach.

Welche Farbformate werden akzeptiert?

Hex #RGB oder #RRGGBB mit optionalem #, ohne Groß-/Kleinschreibung. Alpha-Hex, CSS-Farbnamen und rgb()-Zeichenketten werden auf dieser Seite nicht akzeptiert.

Kann ich den Helligkeits-Schwellwert ändern?

Ja. Übergeben Sie threshold als endliche Zahl von 0 bis 255. Höhere Werte klassifizieren mehr Farben als dunkel; niedrigere mehr als hell. Standard ist 128.

Warum gilt Gelb als hell und Blau als dunkel, obwohl beide reine Farben sind?

Die wahrgenommene Helligkeit gewichtet Grün am stärksten und Blau am schwächsten: 0.299 mal Rot plus 0.587 mal Grün plus 0.114 mal Blau. Gelb enthält volles Grün und liegt hoch, reines Blau trägt kaum etwas bei.

Ersetzt das eine Kontrastprüfung nach WCAG?

Nein. Hier wird nur entschieden, ob eine einzelne Farbe hell oder dunkel ist. Ob ein Text-Hintergrund-Paar für kleine Schrift ausreicht, sollten Sie zusätzlich mit einem Kontrastprüfer messen.

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

POSThttps://api.kit.forhosting.com/color/is-light-or-dark

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/is-light-or-dark \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3b82f6"}'

const res = await fetch("https://api.kit.forhosting.com/color/is-light-or-dark", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#3b82f6"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/is-light-or-dark",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#3b82f6"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/is-light-or-dark", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color":"#3b82f6"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color":"#3b82f6"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/is-light-or-dark", 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": "#3b82f6"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.is_light_or_dark",
  "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

pro Anfrage$0.002

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

Fügen Sie Marken-Tokens wie #3b82f6, #f8fafc oder die dreistellige Kurzform wie #abc ein; ungültige Hex-Zeichenketten scheitern mit invalid_input, statt ein Label zu erfinden.

Warum wahrgenommene Helligkeit statt rohem Kanalmittel

Die Antwort spiegelt stets die numerische Helligkeit, den verwendeten Schwellwert, die Booleans is_light und is_dark, eine Klassifikationszeichenkette und eine empfohlene Overlay-Textfarbe wider: dunkel mit Hex #000000 auf hellen Hintergründen oder hell mit Hex #ffffff auf dunklen Hintergründen. Diese Empfehlung ist ein praktischer Standard für Badges und Chips; Produktionsprodukte, die WCAG-Kontrastverhältnisse erfüllen müssen, sollten das endgültige Paar dennoch mit einem Kontrastprüfer messen, weil Schwarz auf Mittelgrau die Helligkeitsklassifikation bestehen und dennoch AA für kleinen Text verfehlen kann. Diese Seite beantwortet absichtlich die Suchintention Farbe hell oder dunkel und Hell-Dunkel-Hex-Klassifikator, nicht die Berechnung eines vollständigen Kontrastverhältnisses zwischen zwei Farben.

Eingabevertrag, Antwortform und Fehlerverhalten

Gültige Beispiele sind #3b82f6, 3b82f6, #abc und ABC. Umgebende Leerzeichen werden entfernt, Buchstaben dürfen groß oder klein sein, und das führende Hash-Zeichen ist optional. Nur drei- und sechsstellige hexadezimale Körper werden akzeptiert; achtstelliges Alpha-Hex, CSS-Farbnamen wie rebeccapurple, rgb()-Funktionszeichenketten und separate numerische Kanalfelder liegen außerhalb des Umfangs und werden abgelehnt, damit Sie es bemerken, statt Alpha stillschweigend zu verwerfen. Optionales threshold ist eine endliche Zahl von null bis zweihundertfünfundfünfzig einschließlich; lassen Sie es weg, um hundertachtundzwanzig zu verwenden. Senden Sie einen JSON-Body mit einer Pflicht-Zeichenkette color. Das Feld color akzeptiert die Aliasse hex, value, text, input und code. Bei Erfolg liefert die Antwort input_hex und input_rgb der aufgelösten Quelle, ganzzahlige Kanäle r g b mit Aliassen red green blue, source als hex3 oder hex6, brightness auf der Skala von null bis zweihundertfünfundfünfzig mit fester Anzeigegenauigkeit, brightness_0_1 als Helligkeit geteilt durch zweihundertfünfundfünfzig, threshold, classification als light oder dark, Booleans is_light und is_dark, recommended_text als dark oder light, recommended_text_hex als #000000 oder #ffffff, formula mit der gewichteten BT.601-Summe, method gleich perceived_brightness_bt601, message als kurze englische Zusammenfassung und steps als geordnete Substitutionszeilen zum Lehren oder Debuggen. Fehlgeschlagene Validierung — fehlendes color, leere Zeichenkette, falsche Hex-Länge, Nicht-Hex-Zeichen, Programmier-Präfix 0x oder Schwellwert außerhalb des Bereichs — liefert invalid_input und wird nie berechnet. Der Preis ist ein pauschales $0.002 pro erfolgreicher Anfrage mit Einheit item. Bevorzugen Sie das exakte Token, das Ihr Design-Werkzeug exportiert hat; die Antwort normalisiert die Quelle stets zu einem sechsstelligen input_hex in Kleinbuchstaben, damit nachgelagerte Diffs stabil bleiben.

Praktische Tipps, Grenzen und verwandte Suchen

Fehlgeschlagene Aufgaben mit invalid_input verbrauchen kein Prepaid-Guthaben, was explorative Skripte und Formularvalidierung günstig hält, während Lernende unvollkommene Zwischenablagewerte einfügen. Fixieren Sie classification, brightness und recommended_text_hex in automatisierten Tests, damit eine künftige Änderung von Standard-Schwellwerten oder Rundung nicht still bestehen kann, und dokumentieren Sie, dass method perceived_brightness_bt601 ist, wenn Sie Ergebnisse neben anderen Luminanzsystemen speichern.

Integrationsbeispiele

Unit-Tests für Overlay-Entscheidungen

Frieren Sie bekannte Hell/Dunkel-Klassifikationen aus Hex-Fixtures ein, damit Theme-Engines Regressionen erkennen, wenn sich die Helligkeitsmathematik ändert.

Technische Fragen

Wie entscheidet der Klassifikator, ob die Farbe hell oder dunkel ist?

Er berechnet die wahrgenommene BT.601-Helligkeit = 0.299×R + 0.587×G + 0.114×B auf 8-Bit-Kanälen und vergleicht mit einem Schwellwert (Standard 128). brightness ≥ threshold → light; sonst dark.

Ist der Hell-oder-Dunkel-Klassifikator kostenlos?

Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Aufrufe nutzen prepaid KIT-Guthaben zu $0.002 pro erfolgreicher Anfrage; Fehlschläge werden nicht berechnet.

Vollständige KIT-Dokumentation lesen →

Farbe hell oder dunkel

Im Browser ausführen – kostenlos

Rechenbeispiel

Warum wahrgenommene Helligkeit statt rohem Kanalmittel

Praktische Tipps, Grenzen und verwandte Suchen

Anwendungsfälle

Dynamische Badge- und Chip-Beschriftungen

Automatisierung von Theme-Tokens

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Fehler

Technische Hinweise

Warum wahrgenommene Helligkeit statt rohem Kanalmittel

Eingabevertrag, Antwortform und Fehlerverhalten

Praktische Tipps, Grenzen und verwandte Suchen

Integrationsbeispiele

Unit-Tests für Overlay-Entscheidungen

Technische Fragen

danke