Farbkonverter

Was ist ein Farbkonverter?

Der Farbkonverter ist ein Online-Tool, mit dem Sie Farben in Echtzeit zwischen HEX, RGB und HSL umrechnen können. Das ist besonders hilfreich, wenn ein Farbwert aus einem Designsystem, einer UI-Datei oder einer Markenrichtlinie in mehreren Schreibweisen für Web, Produkt und Frontend verfügbar sein muss.

Sie geben einen Wert ein oder wählen eine Farbe direkt im Browser aus und sehen sofort die passenden Entsprechungen in den anderen Formaten. Zusätzlich können Sie einzelne Werte oder fertigen CSS-Code kopieren, kürzlich verwendete Farben wieder aufrufen und Abstimmungen zwischen Design und Entwicklung deutlich beschleunigen.

Wann sich dieses Tool lohnt

• Webentwicklung – Farbwerte aus Mockups in direkt nutzbare CSS-, SCSS- oder Component-Token-Werte übertragen
• UI/UX-Design – Helligkeit oder Sättigung variieren, ohne die Farbwelt einer bestehenden Oberfläche zu verlassen
• Designsysteme – Einen Farbton in HEX, RGB und HSL für Designer, Entwickler und Produktteams konsistent dokumentieren
• Barrierefreiheit – Exakte Farbwerte prüfen, bevor Kontrast und Lesbarkeit bewertet werden
• Arbeit zwischen Tools – Farben zwischen Figma, Photoshop, Illustrator und dem finalen Code sauber abgleichen
• Präsentationen und Unterlagen – Markenfarben schnell für Folien, Reports oder Vertriebsunterlagen übernehmen

Wichtige Funktionen

• Sofortige Umrechnung – Sobald sich ein HEX-, RGB- oder HSL-Wert ändert, werden die anderen beiden Formate unmittelbar aktualisiert.
• Visueller Farbwähler – Wählen Sie eine Farbe direkt im Browser und kontrollieren Sie sofort die Vorschau, bevor Sie sie weiterverwenden.
• Kopieren nach Format – Übernehmen Sie gezielt HEX, RGB, HSL oder den kompletten CSS-Snippet je nach Anwendungsfall.
• Lokaler Farbverlauf – Die zuletzt verwendeten Farben bleiben im Browser erhalten und lassen sich in einer laufenden Review schnell erneut aufrufen.
• Zufällige Farbe als Ausgangspunkt – Erzeugen Sie mit einem Klick eine neue Referenzfarbe, wenn Sie Varianten oder erste Ideen testen möchten.
• Saubere Eingabebegrenzung – RGB- und HSL-Felder bleiben in gültigen Bereichen, und auch gekürzte HEX-Schreibweisen werden unterstützt.

So nutzen Sie den Farbkonverter

1. Ausgangsfarbe festlegen – Nutzen Sie den Farbwähler oder geben Sie einen bekannten HEX-, RGB- oder HSL-Wert direkt ein.
2. Vorschau prüfen – Kontrollieren Sie im oberen Bereich, ob die Farbwirkung wirklich zu Ihrem Layout, Produkt oder Styleguide passt.
3. Entsprechungen ablesen – Der Konverter zeigt denselben Farbton parallel in den drei wichtigsten Webformaten an.
4. Ergebnis kopieren – Kopieren Sie das gewünschte Format einzeln oder übernehmen Sie den CSS-Code direkt in Ihr Stylesheet.

HEX, RGB und HSL im Überblick

HEX

HEX ist die typische Schreibweise für Farben im Web und nutzt das Muster #RRGGBB. Jedes Zeichenpaar beschreibt die Intensität von Rot, Grün und Blau in Hexadezimalwerten und eignet sich deshalb sehr gut für Stylesheets, Tokens und technische Dokumentation.

• Beispiele: #D4AF37 für Gold, #FF5733 für Orange und #3498DB für Blau
• Kurzschreibweise: #FF0000 kann als #F00 notiert werden, wenn sich die Ziffernpaare wiederholen
• Typische Nutzung: CSS, Design Tokens, schnelle Übergaben zwischen Design und Entwicklung

RGB

RGB beschreibt einen Farbton über die Kanäle Rot, Grün und Blau mit Werten von 0 bis 255. Das Format ist hilfreich, wenn Farben skriptgesteuert verändert, animiert oder mit Exporten aus Grafiksoftware verglichen werden.

• Beispiele: rgb(212, 175, 55), rgb(255, 255, 255) und rgb(0, 0, 0)
• Prinzip: Alle Kanäle auf 0 ergeben Schwarz, alle Kanäle auf 255 ergeben Weiß
• Typische Nutzung: JavaScript, Canvas, Animationen und farbbasierte Rechenlogik

HSL

HSL ordnet Farben nach Farbton, Sättigung und Helligkeit. Dieses Format ist besonders praktisch, wenn Sie Varianten heller, gedeckter oder kräftiger machen möchten, ohne die zugrunde liegende Farbfamilie zu wechseln.

• Beispiele: hsl(46, 67%, 52%) für Gold und hsl(0, 100%, 50%) für reines Rot
• Farbton (H): bewegt sich als Winkel zwischen 0° und 360°
• Sättigung (S): bestimmt die Intensität zwischen 0 % und 100 %
• Helligkeit (L): ordnet die Farbe zwischen Schwarz, reinem Farbton und Weiß ein

Tipps für den praktischen Einsatz

• Varianten über HSL ableiten – Halten Sie den Farbton konstant und passen Sie vor allem die Helligkeit an, um Hover-Zustände oder Hintergrundabstufungen zu bauen.
• Wichtige Referenzen speichern – Über den Verlauf vergleichen Sie mehrere Optionen, ohne Farbcodes erneut eintippen zu müssen.
• Kontrast vor dem Go-live prüfen – Ein markenkonformer Farbton ist nicht automatisch auch gut lesbar in Buttons, Badges oder Textflächen.
• Format passend zum Workflow wählen – HEX ist meist am schnellsten für CSS, RGB für Skripte und HSL für visuelle Exploration.

Details

Die Ergebnisse des Farbkonverters werden aus Ihrem Eingabewert und dem jeweils verwendeten Ausgangsformat berechnet.

Wenn die Farbe Teil einer Markenrichtlinie oder einer Accessibility-Prüfung ist, sollten Sie sie zusätzlich mit der offiziellen Projektvorgabe abgleichen.

Häufig gestellte Fragen