Konvertieren Sie Farben zwischen Hex, RGB und HSL mit einem API-Aufruf
Senden Sie eine Farbe als HEX, RGB oder HSL und erhalten Sie alle drei Darstellungen in einem POST zurück. Erstellen Sie Design-Tokens, normalisieren Sie CMS-Eingaben und generieren Sie Themenskalen ohne Farbbibliothek.
Farbkonvertierungsmathematik ist die Art von Code, den Sie einmal schreiben, auf subtile Weise falsch machen und zwischendurch kopieren Projekte für immer. Hex zu RGB ist unkompliziert; Bei RGB zu HSL gibt es stufenweise Fehler leben. Dieser Endpunkt nimmt eine Farbe in einem der drei Formate an und gibt alle drei auf einmal zurück Sie hören auf, Konvertierungsfunktionen mit sich herumzutragen.
Die Anfrage
Die Antwort gibt Ihnen die Hex-Zeichenfolge an {`{ r, g, b }`} Objekt und ein
{`{ h, s, l }`} Objekt zusammen:
Das Eingabeformat spielt keine Rolle. Passieren rgb(62, 201, 151) oder eine HSL-Zeichenfolge und Sie erhalten die
die gleichen drei Darstellungen zurück. Hex funktioniert mit oder ohne #:
Generieren Sie eine Design-Token-Skala aus einer Markenfarbe
HSL ist das Format, auf dem es sich zu bauen lohnt. Da es den Farbton von der Helligkeit trennt, können Sie eine erzeugen Sie erhalten eine vollständige Farbton- und Schattierungsskala, indem Sie Farbton und Sättigung konstant halten und den Helligkeitswert erhöhen. Konvertieren Sie Ihren Marken-Hex einmal in HSL und gehen Sie dann die Helligkeit durch, um die Skala a von 50 bis 900 zu erzeugen Designsystem benötigt:
Führen Sie dies in einem Build-Schritt aus und schreiben Sie die Ausgabe in eine CSS-Variablendatei. Sie erhalten eine koordinierte Palette aus einer einzigen Quellfarbe, und die Änderung der Markenfarbe regeneriert die gesamte Skala:
Benötigen Sie eine vollständige Palette statt einer einzelnen Konvertierung? Der /v1/color/palette
Der Endpunkt nimmt eine Grundfarbe und gibt einen koordinierten Satz von Farbtönen und Komplementärfarben zurück.
So können Sie ein Thema rund um eine Markenfarbe erstellen, ohne jedes einzelne Farbfeld von Hand auswählen zu müssen.
In ein CMS eingefügte Farben normalisieren
Inhaltsredakteure fügen Farben in das Format ein, das ihr Designtool exportiert: ein Hex aus Figma, ein
rgb() aus einem Screenshot-Tool, ein HSL aus einem CSS-Snippet. Führen Sie jeden eingefügten Wert aus
durch den Endpunkt beim Speichern und Speichern des normalisierten Hex. Ihr Rendering-Code befasst sich dann mit einem
formatieren, und der Editor fügt weiterhin alles ein, was ihm passt.
Wo es passt
Für interaktive UI-Mathematik im Browser reicht eine lokale Funktion aus. Die API verdient ihren Platz im Build Schritte, Backends und jede Sprache ohne ein einfarbiges Paket: Ein einzelner HTTP-Aufruf ersetzt a Abhängigkeit. Die Farbkonvertierung ist einer von etwa 200 Einzweck-Endpunkten auf Botoi, die alle hinter uns liegen ein Schlüssel mit 5 Anforderungen/Min. frei.
Versuchen Sie die Konvertierung im interaktiver Spielplatz, Durchsuchen Sie die Vollständige API-Dokumente, oder verbinden Sie die MCP-Server um Farben direkt aus Claude oder Cursor zu konvertieren.
FAQ
- Welche Farbformate akzeptiert und gibt die API zurück?
- Senden Sie eine Farbe als HEX, RGB oder HSL und die Antwort gibt alle drei Darstellungen gleichzeitig zurück. Hex-Strings funktionieren mit oder ohne das führende #-Präfix. Mit einem Aufruf erhalten Sie die Hex-Zeichenfolge, ein {r, g, b}-Objekt und ein {h, s, l}-Objekt, sodass Sie Konvertierungsberechnungen nie von Hand schreiben müssen.
- Warum Farben über eine API konvertieren statt im Browser?
- Für einmalige UI-Berechnungen führen Sie dies im Browser durch. Die API verdient ihren Platz in Build-Schritten und Backends: beim Generieren von Design-Tokens zur Build-Zeit, beim Normalisieren von in ein CMS eingefügten Farben oder beim serverseitigen Erstellen thematischer Assets, bei denen Sie keine Farbbibliothek versenden möchten. Es handelt sich um einen einzelnen HTTP-Aufruf aus einer beliebigen Sprache, auch solchen ohne gutes Farbpaket.
- Kann ich eine vollständige Palette erstellen und nicht nur eine Farbe konvertieren?
- Ja. Der Farb-/Palettenendpunkt nimmt eine Grundfarbe und gibt einen koordinierten Satz von Farbtönen und Komplementärfarben zurück. Verwenden Sie „color/convert“, wenn Sie eine bekannte Farbe haben und deren andere Darstellungen benötigen, und „color/palette“, wenn Sie eine Markenfarbe haben und eine Skala benötigen, um ein Thema darauf aufzubauen.
- Wie helfen HSL-Werte bei der Themengestaltung?
- HSL trennt Farbton von Sättigung und Helligkeit, sodass Sie eine Farbton- und Schattierungsskala erstellen können, indem Sie Farbton und Sättigung konstant halten und die Helligkeit erhöhen. Darüber lässt sich viel leichter nachdenken, als drei RGB-Kanäle zu verschieben. Konvertieren Sie Ihren Marken-Hex einmal in HSL und generieren Sie dann die Skala von 50 bis 900, indem Sie den Helligkeitswert durchlaufen.
- Ist die Nutzung der Farb-API kostenlos?
- Ja. Für die Farbkonvertierung gilt dasselbe kostenlose Kontingent wie für den Rest von Botoi: 5 Anfragen pro Minute, ohne dass ein API-Schlüssel erforderlich ist, und höhere Limits bei kostenpflichtigen Plänen. Es handelt sich um einen von rund 200 Einzweck-Endpunkten unter einem Schlüssel.
Starte mit botoi zu entwickeln
150+ API-Endpunkte für Abfragen, Textverarbeitung, Bildgenerierung und Entwickler-Tools. Kostenloser Tarif, keine Kreditkarte nötig.