ForHosting KIT · Daten & Dateien

Farbcode umwandeln

Ein Werkzeug, das einen Farbwert zwischen den gängigen Notationen HEX, RGB und HSL umwandelt, ohne dass sich die eigentliche Farbe verändert. Gedacht für Designerinnen und Entwickler, die eine Farbe aus einem Tool in ein anderes Format für CSS, ein Designsystem oder eine Präsentation übertragen müssen, ohne selbst zu rechnen.

● StabilKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Welche Farbformate sich umwandeln lassen

Unterstützt werden HEX (`#1a73e8`), RGB und RGBA sowie HSL und HSLA, in jede Richtung zwischen den vier Notationen. Sie geben den Farbwert in einem Format ein und erhalten ihn sofort in den übrigen Notationen, fertig zum Einfügen in CSS, ein Designsystem oder eine Präsentation, ohne eine der Zahlen von Hand nachzuschlagen, umzurechnen oder in einem separaten Tool auf dem eigenen Rechner nachzusehen.

Wofür Entwickler und Designerinnen das brauchen

Ein Designsystem liefert Markenfarben oft nur als HEX, eine CSS-Regel mit einem transparenten Überlagerungseffekt braucht aber RGBA, und für eine konsistente Farbpalette mit gleichbleibender Helligkeit ist HSL die praktischere Notation, weil sich dort einzelne Helligkeitsstufen gezielt verschieben lassen. Statt jedes Mal von Hand umzurechnen, geben Sie den Wert einmal ein und übernehmen anschließend das jeweils passende Format direkt in Ihr Projekt.

Genauigkeit bei der Umwandlung

Zwischen HEX und RGB ist die Umwandlung verlustfrei, da beide Notationen dieselben Werte nur unterschiedlich darstellen, ohne dass dabei etwas gerundet werden muss. Bei der Umrechnung in und aus HSL wird intern mit Nachkommastellen gerechnet und für die Anzeige sinnvoll gerundet; ein minimaler Rundungsunterschied bei der anschließenden Rückumwandlung ist dadurch möglich, fällt in der Praxis aber selbst am Bildschirm nicht auf.

Direkt im Browser oder eingebunden per API

Die Umwandlung läuft im Browser kostenlos und ohne Limit, ohne dass ein Farbwert übertragen wird. Über die API lässt sich derselbe Schritt automatisieren, etwa wenn ein Designsystem als JSON-Datei gepflegt wird und die dort hinterlegten Farbwerte automatisch in mehreren Notationen gleichzeitig bereitstehen sollen, fertig für den Import in unterschiedliche Design- und Entwicklungswerkzeuge, ohne manuelles Nachpflegen bei jeder einzelnen Änderung am Farbschema.

Anwendungsfälle

Markenfarbe mit Transparenz in CSS

Sabine Schneider wandelt die HEX-Markenfarbe aus dem Designsystem in RGBA um, um sie mit 40 Prozent Deckkraft als Hintergrundfarbe in CSS einzusetzen.

Farbpalette mit gleichbleibender Helligkeit

Lukas Fischer wandelt die HEX-Farbe eines Kunden in HSL um, um daraus eine Palette mit mehreren, gleichmäßig abgestuften Helligkeitsstufen aufzubauen.

Farbe aus einem Screenshot übernehmen

Katrin Baumann wandelt einen HEX-Farbwert, den sie aus einem Screenshot abgelesen hat, in RGB um, um ihn in ihrem CMS einzutragen.

Häufige Fragen

Was kostet die Umwandlung eines Farbcodes?

Im Browser: kostenlos und ohne Limit. Per API: $0.002 pro Anfrage – der Preis steht vorab fest.

Welche Farbformate werden unterstützt?

HEX, RGB, RGBA, HSL und HSLA, jeweils in beide Richtungen. CMYK für den Druck gehört derzeit nicht dazu.

Geht bei der Umwandlung Farbgenauigkeit verloren?

Zwischen HEX und RGB nicht, das ist dieselbe Farbe in anderer Schreibweise. Bei HSL kann ein minimaler Rundungsunterschied entstehen, der in der Praxis nicht sichtbar ist.

Verlässt mein Farbwert dabei den Browser?

Im Browser bleibt Ihre Eingabe auf Ihrem Gerät: Die Umwandlung läuft vollständig lokal, ohne dass etwas übertragen wird.

Kann ich mehrere Farben auf einmal umwandeln?

Diese Funktion ist auf einen einzelnen Farbwert ausgelegt; für eine ganze Palette rufen Sie die Funktion je Farbe einzeln auf, im Browser ohne zusätzliche Kosten.

Brauche ich ein Konto?

Nein. Es gibt keine Konten und keine Anmeldung – nur bei der API-Nutzung zahlen Sie, und zwar pro Anfrage.

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/data/color-convert

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/data/color-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/data/color-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/data/color-convert",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/color-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "data.color_convert",
  "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 25

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