Farbkonverter

Please enter a valid HEX color (e.g. var(--color-brand-green) or #FFF).

Das Farbkonverter-Tool vereinfacht das Farbmanagement, indem es dir erlaubt, Farben mühelos zwischen HEX-, RGB- und HSL-Formaten zu konvertieren. Ideal für Designer und Entwickler stellt dieses Werkzeug Farbkonsistenz über Web- und Grafikdesign-Projekte hinweg sicher. Gib einfach einen HEX-Wert ein oder nutze den interaktiven Farbwähler für sofortige Konvertierungen.

Built by Bob Article by Lace QA by Ben Shipped

Anwendung

  1. 1

    Gib einen HEX-Farbcode in das Eingabefeld ein oder nutze den Farbwähler, um eine Farbe auszuwählen.

  2. 2

    Das Tool zeigt automatisch die konvertierten RGB- und HSL-Werte in Echtzeit an.

  3. 3

    Kopiere jedes der konvertierten Farbformate mit einem einzigen Klick in deine Zwischenablage.

Verwandte Tools

📏 REM to PX Converter ✨ CSS Animation Generator 📐 Unit Converter

Häufig gestellte Fragen

Ratings & Reviews

Rate this tool

Sign in to rate and review this tool.

Loading reviews…

Was der Farbkonverter macht

Wähle eine Farbe in jedem Standardformat — HEX, RGB, HSL oder HSV — und der Microapp-Farbkonverter zeigt dir die äquivalenten Werte in jedem anderen Format, nebeneinander. Plus ein Live-Vorschau-Swatch, sodass du genau sehen kannst, mit welcher Farbe du arbeitest. Alles in deinem Browser, sofort.

Designer und Entwickler müssen ständig zwischen Formaten übersetzen: Eine Marken-Spec nutzt HEX, dein Code will RGB mit Deckkraft, ein Design-System tokenisiert HSL, dein Bild-Editor exportiert RGBA. Konvertierungen per Hand sind mühsam und fehleranfällig. Das ist die immer-korrekte Version.

So nutzt du es

  1. Tippe oder füge einen Farbwert in eines der vier Eingabefelder (HEX, RGB, HSL, HSV) ein.
  2. Die anderen drei Felder aktualisieren sich sofort mit den konvertierten Äquivalenten. Das Vorschau-Swatch zeigt die tatsächliche Farbe.
  3. Nutze den Picker für visuelle Auswahl — ziehe das Farbquadrat oder den Farbton-Schieber, und alle vier Format-Outputs aktualisieren sich in Echtzeit.
  4. Klicke „Kopieren" neben jedem Format, um es in deine Zwischenablage zu legen.
Durchgerechnetes Beispiel. Microapps Marken-Grün:
HEX: #1B6B45
RGB: rgb(27, 107, 69)
HSL: hsl(150, 60%, 26%)
HSV: hsv(150, 75%, 42%)
Dieselbe Farbe, vier Formate. Nutze, was zu deinem Tool passt.

Die vier Formate erklärt

HEX. Sechs Hex-Zeichen, die Rot, Grün und Blau darstellen (zwei für jeden). #1B6B45 heißt R=0x1B (27), G=0x6B (107), B=0x45 (69). Das häufigste Format für Webdesign — jede CSS-Datei ist voll von HEX. Drei-Zeichen-Kurzformen (#1B6) verdoppeln jedes Zeichen, aber sie funktionieren nur für Farben mit gepaarten Hex-Ziffern.

RGB. Drei Ganzzahlen von 0-255, die dasselbe Rot, Grün, Blau darstellen. rgb(27, 107, 69) ist identisch zu #1B6B45 — dieselben Zahlen in Dezimal. RGB hat eine Alpha-Variante, RGBA, für teilweise Transparenz: rgba(27, 107, 69, 0.5) ist halb-deckendes Grün.

HSL. Hue (Farbton, 0-360 Grad auf einem Farbrad), Saturation (Sättigung, 0-100 % der Farbintensität), Lightness (Helligkeit, 0-100 % von Schwarz zu Weiß). hsl(150, 60%, 26%) heißt ein Grün-Cyan-Farbton, mäßig gesättigt, ziemlich dunkel. HSL ist intuitiv für Designer — du kannst „mach es dunkler" anpassen, indem du Helligkeit senkst, ohne den Farbton zu beeinflussen.

HSV. Hue, Saturation, Value (manchmal HSB genannt). Ähnlich wie HSL, aber Value repräsentiert Helligkeit von Schwarz-zu-Reinfarbe statt Schwarz-zu-Weiß. HSV ist, was die meisten Bild-Editoren (Photoshop, Figma) in ihren Farbwählern nutzen.

Wann welches Format zu nutzen

Nutze dieses FormatWenn
HEXCSS, Design-Specs, Slack-Nachrichten, überall wo du einen einzigen kurzen String brauchst
RGB / RGBAProgrammatische Farbmanipulation, teilweise Transparenz, CSS-Animationen, die Farben interpolieren
HSL / HSLATheme-Generierung, Farbpaletten, programmatisches Aufhellen/Abdunkeln einer Markenfarbe
HSVBild-Editoren, Farbwähler, Orte wo „Value" besser auf wahrgenommene Helligkeit mapt

Die Feinheiten, denen Designer begegnen

HSL-Helligkeit vs HSV-Value — sie sind NICHT dasselbe. Zwei Farben mit HSL-Helligkeit 50 % können sehr unterschiedlich in der Helligkeit aussehen, weil Helligkeit in HSL der Mittelpunkt zwischen Schwarz und Weiß ist. HSV-Value 50 % heißt „halb so hell wie die rein-gesättigte Version". Beim Automatisieren von „mach es 20 % dunkler" gibt HSL über Farbtöne hinweg gleichmäßigere Ergebnisse als HSV.

Hex ist standardmäßig sRGB. Wenn du #1B6B45 schreibst, interpretiert der Browser es als sRGB. Moderne Displays haben oft breitere Farbumfänge (P3, AdobeRGB), und CSS unterstützt jetzt deren Spezifikation: color(display-p3 0.106 0.420 0.270). Für die meiste Webarbeit bleibe bei sRGB / HEX; für HDR- oder druck-nahe Arbeit zählen die breiteren-Farbumfang-Formate.

Alpha (Transparenz) gilt nicht für HEX. Fast. Modernes CSS unterstützt 8-Zeichen-HEX mit Alpha als die letzten 2 Zeichen: #1B6B4580 ist das Marken-Grün bei 50 % Alpha. Ältere Browser ignorieren die Alpha-Bytes. RGBA und HSLA sind universeller unterstützt für Transparenz.

Häufige Farb-Fallstricke

Das # in HEX vergessen. CSS verlangt #1B6B45, nicht 1B6B45. Der Microapp-Konverter akzeptiert beide für Eingabe, gibt aber immer mit dem # aus.

Kleinbuchstaben vs Großbuchstaben HEX. Funktional identisch (#1b6b45 = #1B6B45). Die meisten Design-Systeme standardisieren auf Großbuchstaben für Lesbarkeit; CSS ist es egal.

Rundungsfehler beim Konvertieren. Round-Tripping HSL → HEX → HSL kann einen leicht anderen HSL-Wert produzieren wegen Ganzzahl-Rundung (HEX ist Ganzzahlen; HSL ist Floats). Der Microapp-Konverter nutzt intern hochpräzise Mathematik; du solltest konsistente Ergebnisse sehen, aber im Code kannst du Drift über viele Round-Trips sehen.

Verwandte Tools

Zum Konvertieren nur von HEX zu RGB ist das einfachere Hex zu RGB-Tool schneller. Um den benannten Farbton zu finden, der einem HEX-Wert am nächsten ist, kann der Farbnamen-Finder ihn identifizieren. Um eine koordinierte Farbpalette um eine Basisfarbe zu generieren, siehe den Farbpaletten-Generator.