Farben für das Web auswählen: HEX, RGB, CSS

Wie es funktioniert

Die native Farbeingabe gibt einen sRGB-Wert als sechsstellige Hexadezimalzeichenfolge aus. Kanäle werden für das RGB-Triplet auf Dezimalzahlen geparst und die benutzerdefinierte CSS-Eigenschaft wird in der exakten Syntax geschrieben, die ein Stylesheet erwartet.

Verwendet die native Farbeingabe und funktioniert daher mit der Systempipette, sofern der Browser dies unterstützt.

Warum es wichtig ist

Eine Palette lebt in Figma, CSS, E-Mails und manchmal einer Leinwand. Jeder Übersetzungsschritt birgt die Möglichkeit, das falsche Format einzufügen. Durch das gemeinsame Kopieren von HEX, RGB und einer benutzerdefinierten Eigenschaft werden daher eine Reihe vermeidbarer Fehler vermieden.

Ein gelungenes Beispiel

Die Auswahl von #635BFF ergibt rgb(99, 91, 255) und die benutzerdefinierte CSS-Eigenschaft --color: #635BFF, die in ein Stylesheet eingefügt und überall referenziert werden kann, anstatt den Hex-Code zu wiederholen.

Häufige Fehler

Farbe und Hintergrund getrennt auswählen, ohne den Kontrast zu prüfen.
Verlassen Sie sich allein auf den Farbton, um den Zustand zu signalisieren.
Schwebe- und Fokusvarianten vergessen.

Praktische Tipps

Wählen Sie zuerst die neutrale Skala und dann den Akzent. Eine einzelne Akzentfarbe plus drei Neutraltöne lässt sich bei hellen und dunklen Themen leichter konsistent halten als eine größere Palette.

Wie man es benutzt

Öffnen Sie das Tool. Alles läuft in Ihrem Browser-Tab.
Fügen Sie Ihre Eingabe ein oder geben Sie sie ein und wählen Sie dann die gewünschte Aktion aus.
Überprüfen Sie das Ergebnis und kopieren Sie es mit einem Klick.

Öffnen Sie das Tool

Häufige Fragen

Kann ich eine Farbe auf dem Bildschirm auswählen?

Wenn der Browser die native Pipette unterstützt, ja. Andernfalls verwenden Sie das Farbeingabefeld.

Welche Formate werden ausgegeben?

HEX, ein RGB-Triplett und eine benutzerdefinierte CSS-Eigenschaft, die Sie in ein Stylesheet einfügen können.

Wird die ausgewählte Farbe gespeichert?

Nein. Der Wert existiert nur auf der Seite, bis Sie sie schließen.

Ist dieses Tool wirklich kostenlos?

Ja. Es gibt kein Konto, keine Paywall und keine Nutzungsbeschränkung. Die Tools App wird von aumenso, dem Studio dahinter, finanziert.

Wird alles, was ich eingebe, hochgeladen?

Nein. Das Tool wird in Ihrem Browser-Tab ausgeführt. Was Sie eingeben, wird niemals an uns gesendet und niemals gespeichert.