ForHosting KIT · Bilder bearbeiten & analysieren

Dominante Farbe eines Bildes bestimmen

Dieses Werkzeug aus dem KIT bestimmt die dominante Farbe eines Bildes: den einzelnen Farbton, der eine Aufnahme am stärksten prägt, als Hex-Wert. Nützlich für einen passenden Hintergrund, einen Ladebalken oder eine Miniaturansicht. Läuft vollständig im Browser, ohne dass das Bild hochgeladen wird.

● StabilKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Ein Wert statt einer ganzen Palette

Manchmal reicht die vollständige Farbpalette eines Bildes nicht als Antwort, sondern eine einzige klare Frage: Welche Farbe prägt dieses Bild am meisten? Dieses Werkzeug beantwortet genau das mit einem einzigen Hex-Wert, statt Ihnen fünf oder acht Farbtöne zur Auswahl zu geben, zwischen denen Sie erst selbst entscheiden müssten, welcher am besten zum jeweiligen Vorhaben passt und wirkt, ohne weitere Zwischenschritte oder Abwägungen.

Typischer Einsatz: Ladeansichten und Platzhalter

Websites zeigen häufig einen farbigen Platzhalter, während ein Bild noch lädt, damit der Seitenaufbau nicht ruckelt und die Nutzererfahrung ruhig und durchdacht wirkt. Die dominante Farbe eines Bildes eignet sich dafür ideal: Der Platzhalter hat schon vor dem vollständigen Laden ungefähr die richtige Farbstimmung, statt eines neutralen grauen Kastens, der beim Erscheinen des Fotos abrupt und sichtbar in das echte Bild wechselt.

Auch für die Gestaltung nützlich

Über technische Platzhalter hinaus hilft die dominante Farbe, einen Hintergrund oder ein Rahmenelement passend zu einem Produktfoto zu wählen, ohne die Farbe mühsam von Auge abzuschätzen und mehrfach von Hand nachzubessern. Ein Hex-Wert lässt sich direkt in CSS oder ein Grafikprogramm übernehmen und dort sofort weiterverwenden, ganz ohne Umrechnung, Schätzung oder zusätzlichen Zwischenschritt vor der eigentlichen Gestaltungsarbeit an der Seite.

Kostenlos und ohne Hochladen

Wie andere Analyse-Werkzeuge im KIT läuft auch dieses vollständig im Browser: Ihr Bild wird ausgewertet, ohne es an einen Server zu senden. Es ist kostenlos, ohne Nutzungslimit und ohne Anmeldung nutzbar, unabhängig davon, wie oft Sie es an einem einzigen Tag für unterschiedliche Bilder oder verschiedene Projekte gleichzeitig verwenden, privat oder beruflich, kommerziell oder als reines Hobby-Projekt am Wochenende, ohne jemals ein Limit zu erreichen.

Anwendungsfälle

Ein Ladeplatzhalter für eine Produktgalerie

Ein Onlineshop möchte, dass Produktbilder beim Laden nicht auf grauem Hintergrund erscheinen. Für jedes Bild wird die dominante Farbe bestimmt und als Platzhalterfarbe verwendet, bis das eigentliche Foto geladen ist.

Ein passender Rahmen für ein Titelbild

Jonas Weber gestaltet eine Titelseite und möchte den Rahmen um ein Foto farblich passend wählen. Die dominante Farbe des Bildes gibt ihm den Ausgangswert für den Rahmen.

Farbige Vorschaukacheln in einer Bildergalerie

Eine Fotogalerie zeigt Vorschaukacheln, bevor die vollständigen Bilder laden. Jede Kachel erhält die dominante Farbe des zugehörigen Fotos als Hintergrund.

Häufige Fragen

Worin unterscheidet sich das von der vollständigen Farbpalette?

Die Palette liefert mehrere Farbtöne eines Bildes, dieses Werkzeug liefert nur den einen Farbton, der am stärksten vertreten ist. Für eine einzelne Verwendung wie einen Platzhalter reicht meist dieser eine Wert.

Wofür wird die dominante Farbe typischerweise verwendet?

Am häufigsten als Ladeplatzhalter, der erscheint, während das eigentliche Bild noch lädt, sowie für Hintergründe oder Rahmen, die farblich zu einem Foto passen sollen.

Ist die Bestimmung der dominanten Farbe kostenlos?

Ja, vollständig kostenlos, ohne Limit und ohne Anmeldung, direkt im Browser.

Wird mein Bild dafür an einen Server geschickt?

Nein. Die Auswertung findet in Ihrem Browser statt, das Bild verlässt Ihr Gerät nicht.

In welchem Format erhalte ich die Farbe?

Als Hex-Code, den Sie direkt in CSS oder ein Grafikprogramm einfügen können.

Kann ich das für viele Bilder automatisch bestimmen lassen?

Ja, über die API lässt sich die dominante Farbe für eine ganze Bildersammlung automatisiert abrufen, etwa für eine Produktgalerie mit vielen Artikeln.

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/image/dominant-color

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/image/dominant-color \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"image":"https://ejemplo.com/imagen.jpg"}'

const res = await fetch("https://api.kit.forhosting.com/image/dominant-color", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "image": "https://ejemplo.com/imagen.jpg"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/dominant-color",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/dominant-color", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/dominant-color", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "image": "https://ejemplo.com/imagen.jpg"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.dominant_color",
  "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_mb`	15
`max_megapixels`	12

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 →

Im Browser ausführen – kostenlos