ForHosting KIT · Entwickler-Tools

Farben nach Luminanz sortieren

Verwandeln Sie ungeordnete Hex-Farben in eine verlässliche Skala von dunkel nach hell.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Das Werkzeug prüft jeden Wert, vereinheitlicht kurze und lange Hex-Schreibweisen, wandelt sRGB-Kanäle in lineares Licht um und sortiert nach relativer WCAG-Luminanz. Jeder Eintrag enthält die normalisierte Farbe und ihre Luminanz, damit Sie kleine Unterschiede prüfen können, statt dem bloßen Augenschein zu vertrauen. Gleichstände behalten ihre ursprüngliche Reihenfolge, Duplikate bleiben erhalten und identische Eingaben erzeugen stets identische Ausgaben.

Erstellen Sie aus einer ungeordneten Palette eine Helligkeitsskala

Farbsammlungen folgen oft der Erstellungsreihenfolge von Tokens oder der Serialisierung einer Datei, nicht ihrer Helligkeit. Übergeben Sie das Array colors und Sie erhalten Datensätze in aufsteigender relativer Luminanz. Dreistellige Formen werden erweitert, sechsstellige erlauben ein optionales Rautezeichen und die Ausgabe verwendet stets kleingeschriebenes #rrggbb. Diese Normalisierung vereinfacht Snapshots, Token-Dateien, CSS und Vergleiche. Duplikate bleiben bestehen, da sie unterschiedliche Tokens darstellen können. Farben mit exakt gleicher berechneter Luminanz behalten die Eingabereihenfolge und wechseln daher nicht zwischen Läufen. Die Antwort nennt außerdem Anzahl, Richtung und Methode. Nutzen Sie sie für sequenzielle Paletten oder zur Prüfung benachbarter Farbtöne. Der Vorgang ändert nur die Reihenfolge: Er erzeugt keine Zwischenfarben, benennt keine Tokens um und verspricht keine wahrnehmungsgleichmäßigen Abstände.

Verstehen Sie die Sortierung durch relative Luminanz

Relative Luminanz ist kein einfacher Mittelwert der roten, grünen und blauen Bytes. Hex-Farben codieren sRGB-Kanäle mit einer nichtlinearen Kurve. Jeder Kanal wird auf null bis eins skaliert und in lineares Licht umgerechnet. Werte bis zum sRGB-Grenzwert werden durch 12.92 geteilt, höhere verwenden die standardisierte Potenzfunktion. Danach gelten die Koeffizienten 0.2126, 0.7152 und 0.0722. Grün wiegt am stärksten, Blau am schwächsten; das Ergebnis reicht von null für Schwarz bis eins für Weiß. Sortiert wird mit dem vollständigen ungerundeten Wert. Die sechs ausgegebenen Dezimalstellen dienen Lesbarkeit und stabiler Serialisierung. Das Modell wird auch bei WCAG-Berechnungen verwendet, doch eine sortierte Palette belegt keine Barrierefreiheit. Prüfen Sie konkrete Vordergrund-Hintergrund-Paare separat gegen die erforderlichen Kontrastgrenzen.

Validieren Sie Eingaben und integrieren Sie stabile Ergebnisse

Das Feld colors muss ein nichtleeres Array mit höchstens 1000 Elementen sein. Jedes Element ist eine Zeichenfolge mit genau drei oder sechs Hexadezimalziffern nach einem optionalen Rautezeichen. Äußerer Leerraum wird ignoriert; Alphaformen, CSS-Namen, rgb()-Funktionen, falsche Längen und andere Typen werden abgewiesen. Der Fehler nennt den betroffenen Index, ohne einen Wert still zu verwerfen oder zu erraten. So akzeptiert ein Design-System-Build keine scheinbar gültige Teilskala. Die Implementierung nutzt ausschließlich lokale Arithmetik und eine Sortierung im Speicher, ohne Netzwerk, Uhr, Zufall oder Speicherung. Dasselbe Array erzeugt deshalb im Browser, in CI und per API dasselbe JSON. Der Browserlauf ist kostenlos; eine API-Anfrage kostet $0.002. Erhaltene Duplikate und stabile Gleichstände ermöglichen eine zuverlässige Zuordnung zu den ursprünglichen Metadaten.

Anwendungsfälle

Design-Tokens ordnen

Bringen Sie geerbte oder erzeugte Farben in eine stabile Folge, bevor Sie Skalennummern vergeben.

Sequenzielle Diagrammfarben vorbereiten

Ordnen Sie Farbfelder nach relativer Luminanz, damit die visuelle Skala einheitlich fortschreitet.

Palettenverlauf prüfen

Erkennen Sie anhand normalisierter Farben und Luminanzen Umkehrungen, Duplikate oder zu kleine Schritte.

Häufige Fragen

Was kostet eine API-Anfrage?

Jede API-Anfrage kostet $0.002. Denselben deterministischen Löser können Sie im Browser kostenlos ausführen.

Welche Farbformate werden akzeptiert?

Verwenden Sie drei oder sechs Hex-Ziffern mit optionaler Raute, etwa #abc, abc, #aabbcc oder AABBCC.

Werden Alpha-Farben oder CSS-Namen unterstützt?

Nein. Alpha-Hex, Namen, rgb(), hsl() und andere CSS-Syntax werden für eindeutige deckende sRGB-Kanäle abgewiesen.

Was geschieht bei gleicher Luminanz?

Die Farben behalten ihre ursprüngliche relative Reihenfolge. Diese stabile Regel erhält auch Duplikate deterministisch.

Garantiert die Reihenfolge barrierefreien Kontrast?

Nein. Die Sortierung beschreibt einzelne Farben; Barrierefreiheit verlangt die Prüfung konkreter Vordergrund-Hintergrund-Paare.

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/sort-by-luminance

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/sort-by-luminance \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}'

const res = await fetch("https://api.kit.forhosting.com/color/sort-by-luminance", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "colors": [
      "#f8fafc",
      "#0f172a",
      "#22c55e",
      "#64748b"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/sort-by-luminance",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "colors": [
        "#f8fafc",
        "#0f172a",
        "#22c55e",
        "#64748b"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/sort-by-luminance", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/sort-by-luminance", 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": [
    "#f8fafc",
    "#0f172a",
    "#22c55e",
    "#64748b"
  ]
}

Beispiel-Antwort

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

Limits

max_items 1000

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.

Vollständige KIT-Dokumentation lesen →