Farbcode-Konverter
Gib eine Farbe ein und kopiere HEX-, RGB- und HSL-Werte.
#624DE3CC
Über dieses Tool
Der Farbcode-Konverter zeigt eine Farbe gleichzeitig im HEX-, RGB- und HSL-Format an und konvertiert zwischen den Formaten. Sie können eine Farbe direkt eingeben, aus einer Vorlage wählen oder mit der Pipette vom Bildschirm übernehmen und zusätzlich die Transparenz anpassen. Ideal, um Farben für Webdesign, UI-Arbeiten, CSS und Bildbearbeitung in das jeweils benötigte Codeformat umzuwandeln.
Verwendung
Farbe wählen
Geben Sie einen Wert in das HEX-, RGB- oder HSL-Feld ein oder wählen Sie eine Vorlagenfarbe. In unterstützten Umgebungen können Sie mit der Pipette auch direkt eine Farbe vom Bildschirm aufnehmen.
Transparenz anpassen
Bewegen Sie den Transparenzregler, um die Deckkraft der Farbe einzustellen. Die Änderung wird oben in der Vorschau und in den Farbcodes übernommen.
Ergebnis prüfen und kopieren
Kontrollieren Sie die Farbe in der Vorschau und drücken Sie dann die Kopier-Schaltfläche neben dem HEX-, RGB- oder HSL-Feld, um den gewünschten Wert in die Zwischenablage zu übernehmen.
Funktionen
HEX, RGB und HSL in einem
Geben Sie eine Farbe in einem Format ein und sehen Sie ihre HEX-, RGB- und HSL-Werte auf einen Blick.
Live-Vorschau und Transparenz
Die Vorschau aktualisiert sich sofort, sobald Sie Farbwerte oder Transparenz ändern; mit dem Regler lassen sich halbtransparente Farben erzeugen.
Pipette und Vorlagenfarben
In unterstützten Browsern nehmen Sie mit der Pipette eine Farbe vom Bildschirm auf oder übernehmen per Klick eine gängige Vorlagenfarbe.
Jedes Format einzeln kopieren
Kopieren Sie den HEX-, RGB- oder HSL-Wert getrennt, um ihn direkt in CSS, Designtools und Dokumenten zu verwenden.
Werte direkt eingeben
Wenn Sie den Farbcode bereits kennen, geben Sie ihn einfach in die Felder ein und sehen das Konvertierungsergebnis.
Verarbeitung im Browser
Ihre Farbwerte und Konvertierungsergebnisse bleiben in Ihrem Browser – nichts wird an einen Server gesendet.
Anwendungsfälle
CSS-Farbcodes konvertieren
Konvertieren Sie einen HEX-Farbwert aus einem Designentwurf in RGB oder HSL, um ihn in CSS-Styles zu verwenden.
Farben zwischen Designtools übertragen
Wenn die Programme unterschiedliche Farbformate verlangen, wandeln Sie dieselbe Farbe in das jeweils benötigte Codeformat um.
Halbtransparente Hintergründe erstellen
Passen Sie die Transparenz an, um halbtransparente Farben für Overlays, Hintergründe, Schaltflächen und Rahmen zu erzeugen.
Farben vom Bildschirm übernehmen
Nehmen Sie mit der Pipette eine Farbe von einer Webseite, einem Bild oder einer App-Oberfläche auf und sehen Sie sie als Code.
Markenfarben verwalten
Halten Sie die HEX-, RGB- und HSL-Werte Ihrer Markenfarben zusammen, um sie über Web, Druck und Designdokumente hinweg einheitlich einzusetzen.
Häufig gestellte Fragen
Wie unterscheiden sich HEX, RGB und HSL?
HEX stellt eine Farbe hexadezimal dar, etwa als #8AD0FF. RGB gibt die Intensität von Rot, Grün und Blau als Zahlen an, während HSL eine Farbe über Farbton, Sättigung und Helligkeit beschreibt.
Welches Format sollte ich verwenden?
HEX ist einfach und wird im Web sowie in Designdokumenten häufig verwendet. RGB eignet sich gut, um Farbkanäle direkt anzupassen, HSL ist praktisch, um Farbton oder Helligkeit intuitiv zu ändern.
Wie wird Transparenz im Farbcode abgebildet?
Ein HEX-Wert mit Transparenz wird als 8-stelliger Code dargestellt, bei dem der Alphawert an den üblichen 6-stelligen Code angehängt wird. Bei #8AD0FFCC geben beispielsweise die letzten beiden Stellen die Transparenz an.
Was unterscheidet 6-stellige von 8-stelligen HEX-Codes?
Ein 6-stelliger HEX-Code enthält nur die Werte für Rot, Grün und Blau. Ein 8-stelliger HEX-Code fügt am Ende einen Alphawert hinzu, der die Transparenz angibt.
Was bedeuten 100 % und 0 % Transparenz?
100 % bedeutet vollständig deckend, 0 % vollständig transparent. Mittlere Werte ergeben halbtransparente Farben, durch die der Hintergrund hindurchscheint.
Welche Spanne haben RGB-Werte?
RGB-Werte reichen für jede der Farbkomponenten Rot, Grün und Blau von 0 bis 255. Höhere Werte verstärken die jeweilige Farbkomponente.
Was bedeuten die HSL-Werte?
H steht für den Farbton, üblicherweise ein Wert zwischen 0 und 359 Grad. S ist die Sättigung und L die Helligkeit, beide werden in Prozent angegeben.
Funktioniert die Pipette in jedem Browser?
Die Unterstützung hängt vom Browser und der Umgebung ab. In nicht unterstützten Umgebungen verwenden Sie stattdessen die Farbfelder oder Vorlagenfarben.
Kann ich eine Farbe nach der Auswahl einer Vorlage bearbeiten?
Ja. Nach der Auswahl einer Vorlage können Sie die HEX-, RGB- oder HSL-Werte oder die Transparenz anpassen, um die Farbe zu verfeinern.
Was kopiert die Kopier-Schaltfläche?
Jede Kopier-Schaltfläche kopiert den aktuellen Farbwert in dem jeweiligen Format. Sie können gezielt nur den HEX-, RGB- oder HSL-Wert kopieren, den Sie benötigen.
Werden meine Farbwerte an einen Server gesendet?
Nein. Die gesamte Verarbeitung findet lokal in Ihrem Browser statt. Ihre Farbwerte und Konvertierungsergebnisse werden niemals an einen Server übertragen.
Ähnliche Tools
