NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →Farbkonverter (HEX, RGB, HSL – sofort)
Gib einen Hex-Code, ein RGB-Triplett oder einen HSL-Wert ein – die anderen Formate werden sofort mit einer sichtbaren Vorschau aktualisiert. Nützlich für Designer, Webentwickler und alle, die Farben zwischen Tools abgleichen.
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)Verwandte Tools
Wie es funktioniert
Drei Möglichkeiten, dieselbe Farbe zu beschreiben
HEX, RGB und HSL sind drei Notationen für sRGB-Farben. HEX ist eine Kurzschreibweise für RGB: #FF6B35 bedeutet Rot=255, Grün=107, Blau=53. RGB beschreibt eine Farbe durch die Menge an rotem, grünem und blauem Licht, das gemischt wird (jeweils 0–255). HSL kodiert dieselbe RGB-Farbe in Form von Farbton (welche Farbe), Sättigung (wie lebhaft) und Helligkeit (wie hell) um.
Alle drei sind äquivalent – du kannst ohne Verlust hin- und herkonvertieren. Designer bevorzugen HSL zum Anpassen von Tönen (das Erhöhen der Helligkeit lässt den Farbton stabil), während Entwickler normalerweise HEX aus Design-Tools direkt in CSS einfügen. RGB taucht am häufigsten bei der Arbeit mit Bildverarbeitungs- oder Canvas-APIs auf.
Wann welches Format zu verwenden ist
HEX: Kopieren und Einfügen aus Designs, Figma-Exporten, Markenrichtlinien, CSS-Farbliteralen. Kompakt, aber schwer zu lesen.
RGB: Programmatische Farbarbeit (Canvas, Bildbearbeitung), Zugänglichkeitsprüfungen (Kontrastberechnungen arbeiten in linearem RGB) und wenn du genaue ganzzahlige Werte einstellen möchtest.
HSL: Farben nach Gefühl anpassen – 'eine etwas gesättigtere Version erstellen', 'eine dunklere Variante für Hover-Zustände', oder eine Palette durch schrittweises Ändern des Farbtons generieren. Für diese Aufgaben viel einfacher zu handhaben als HEX.
Was du in diesem Tool nicht siehst
Wir lassen den Alphakanal (Transparenz) vorerst weg – aber #RRGGBBAA funktioniert in allen modernen Browsern, wenn du zwei Hexadezimalstellen für die Deckkraft anfügst (00 = transparent, FF = undurchsichtig).
Wir behandeln auch keine breiteren Farbräume (P3, Rec.2020, OKLCH). Für die meisten Webarbeiten sind die auf sRGB basierenden HEX/RGB/HSL die richtige Wahl. Wenn du HDR- oder Weitfarb-Displays anvisierst, schau dir die Syntaxen des CSS Color Module Level 4 an.
Häufige Fragen
›Kann ich von HSL zu HEX ohne Präzisionsverlust hin- und herkonvertieren?
Meistens. HSL wird als ganze Grad und Prozent gespeichert, sodass 360 × 101 × 101 = 3,7 Mio. HSL-Werte auf 16,7 Mio. RGB-Kombinationen abgebildet werden. Einige winzige Rundungen können an den Grenzen auftreten. Verwende HEX als kanonisches Format für exakte Speicherung.
›Werden 3-stellige HEX-Codes unterstützt?
Ja. #f60 wird als #ff6600 behandelt. Beide erweitern sich auf dasselbe RGB-Triplett.
›Warum geht HSL nicht bis 360 bei Sättigung/Helligkeit?
Der Farbton ist in Grad (0–360 um das Farbrad). Sättigung und Helligkeit sind Prozentsätze (0–100).
›Ist HSL dasselbe wie HSB oder HSV?
Nein. HSV (und HSB) ersetzen 'Helligkeit' durch 'Wert', ein anderes Helligkeitsmodell. HSLs L=50% ist volle Farbe; HSVs V=100% ist volle Farbe. Wir verwenden HSL, weil es CSS entspricht.
›Wird Transparenz unterstützt?
Noch nicht. Füge vorerst ein zweistelliges Alpha an den HEX-Code an (z. B. #00000080 für 50 % Schwarz).
›Warum zeigt RGB keine 0–1-Gleitkommazahlen?
Weil die meisten Kontexte (CSS, Design-Tools) 0–255-Ganzzahlen verwenden. Für Shader-Arbeit durch 255 dividieren, um 0–1-Gleitkommazahlen zu erhalten.
›Woher bekommen Designer die richtigen Farben?
Aus Markenrichtlinien, Design-Tokens oder Palettengeneratoren. Das Kontrastprüf-Tool kann ein Vordergrund-/Hintergrund-Paar auf Erfüllung der WCAG-AA/AAA-Anforderungen überprüfen.
›Ist der Rechner genau?
Ja. Er verwendet standardmäßige sRGB-Konvertierungsmathematik. Hin-und-Rück-Unterschiede entstehen nur durch die ganzzahlige Quantisierung von HSL.
Empfohlene Dienste
HinweisCloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →