Farb-Konverter & -Picker

HEX#6366f1
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 1)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HSVhsv(239, 59%, 95%)
OKLCHoklch(0.5854 0.2041 277.12)

Farbpalette

Komplementär
Analog
Triadisch

Kontrastprüfer (WCAG)

Beispieltext
17.74Kontrastverhältnis
Normal AA
Normal AAA
Groß AA
Groß AAA

Was ist ein Farbkonverter?

Der Farb-Konverter ist ein komplettes Werkzeug für Designer und Frontend-Entwickler. Fügen Sie eine Farbe in jedem gängigen Format ein — HEX, RGB, RGBA, HSL, HSLA, HSV/HSB oder das moderne OKLCH — oder wählen Sie sie visuell, und alle anderen Formate werden sofort mit einer Kopier-Schaltfläche aktualisiert. Über die Umwandlung hinaus erzeugt er aus Ihrer Grundfarbe eine harmonische Palette (komplementäre, analoge und triadische Farben) und enthält einen WCAG-Kontrastprüfer, damit Text vor jedem Hintergrund zugänglich bleibt. Alles läuft in Ihrem Browser — schnell, privat und jederzeit verfügbar.

Farben auf Bildschirmen werden durch Zahlen definiert, aber diese Zahlen können in verschiedenen Formaten geschrieben werden — HEX (#ff6b35), RGB (255, 107, 53), HSL (18°, 100%, 60%) und mehr. Jedes Format wird in einem anderen Kontext bevorzugt.

Farben Konvertieren

  1. Nutzen Sie den Farbwähler oder geben Sie einen Wert (z. B. #6366f1 oder rgb(99,102,241)) ein.
  2. Lesen Sie jedes Format in der Liste und kopieren Sie es mit seiner Schaltfläche.
  3. Erkunden Sie die erzeugte Palette und prüfen Sie mit dem Kontrastprüfer Text vor einem Hintergrund.

Anwendungen

  • Eine Markenfarbe von HEX (vom Designer geliefert) in HSL umwandeln, um Helligkeit oder Sättigung in CSS anzupassen.
  • Einen RGB-Wert aus einem Grafiktool in einen CSS-fertigen HEX-String übersetzen.
  • Beim Wechsel zwischen Formaten für Code prüfen, wie ein Farbwert optisch aussieht.
  • Farbtheorie lernen, indem man sieht, wie dieselbe Farbe in verschiedenen Modellen dargestellt wird.

Wie Farbkonvertierung funktioniert

HEX ist einfach RGB in Basis 16: #ff6b35 bedeutet R=255, G=107, B=53. HEX in RGB umzuwandeln ist eine Dekodierung von Basis 16 zu Basis 10. RGB in HSL umzurechnen ist eine Formel.

Das Tool zeigt eine Live-Vorschau der Farbe, damit du die Konvertierung auf einen Blick bestätigen kannst.

Vorteile

  • Wandeln Sie sofort zwischen HEX, RGB, HSL, HSV und OKLCH um, ohne Formeln zu merken.
  • Bauen Sie barrierefreie Oberflächen, indem Sie den WCAG-AA/AAA-Kontrast für normalen und großen Text prüfen.
  • Erzeugen Sie komplementäre, analoge und triadische Paletten, um Ihre Designarbeit zu beschleunigen.

Farbumwandlung Sofort und Lokal

Farbformat-Umwandlungen werden mit JavaScript-Algorithmen in deinem Browser berechnet. Die Farbwerte, die du eingibst, werden niemals an unsere Server übertragen; die gesamte Umwandlung bleibt auf deiner Maschine.

FAQ

Welche Farbformate werden unterstützt?

HEX, RGB, RGBA, HSL, HSLA, HSV/HSB und OKLCH. Fügen Sie eines davon ein oder nutzen Sie den visuellen Picker — alle anderen werden sofort aktualisiert.

Was ist OKLCH?

OKLCH ist ein moderner, wahrnehmungsgleichmäßiger Farbraum, der von CSS unterstützt wird. Er lässt Helligkeits- und Chroma-Änderungen natürlicher wirken als HSL.

Wie funktioniert der Kontrastprüfer?

Er berechnet das WCAG-Kontrastverhältnis zweier Farben und zeigt, ob sie AA und AAA für normalen und großen Text bestehen.

Was ist der Unterschied zwischen HSL und HSB/HSV?

Bei HSL ist 100% Helligkeit immer Weiß und 0% immer Schwarz; bei HSB ergibt 100% Helligkeit mit 100% Sättigung den reinen Farbton. CSS verwendet HSL; Photoshop verwendet HSB.