Site Tools

Farb-Konverter & -Picker

Ad Space
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
Ad Space

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.

So verwenden Sie den Farb-Konverter

  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.

Vorteile und Anwendungsfälle

  • 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.

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.