🎨 Farbwähler
Wählen Sie eine Farbe und erhalten Sie sofort HEX-, RGB- und HSL-Werte.
Was ist dieses Tool?
Ein Farbwähler ist ein Werkzeug, mit dem Sie eine Farbe aus einer visuellen Palette auswählen und sofort ihre Werte in den drei gängigsten Farbformaten des Webs sehen können: HEX, RGB und HSL. Designer, Entwickler und Künstler wechseln ständig zwischen diesen Darstellungen, da verschiedene Werkzeuge und Kontext unterschiedliche Formate erwarten. CSS-Stylesheets akzeptieren oft jedes der drei Formate, aber Design-Software wie Figma oder Photoshop zeigt möglicherweise standardmäßig HEX an, während Datenvisualisierungsbibliotheken häufig RGB- oder HSL-Tupel verlangen. Dieses Tool überbrückt diese Lücken, indem es alle drei Werte nebeneinander anzeigt und sie beim Anpassen der Farbe synchronisiert, sodass Sie nie nach einem separaten Konverter greifen müssen. Die integrierte Farbeingabe öffnet den nativen Farbwähler Ihres Betriebssystems, der eine feinkörnige Auswahl über das gesamte Farbspektrum unterstützt, während das manuelle HEX-Feld das Einfügen eines vorhandenen Codes zur Überprüfung oder Konvertierung ermöglicht. Die große Vorschaumusterfläche zeigt die exakte Farbe in großzügiger Größe, damit Sie sie genau beurteilen können, und Ein-Klick-Kopier-Buttons senden jeden Wert in Ihre Zwischenablage, bereit zum Einfügen in ein Stylesheet, eine Komponentenbibliothek oder eine Designdatei. Da die Konvertierungen mit Standard-Farbraum-Mathematik durchgeführt werden, sind die Werte präzise und browserübergreifend konsistent. Egal, ob Sie eine Markenpalette aufbauen, eine Akzentfarbe für eine Schaltfläche auswählen oder den HEX-Code eines Designers in das HSL übersetzen, das Ihre Diagrammbibliothek benötigt – dieses Tool gibt Ihnen den richtigen Wert im richtigen Format ohne jegliche Reibung.Wie es funktioniert
Das Tool verwaltet eine einzige Wahrheitsquelle für die aktuelle Farbe und konvertiert sie bei jeder Änderung der Quelle zwischen den Formaten. Wenn Sie die visuelle Farbeingabe verwenden, gibt der Browser eine HEX-Zeichenkette wie #3b82f6 zurück, die das Tool liest und in ihre Rot-, Grün- und Blaukomponenten aufteilt, indem es die Hexadezimalpaare analysiert. Diese drei Werte, die jeweils von null bis zweihundertfünfundfünfzig reichen, bilden das RGB-Tupel, das angezeigt wird. Um die HSL-Darstellung zu erzeugen, normalisiert das Tool die RGB-Kanäle auf den Bereich null bis eins und findet die Maximal- und Minimalwerte, um die Helligkeit zu berechnen, leitet dann die Sättigung aus der Spanne zwischen ihnen ab und berechnet schließlich den Farbton als Winkel um den Farbkreis herum, basierend darauf, welcher Kanal am größten ist. Wenn Sie einen HEX-Code manuell eingeben, validiert das Tool die Eingabe, akzeptiert Codes mit oder ohne führendes Raute-Zeichen, erweitert dreistellige Kurzschreibweise und führt dann dieselbe Konvertierungspipeline aus, sodass sich die RGB- und HSL-Ausgaben sofort aktualisieren. Die Farbvorschau wird aktualisiert, indem ihr Hintergrund auf den aktuellen HEX-Wert gesetzt wird, was Ihnen eine genaue Vollgrößen-Darstellung der gewählten Farbe liefert. Jede Konvertierung erfolgt lokal in JavaScript, sodass das Tool schnell, privat und offline-fähig ist, ohne Netzwerkaufrufe für eine der Berechnungen.Verwendung
Das Auswählen und Konvertieren einer Farbe dauert nur einen Moment.
- Klicken Sie auf das farbige Quadrat, um den nativen Farbwähler Ihres Systems zu öffnen und eine beliebige Farbe visuell auszuwählen. Alternativ können Sie einen sechstelligen HEX-Code mit oder ohne führendes Raute-Zeichen in das HEX-Eingabefeld eingeben.
- Während Sie die Farbe ändern, aktualisiert sich die Vorschaumusterfläche sofort und die HEX-, RGB- und HSL-Werte werden in Echtzeit neu berechnet.
- Überprüfen Sie die drei unter der Vorschau angezeigten Werte. Jeder wird im exakten Format angezeigt, das zum Einfügen in CSS oder ein Design-Tool bereit ist.
- Klicken Sie auf die Schaltfläche Kopieren neben dem gewünschten Format, um diesen Wert in Ihre Zwischenablage zu übertragen, und fügen Sie ihn dann in Ihr Stylesheet, Ihre Komponente oder Ihr Dokument ein. Sie können so oft zwischen Farben wechseln, wie Sie möchten, und jeder Wert bleibt perfekt synchron.
Häufig gestellte Fragen
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX drückt eine Farbe als sechsstellige Hexadezimalzeichenkette aus, beispielsweise #FF5733, wobei jedes Ziffernpaar den Rot-, Grün- und Blaukanal darstellt. RGB listet dieselben drei Kanalwerte als Dezimalzahlen von 0 bis 255 auf, zum Beispiel rgb(255, 87, 51). HSL beschreibt eine Farbe durch Farbton, Sättigung und Helligkeit, was oft intuitiver ist, da Sie eine Farbe durch Anpassen eines einzigen Wertes abdunkeln oder sättigen können.
Kann ich einen HEX-Code manuell eingeben?
Ja. Geben Sie einen beliebigen gültigen sechstelligen HEX-Code mit oder ohne führendes Raute-Zeichen in das HEX-Feld ein und das Tool aktualisiert sofort die Vorschau und zeigt die passenden RGB- und HSL-Werte. Auch dreistellige Kurzschreibweise wie #3b5 wird akzeptiert und in ihre sechsstellige Form erweitert.
Welches Format sollte ich in meinem CSS verwenden?
Alle drei Formate sind in modernem CSS gültig, sodass die Wahl meist eine Frage der Bequemlichkeit ist. HEX ist kompakt und wird häufig in Stylesheets verwendet. RGB ist übersichtlich, wenn Sie die Deckkraft mit der rgba()-Notation anpassen müssen. HSL ist besonders hilfreich, wenn Sie Farbtöne und Schattierungen derselben Farbe erstellen möchten, da Sie nur die Helligkeit ändern können, während Farbton und Sättigung fest bleiben.
Sind die konvertierten Werte präzise?
Ja. Die Konvertierungen verwenden Standard-Farbraum-Mathematik, sodass die HEX-, RGB- und HSL-Werte genau und browserübergreifend konsistent sind. Da alle Formate denselben sRGB-Farbraum beschreiben, geht beim Konvertieren zwischen ihnen niemals Information verloren.
Tipps & Ratschläge
Wenn Sie eine Farbpalette aufbauen, beginnen Sie mit einer einzigen Markenfarbe und verwenden Sie die HSL-Anzeige, um harmonische Varianten zu erzeugen, indem Sie Helligkeit und Sättigung anpassen, während der Farbton konstant bleibt. Dadurch entstehen Farbtöne und Schattierungen, die zusammenpassen wirken. Für barrierefreie Oberflächen sollten Sie immer das Kontrastverhältnis zwischen Ihrer gewählten Farbe und dem Text oder Hintergrund prüfen, da eine auffällige Farbe dennoch die Lesbarkeitsstandards nicht erfüllen kann. Denken Sie daran, dass eine HSL-Helligkeit von fünfzig Prozent nicht dasselbe ist wie die wahrgenommene Helligkeit, sodass sehr helle Gelb- und sehr dunkle Blautöne bei gleicher HSL-Helligkeit ganz unterschiedlich aussehen können. Wenn Sie Farben an einen Entwickler übergeben, geben Sie den HEX-Code als kanonischen Wert an und fügen Sie die RGB- und HSL-Äquivalente als Referenz hinzu. Speichern Sie Ihre endgültige Palette schließlich in einer gemeinsam genutzten Token-Datei, damit jedes Teammitglied dieselben Werte verwendet, was die subtile Abweichung verhindert, die entsteht, wenn Farben von einem Tool zum anderen nach Augenmaß kopiert werden.