Sie haben die perfekte Farbe im HEX-Format gefunden, aber das Design-Tool, das Sie verwenden, benötigt RGB. Oder ein Kunde hat eine Farbe in RGB gesendet und Sie brauchen den HSL-Wert für Ihr CSS. Farbformat-Konvertierung ist eine tägliche Aufgabe für Designer und Entwickler. Unser Farbkonverter macht es sofort möglich.
Was Sie benötigen
- Einen Farbwert in einem beliebigen Format (HEX, RGB, HSL oder andere)
- Einen Webbrowser (Chrome, Firefox, Safari oder Edge)
- Kein Konto oder Installation erforderlich
Schritt-für-Schritt-Anleitung
Farbwert eingeben
Öffnen Sie das Tool Farbkonverter. Geben Sie Ihren Farbwert in einem beliebigen unterstützten Format ein oder fügen Sie ihn ein. Geben Sie zum Beispiel #3B82F6 als HEX-Wert, rgb(59, 130, 246) als RGB oder hsl(217, 91%, 60%) als HSL ein. Das Tool erkennt das Format automatisch.
Alle Formatkonvertierungen anzeigen
Das Tool zeigt Ihre Farbe sofort in jedem unterstützten Format an: HEX, RGB, HSL und mehr. Sie sehen eine Live-Vorschau der Farbe zusammen mit allen äquivalenten Werten. Wenn Sie die Farbe anpassen möchten, verwenden Sie den Farbwähler zur visuellen Feinabstimmung.
Das benötigte Format kopieren
Klicken Sie auf die Kopierschaltfläche neben einem beliebigen Format, um den Wert in die Zwischenablage zu kopieren. Fügen Sie ihn direkt in Ihre CSS-Datei, Ihr Design-Tool oder wo auch immer Sie ihn benötigen ein. Kein manuelles Abtippen nötig.
Gut zu wissen Der Farbkonverter läuft vollständig in Ihrem Browser. Er funktioniert nach dem Laden auch offline und erfordert kein Konto oder eine Installation.
Farbformate verstehen
Verschiedene Tools und Kontexte verwenden unterschiedliche Farbformate. Hier erfahren Sie, wann welches Format zum Einsatz kommt:
HEX
Das am häufigsten verwendete Format im Web. Eine HEX-Farbe beginnt mit #, gefolgt von sechs Zeichen (Buchstaben und Zahlen), wie #FF5733.
- Verwendet in: CSS, HTML, Design-Tools (Figma, Sketch, Photoshop)
- Format:
#RRGGBB, wobei jedes Paar ein Hexadezimalwert von 00 bis FF ist - Beispiel:
#3B82F6(ein mittleres Blau)
RGB
Beschreibt eine Farbe anhand ihrer Rot-, Grün- und Blauanteile, jeweils im Bereich von 0 bis 255.
- Verwendet in: CSS (
rgb()-Funktion), Programmiersprachen, LED-Beleuchtung - Format:
rgb(rot, grün, blau) - Beispiel:
rgb(59, 130, 246)
HSL
Beschreibt eine Farbe anhand von Farbton (0–360 Grad auf dem Farbkreis), Sättigung (0–100 %) und Helligkeit (0–100 %).
- Verwendet in: CSS (
hsl()-Funktion), Farbtheorie, Design-Systeme - Format:
hsl(farbton, sättigung%, helligkeit%) - Beispiel:
hsl(217, 91%, 60%)
Tipp HSL ist das intuitivste Format zum Anpassen von Farben. Möchten Sie einen helleren Ton? Erhöhen Sie den Helligkeitswert. Möchten Sie einen gedämpfteren Ton? Verringern Sie die Sättigung. Das macht HSL ideal für den Aufbau von Farbsystemen und das Erstellen von Variationen einer Grundfarbe.
Wann welches Format verwenden
| Situation | Empfohlenes Format |
|---|---|
| CSS von Hand schreiben | HEX (kurz und vertraut) oder HSL (einfach anzupassen) |
| Design-Tool-Spezifikationen | HEX (Branchenstandard) |
| Dynamische Farbmanipulation im Code | HSL (am einfachsten programmatisch anzupassen) |
| Farben an Kunden kommunizieren | HEX (am universellsten bekannt) |
| Druckdesign | CMYK (getrennt von Bildschirmformaten) |
Über einzelne Farben hinaus
Sobald Sie Ihre Farbe konvertiert haben, möchten Sie vielleicht verwandte Tools erkunden:
- Verlaufsgenerator: Erstellen Sie sanfte CSS-Verläufe mit Ihren Farben. Geben Sie zwei oder mehr Farben ein und erhalten Sie den Verlaufscode zum direkten Einfügen in Ihr Stylesheet.
- Farbpaletten-Generator: Generieren Sie harmonische Farbpaletten basierend auf Ihrer Ausgangsfarbe. Erhalten Sie automatisch komplementäre, analoge, triadische und andere Farbschemata.
Diese Tools arbeiten Hand in Hand mit dem Farbkonverter, um Ihnen beim Aufbau eines vollständigen Farbsystems für Ihr Projekt zu helfen.
Wichtig Farben können auf verschiedenen Bildschirmen unterschiedlich aussehen — aufgrund von Display-Kalibrierung, Farbprofilen und Helligkeitseinstellungen. Wenn Farbgenauigkeit entscheidend ist (Branding, Druckdesign), überprüfen Sie Ihre Farben immer auf dem Zielmedium, nicht nur auf Ihrem Bildschirm.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX und RGB?
Beide stellen dieselbe Information in unterschiedlicher Notation dar. HEX verwendet Hexadezimal (Basis 16) und RGB verwendet Dezimal (Basis 10). #FF0000 und rgb(255, 0, 0) sind beide reines Rot.
Kann ich für den Druck nach CMYK konvertieren? Bildschirmfarbformate (HEX, RGB, HSL) und Druckformate (CMYK) sind grundlegend verschiedene Farbmodelle. Eine mathematische Umrechnung existiert, aber für genaue Druckfarben sollten Sie ein professionelles Farbmanagement-Tool verwenden.
Was ist mit Transparenz (Alpha)?
HEX unterstützt Alpha mit zwei zusätzlichen Zeichen (#3B82F680). RGB und HSL unterstützen es als rgba()- und hsla()-Funktionen. Der Farbkonverter verarbeitet auch diese Formate.
Nächste Schritte
Mit Ihren konvertierten Farben können Sie den Verlaufsgenerator ausprobieren, um schöne CSS-Verläufe zu erstellen, oder den Farbpaletten-Generator nutzen, um ein vollständiges Farbschema rund um Ihre gewählte Farbe aufzubauen.