Farbkonverter — Online-Konverter für HEX, RGB, HSL _

Was ist Farbkonvertierung?

Jede Farbe, die Ihr Browser darstellt, ist letztlich ein sRGB-Tripel — drei Zahlen zwischen 0 und 255 für die Rot-, Grün- und Blaukanäle, plus ein optionaler Alpha-Wert. Die CSS Color Level 4-Spezifikation definiert mehrere Textformate, die zum selben Tripel zurückführen, sowie den wahrnehmungsuniformen OKLCH-Raum. Dieses Tool liest jedes davon, konvertiert in alle und meldet das WCAG-2.1-Kontrastverhältnis gegen eine zweite Farbe, damit Sie barrierefreie Oberflächen mit Vertrauen ausliefern können.

Wie funktioniert die Farbkonvertierung?

Die Konvertierung ist eine Reihe wohldefinierter linearer und nichtlinearer Transformationen. Jeder Schritt läuft in Ihrem Browser — keine Eingabe erreicht jemals unsere Server:

1. Ihre Eingabe wird geparst. Das Tool erkennt automatisch 3-, 4-, 6- oder 8-stelliges HEX, die funktionalen Formen rgb()/rgba()/hsl()/hsla()/hsv()/hwb() in entweder klassischer Komma-Syntax oder moderner Slash-Alpha-Syntax sowie jede der 150 benannten CSS-Farben (rebeccapurple eingeschlossen).
2. Die geparste Farbe wird auf kanonisches sRGB normalisiert — vier Fließkommazahlen {r, g, b, a}, jeweils im Bereich 0–1. Dies ist die einzige Quelle der Wahrheit, aus der jedes Ausgabeformat abgeleitet wird.
3. HEX entsteht durch Rundung jedes Kanals auf seinen 0–255-Byte-Wert und das Zusammenfügen der Hexziffern. RGB / RGBA geben dieselben Bytes aus. HSL und HSV wenden die Standard-W3C-Algorithmen für zylindrische Koordinaten an; HWB leitet den Farbton aus HSV ab, das Weiß aus min(r, g, b) und das Schwarz aus 1 - max(r, g, b).
4. CMYK ist eine naive Näherung — k = 1 - max(r, g, b), dann c, m, y aus den Restkanälen. Sie eignet sich für die Bildschirmvorschau, aber nicht für den Druck: Echte CMYK-Ausgabe erfordert ein ICC-Profil, das dieses Tool absichtlich nicht einbettet.
5. OKLCH folgt dem Vorwärtspfad aus css-color-4: sRGB wird linearisiert, durch die LMS-Matrix multipliziert, kubikwurzelt, durch die LMS-zu-OKLab-Matrix multipliziert und schließlich vom rechteckigen OKLab in das polare OKLCH umgewandelt. OKLCH ist wahrnehmungsuniform, was es zum richtigen Raum macht, um Paletten zu entwerfen, die für das menschliche Auge ausgewogen wirken.

Warum diesen Farbkonverter verwenden?

• Datenschutz: Jede Konvertierung läuft in Ihrem Browser mit reinem JavaScript. Die eingefügte Farbe verlässt niemals Ihr Gerät, was bei unveröffentlichten Markenarbeiten, internen Designsystemen und Kundenmockups unter NDA wichtig ist.
• Designer-zu-Entwickler-Übergabe: Fügen Sie den HEX-Wert aus Figma ein und lesen Sie die rgb()-Zeichenkette für eine Tailwind-Konfiguration zurück, die hsl()-Zeichenkette für eine CSS-Custom-Property oder die oklch()-Zeichenkette für eine moderne Palette — alle Formate an einem Ort, kein Kopieren-Einfügen zwischen Tabs.
• WCAG-Genauigkeit: Der Kontrastprüfer verwendet die exakte WCAG-2.1-Formel für relative Leuchtdichte und die veröffentlichten AA- (4,5 / 3,0) und AAA-Schwellen (7,0 / 4,5) für Normal- und Großtext. Das ausgegebene Verhältnis stimmt bis auf 0,01 mit manuellen Rechnern überein.
• Dark-Mode- und Palettenableitung: HSL und OKLCH legen die Helligkeit als einzelnen Kanal offen, sodass es einfach ist, eine Markenfarbe entlang der Helligkeitsachse nach oben oder unten zu verschieben, um passende Dark-Mode-Tokens abzuleiten oder eine 10-stufige Palettenrampe aus einem einzigen Ausgangswert zu erzeugen.

Was sind häufige Anwendungen der Farbkonvertierung?

Farbkonvertierung taucht in der Webentwicklung, im Design und in der Barrierefreiheitsarbeit auf:

• Designsysteme: Eine Marken-HEX in die passenden HSL- und OKLCH-Tokens für eine CSS-Custom-Property-Skala konvertieren und dann sicherstellen, dass jede Tokenkombination WCAG AA gegen den Seitenhintergrund besteht.
• Barrierefreiheits-Audits: Ein Vorder- und Hintergrundpaar von einem echten Produktbildschirm einfügen und das Kontrastverhältnis plus AA/AAA-Urteile für Text mit Normal- und großer Schriftstärke auf einen Blick ablesen.
• Tool-übergreifende Hin- und Rückwege: Eine Farbe aus einem Screenshot-Picker (HEX) ziehen, hier einfügen und die hsl()- oder oklch()-Zeichenkette direkt in Tailwind, Figma-Tokens oder ein CSS-in-JS-Theme kopieren.

Wie sieht ein Beispiel für Farbkonvertierung aus?

Nehmen Sie das berühmte rebeccapurple. Die Namensfarb-Suche löst es zu #663399 auf. Die RGB-Konvertierung ergibt rgb(102, 51, 153). Die HSL-Konvertierung ergibt hsl(270, 50%, 40%) — ein violetter Farbton, halb gesättigt, zu vier Zehnteln hell. Wird diese Farbe mit dem Kontrast-Tool gegen reines Weiß geprüft, ergibt sich ein Verhältnis nahe 7,39, was AAA (7,0) für Normaltext und AAA (4,5) für Großtext besteht — eine kräftige, barrierefreie Vordergrundwahl. Wenn man #663399 über RGB → HSL → RGB → HEX wieder zurückführt, erhält man die ursprüngliche Zeichenkette exakt, Byte für Byte.

Verwenden Sie diesen Konverter als schnelle Referenz für jede Farbe, die Ihnen begegnet — im Code, in Designdateien oder in einem Screenshot — und den Kontrastprüfer als Sanity-Check vor dem Ausliefern. Alles läuft lokal, nichts wird protokolliert, und die Konvertierungsmathematik folgt den veröffentlichten W3C- und WCAG-Spezifikationen, sodass die Zahlen mit dem übereinstimmen, was Ihr Audit-Tool oder die Browser-DevTools melden würden.