Farbwähler – HEX-, RGB- & HSL-Code ermitteln | Morph

Farbe wählen, Code erhalten

Mit dem Farbwähler von Morph wählst du jede Farbe visuell aus und liest sofort ihren Code in den Formaten ab, die du wirklich brauchst: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) und HSL (`hsl(214, 64%, 53%)`). Ziehe über das Farbfeld, feinjustiere mit dem Farbtonregler und kopiere den Wert direkt in dein CSS, deine Design-Datei oder wohin du ihn sonst brauchst.

Drei Formate, eine Quelle der Wahrheit

Alle drei Codes beschreiben dieselbe Farbe – sie sind nur unterschiedliche Schreibweisen dafür, und jede hat ihre Aufgabe:

HEX ist die kompakte Form, die du in die meisten CSS- und Design-Tools einfügst.
RGB schlüsselt die Rot-, Grün- und Blau-Kanäle auf (je 0–255) – praktisch, wenn du einen einzelnen Kanal anpasst oder mit Code arbeitest, der separate Werte erwartet.
HSL beschreibt Farbton, Sättigung und Helligkeit – das intuitivste Format, wenn du eine Farbe etwas heller, gedämpfter machen oder ohne Ausprobieren in Richtung eines benachbarten Farbtons verschieben willst.

Egal wie du die Farbe änderst, alle drei Codes bleiben synchron – du greifst einfach zu dem, den dein Projekt braucht.

Für echte Workflows gemacht

Designer nutzen ihn, um eine Palette festzulegen und exakte Werte in eine Designdatei oder einen Styleguide zu übernehmen. Frontend-Entwickler holen sich damit den HEX-Wert für einen Button oder wandeln das RGB eines Designers in HSL um, um einen Hover-Zustand zu bauen. Wer ein Theme, eine Diagrammfarbe oder eine E-Mail-Vorlage anpasst, findet so den exakten Farbton und kopiert ihn mit einem Klick. Weil HSL direkt neben HEX steht, sind hellere und dunklere Varianten einer Basisfarbe viel leichter zu bauen, als Hex-Ziffern nach Augenmaß zu schätzen.

Läuft privat in deinem Browser

Der Farbwähler ist reiner Browser-Code – die Farbberechnung und die Oberfläche laufen beide auf deinem Gerät. Es gibt kein Hochladen, kein Konto, und nichts wird an einen Server gesendet. Er lädt schnell und funktioniert offline weiter, sobald die Seite einmal geöffnet ist, denn das Auswählen einer Farbe und die Berechnung ihrer Codes brauchen nie eine Netzwerkverbindung.

Ein paar praktische Hinweise

Wenn du einen HEX-Wert kopierst, kannst du ihn direkt so in CSS einfügen. Brauchst du eine Farbe mit Transparenz, wandle sie in RGB um und ergänze in deinem Code einen Alpha-Kanal (`rgba(...)`). Für eine stimmige Palette wählst du eine Basisfarbe und erzeugst mit dem HSL-Helligkeitswert Auf- und Abtöne, indem du die Helligkeit nach oben oder unten schiebst und Farbton sowie Sättigung konstant hältst – so wirkt eine Farbreihe wie eine Familie und nicht wie eine zufällige Sammlung.

Anleitung

Farbe wählen — Ziehe im Farbfeld, um Sättigung und Helligkeit festzulegen, und nutze dann den Farbtonregler für die Basisfarbe.
Codes ablesen — HEX-, RGB- und HSL-Werte aktualisieren sich gemeinsam, während du ziehst – du siehst also immer alle drei für die aktuelle Farbe.
Benötigtes Format kopieren — Kopiere HEX für die meisten CSS- und Design-Arbeiten, RGB, um Kanäle anzupassen, oder HSL, um hellere und dunklere Varianten zu bauen.
In dein Projekt einfügen — Füge den Wert direkt in dein Stylesheet, dein Design-Tool oder die Theme-Einstellungen ein.

Häufig gestellte Fragen

Welche Farbformate bekomme ich?

Er zeigt HEX, RGB und HSL für jede gewählte Farbe an, alle synchron – so kopierst du das Format, das dein Projekt braucht.

Warum HSL statt HEX verwenden?

Mit HSL passt du eine Farbe intuitiv an – erhöhe die Helligkeit für einen helleren Ton, senke sie für einen dunkleren, oder verschiebe den Farbton –, ohne bei Hex-Ziffern zu raten.

Kann ich eine Farbe mit Transparenz bekommen?

Wähle deine Farbe, kopiere die RGB-Werte und ergänze in deinem Code einen Alpha-Kanal als rgba(...), um den gewünschten Transparenzgrad festzulegen.

Werden meine Daten irgendwohin gesendet?

Nein. Der Farbwähler läuft vollständig in deinem Browser. Es gibt kein Hochladen, und nichts wird an einen Server gesendet – er funktioniert sogar offline, sobald er geladen ist.

Wie baue ich eine passende Palette?

Wähle eine Basisfarbe und nutze ihren HSL-Wert, dann schiebe die Helligkeit nach oben oder unten, während Farbton und Sättigung konstant bleiben – so entstehen Auf- und Abtöne, die wie ein Set wirken.