ForHosting KIT · Websites auslesen & überwachen

CSS-Farbformate umwandeln: HEX, RGB, HSL und CMYK

Wandeln Sie eine Farbe zwischen HEX, RGB, HSL und CMYK um, ohne ein Grafikprogramm zu öffnen oder Formeln neu zu schreiben.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Geben Sie einen vollständigen Ausdruck ein, wählen Sie das Zielformat und erhalten Sie einen sauberen Wert zum Kopieren. Der Konverter prüft zuerst die Schreibweise, begrenzt Zahlenkanäle auf gültige Bereiche und meldet fehlerhafte Eingaben, statt deren Bedeutung zu erraten. Damit eignet er sich für Stylesheets ebenso wie für wiederholbare automatisierte Abläufe.

Geben Sie einen vollständigen Farbausdruck ein

Verwenden Sie eine unterstützte Schreibweise: drei- oder sechsstellige HEX-Werte wie <code>#f80</code> oder <code>#ff8800</code>, komma-getrenntes <code>rgb()</code>, prozentuales <code>hsl()</code> oder prozentuales <code>cmyk()</code>. RGB benötigt drei Kanäle, HSL einen Farbton und zwei Prozentwerte, CMYK vier Prozentwerte. Raute und erforderliche Prozentzeichen müssen vorhanden sein; Leerraum um Kommas ist erlaubt. Die strenge Grammatik verhindert, dass unvollständige Werte als andere Farbe gelten. Alphakanäle, CSS-Farbnamen, moderne durch Leerzeichen getrennte Syntax und weitere Farbräume sind ausgeschlossen. Entspricht der Text keiner dokumentierten Form, erhalten Sie einen Fehler statt eines möglicherweise falschen Ergebnisses.

Verstehen Sie Begrenzung und Rundung

Nach der Strukturprüfung wird jeder Kanal auf den Bereich seines Modells begrenzt. RGB liegt zwischen 0 und 255. Der HSL-Farbton liegt zwischen 0 und 360, Sättigung und Helligkeit zwischen 0 und 100 Prozent. Auch CMYK-Komponenten liegen zwischen 0 und 100 Prozent. Daher entspricht <code>rgb(300, -8, 20)</code> der Farbe <code>rgb(255, 0, 20)</code>. Fehlende Kanäle, falsche Funktionsnamen oder fehlende Prozentzeichen werden dadurch nicht repariert. Die sRGB-Berechnung ist deterministisch. HEX und RGB werden ganzzahlig gerundet; HSL und CMYK behalten höchstens zwei Dezimalstellen ohne unnötige Nullen. Quell- und Zielformat in der Antwort erleichtern automatischen Systemen die Kontrolle des gewählten Analysewegs.

Nutzen Sie das Ergebnis in CSS und Automatisierung

Die Antwort enthält einen normalisierten Wert zum Kopieren sowie kompakte Angaben zu Quelle und Ziel. HEX erscheint sechsstellig und großgeschrieben; RGB, HSL und CMYK verwenden beständige Kommas und Abstände. Sie können Design-Tokens an Bibliotheken anpassen, importierte Themes prüfen oder Formularfarben ohne Grafikabhängigkeit normalisieren. CMYK ist hier eine mathematische Umrechnung, kein druckerspezifisches ICC-Profil und keine Zusage für die physische Tintenwirkung. Alpha wird nicht erhalten. Der Browser eignet sich für einzelne Umrechnungen; jede API-Anfrage kostet $0.002 und stellt dieselbe deterministische Operation für Skripte, Builds, Tests und kontrollierte Stapel bereit.

Anwendungsfälle

Design-Tokens vereinheitlichen

Wandeln Sie gemischte HEX-, RGB-, HSL- und CMYK-Einträge in die vom Token-Dokument verlangte Schreibweise um.

Einen CSS-Wert vorbereiten

Erzeugen Sie aus einer gelieferten Farbe einen sauberen HSL-, RGB- oder HEX-Ausdruck für Ihr Stylesheet.

Importierte Farben prüfen

Weisen Sie fehlerhafte Datensätze ab und begrenzen Sie gültige, aber überschrittene Kanäle sicher.

Häufige Fragen

Was kostet eine Umrechnung per API?

Jede API-Anfrage kostet $0.002. Das Browserwerkzeug eignet sich für einzelne Umrechnungen.

Welche Eingabeformate werden unterstützt?

Unterstützt werden drei- oder sechsstellige HEX-Werte, rgb() mit drei Kanälen, hsl() mit Farbton und zwei Prozentwerten sowie cmyk() mit vier Prozentwerten.

Was geschieht mit einem Kanal außerhalb des Bereichs?

Ein korrekt geschriebener Kanal wird begrenzt: RGB auf 0–255, Farbton auf 0–360 und HSL- oder CMYK-Prozentwerte auf 0–100.

Werden Alphakanäle unterstützt?

Nein. HEX mit Alpha sowie rgba()- und hsla()-Ausdrücke werden als fehlerhafte Eingaben abgewiesen.

Warum wird fehlerhafte Syntax nicht korrigiert?

Das Erraten fehlender Syntax könnte die beabsichtigte Farbe ändern. Nur numerische Überschreitungen werden begrenzt.

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/web/color-format-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/web/color-format-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#ff8800","target_format":"hsl"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-format-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#ff8800",
    "target_format": "hsl"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-format-convert",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#ff8800",
    "target_format": "hsl"
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"color":"#ff8800","target_format":"hsl"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-format-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

{
  "color": "#ff8800",
  "target_format": "hsl"
}

Beispiel-Antwort

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

`timeout_sec`	30
`max_crawl_pages`	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 →