Farbwähler

Der Farbwähler ist ein kostenloses Tool, mit dem du direkt im Browser eine Farbe auswählen und ihren Wert im benötigten Format ermitteln kannst.

Welchen Wert liefert ein Farbwähler?

Ein Farbwähler gibt die auf dem Farbkreis ausgewählte Farbe als Zahlenwert zurück. Dieselbe sichtbare Farbe lässt sich in verschiedenen Formaten darstellen, meist als Hexadezimalwert, RGB, RGBA, HSL oder HSLA.

Diese Formate beschreiben Farben auf unterschiedliche Weise. Hexadezimalwerte und RGB geben die Werte der Rot-, Grün- und Blaukanäle an. HSL verwendet Farbton, Sättigung und Helligkeit, was systematische Anpassungen erleichtern kann. Formate mit Alphakanal beschreiben zusätzlich die Deckkraft.

• Hexadezimalwerte beginnen mit einer Raute, auf die hexadezimale Ziffern folgen, zum Beispiel #336699.
• RGB-Werte geben jeden Kanal normalerweise als Zahl zwischen 0 und 255 an, zum Beispiel rgb(51, 102, 153).
• HSL-Werte bestehen aus einem Winkel für den Farbton und Prozentwerten für Sättigung und Helligkeit, zum Beispiel hsl(210, 50%, 40%).
• RGBA und HSLA ergänzen Transparenz. Ein Alphawert von 0 bedeutet vollständig transparent, ein Wert von 1 vollständig deckend.

CSS unterstützt auch benannte Farben. Die verfügbaren Namen bilden jedoch nur eine feste Auswahl ab und eignen sich weniger für präzise Design-Tokens. Generierte Zahlenwerte lassen sich in der Regel einfacher zwischen Designsystemen, Stylesheets und Anwendungscode übertragen.

Wie verwende ich den Farbwähler?

Wähle das Feld Color aus, wähle den gewünschten Punkt im Farbkreis und verwende anschließend den resultierenden Wert in dem Format, das deine Anwendung benötigt. Die gesamte Verarbeitung erfolgt in deinem Browser. Die ausgewählte Farbe wird niemals auf einen Server hochgeladen.

Bei einer bestehenden Benutzeroberfläche solltest du mit dem Format beginnen, das bereits in der Codebasis verwendet wird. So vermeidest du unnötige Farbumwandlungen und hältst Pull Requests übersichtlich. Prüfe bei Daten von Drittanbietern zunächst, ob die Werte Angaben zur Deckkraft enthalten, bevor du sie durch eine vermeintlich gleichwertige Farbe ersetzt.

Ein sinnvoller Ablauf vor der Bereitstellung sieht so aus: Wähle oder reproduziere die gewünschte Farbe, kopiere die passende Schreibweise und prüfe sie im tatsächlichen Zustand der Komponente. Teste Normal-, Hover-, Fokus- und deaktivierte Zustände einzeln, da Deckkraft und geerbte Stile das endgültige Erscheinungsbild verändern können.

Das Ergebnis richtig lesen

Lies das Ergebnis entsprechend dem jeweiligen Farbmodell und prüfe vor dem Kopieren in den Code, ob es einen Alphakanal enthält. Bei RGB bestimmt jeder Kanalwert die Intensität des jeweiligen Rot-, Grün- oder Blauanteils. Bei HSL verläuft der Farbton entlang eines Farbkreises, während die Sättigung die Farbintensität und die Helligkeit das Verhältnis zwischen Schwarz und Weiß steuert.

In CSS und strukturierten Daten gelten strenge Vorgaben für die Farbsyntax. Bei manuellen Änderungen treten häufig folgende Fehler auf:

• die führende Raute bei einem hexadezimalen CSS-Wert weglassen;
• fünf oder sieben hexadezimale Ziffern verwenden, obwohl dies keine gültigen Standardlängen sind;
• Prozentwerte angeben, obwohl die RGB-Implementierung Zahlenwerte für die Kanäle erwartet;
• Kommas in der älteren RGB-Syntax vergessen oder inkompatible alte und moderne Syntax vermischen;
• einen Wert mit Alphakanal in eine Software kopieren, die nur sechsstellige Hexadezimalwerte akzeptiert;
• ein Dezimalkomma wie 0,5 verwenden, obwohl CSS einen Dezimalpunkt wie 0.5 verlangt.

Der Farbwähler erzeugt Farbwerte, ist aber kein allgemeiner CSS-Validator. Er bestätigt nicht, dass eine umgebende Deklaration, ein JSON-Dokument oder eine Theme-Datei gültig ist. Syntaxfehler außerhalb des Farbwerts musst du daher weiterhin mit dem zuständigen Parser oder Entwicklungswerkzeug prüfen.

Beispiele für Farbumwandlungen

Bei einer sechsstelligen Hexadezimalfarbe stehen die Ziffernpaare für Rot, Grün und Blau. Die folgenden Darstellungen beschreiben beispielsweise dieselbe deckende Farbe.

Hexadezimalwert #336699

RGB-Entsprechung rgb(51, 102, 153)

HSL-Entsprechung hsl(210, 50%, 40%)

Die dreistellige Hexadezimalschreibweise ist eine Kurzform. Jede Ziffer wird wiederholt, um einen sechsstelligen Wert zu bilden.

Kurzer Hexadezimalwert #fff

Ausgeschriebener Hexadezimalwert #ffffff

RGB-Entsprechung rgb(255, 255, 255)

Bei achtstelligen Hexadezimalwerten folgt der Alphakanal auf die Ziffernpaare für Rot, Grün und Blau. Beachte, dass manche Systeme eine andere Kanalreihenfolge verwenden oder die achtstellige Schreibweise nicht akzeptieren. Auch eine optisch identische Volltonfarbe kann anders aussehen, wenn sie mit verringerter Deckkraft über einem anderen Hintergrund dargestellt wird.

Welches Farbformat sollte ich wählen?

Verwende die Farbschreibweise, die das Zielsystem bereits erwartet, sofern es keinen klaren Grund für eine Änderung gibt. Sechsstellige Hexadezimalwerte sind kompakt und in CSS-Variablen sowie Dateien mit Design-Tokens weit verbreitet. RGB ist praktisch, wenn eine Software die einzelnen Kanalwerte direkt bereitstellt. HSL eignet sich besonders, um verwandte Farben durch Änderungen an Helligkeit oder Sättigung zu erzeugen.

• Verwende sechsstellige Hexadezimalwerte für deckende Webfarben, wenn eine kurze und allgemein verständliche Schreibweise wichtig ist.
• Verwende achtstellige Hexadezimalwerte nur, wenn die Zielumgebung einen Alphakanal in dieser Schreibweise ausdrücklich unterstützt.
• Verwende RGB oder RGBA, wenn du mit den einzelnen Rot-, Grün- und Blaukanälen arbeitest.
• Verwende HSL oder HSLA für programmgesteuerte Theme-Varianten, die auf Farbton, Sättigung oder Helligkeit basieren.
• Verwende den Farbkonverter, wenn du bereits einen Wert hast und ihn umwandeln möchtest, statt visuell eine neue Farbe auszuwählen.

Betrachte einen auf dem Bildschirm angezeigten RGB-Wert nicht als Druckspezifikation. Für den professionellen Druck können CMYK-Werte, ein ICC-Farbprofil, ein Proof und eine Abstimmung mit der Druckerei erforderlich sein. Eine rein mathematische Umwandlung kann nicht garantieren, dass die gedruckte Farbe genauso aussieht wie auf einem hinterleuchteten Bildschirm.

Wann ist das Auswählen oder Umwandeln einer Farbe unnötig?

Das Auswählen oder Umwandeln einer Farbe ist nicht nötig, wenn der vorhandene Wert bereits im vom Zielsystem verlangten Format vorliegt. Wiederholte Umwandlungen können Rundungsabweichungen, eine uneinheitliche Groß- und Kleinschreibung oder überflüssige Änderungen an Quelldateien verursachen.

Manchmal ist es außerdem besser, ein benanntes Design-Token wie eine Theme-Variable beizubehalten, statt es durch einen konkreten Wert zu ersetzen. Tokens erhalten die Beziehungen zwischen Komponenten und ermöglichen es, eine Farbe zentral zu ändern. Ebenso benötigt eine ausschließlich maschinell verarbeitete Farbe keine besser lesbare Darstellung, sofern niemand sie prüfen oder pflegen muss.

Ein Farbwähler allein kann nicht beurteilen, ob eine Auswahl genügend Kontrast bietet, einer Markenvorgabe entspricht oder für Menschen mit Farbsehschwächen unterscheidbar bleibt. Prüfe Kombinationen aus Vorder- und Hintergrundfarbe mit einem speziellen Kontrastwerkzeug und betrachte die Benutzeroberfläche im tatsächlichen Kontext.

Häufig gestellte Fragen

Kann ich das Ergebnis in CSS-Variablen verwenden?

Ja, sofern die gewählte Schreibweise in den von dir unterstützten Browsern und Build-Werkzeugen gültiges CSS ist. Speichere den vollständigen Wert in einer benutzerdefinierten Eigenschaft und greife anschließend mit der Funktion var() darauf zu. Wenn das Projekt einzelne Kanäle verarbeitet, kann es praktischer sein, diese entsprechend der bereits verwendeten Projektkonvention getrennt zu speichern.

Warum sieht dieselbe Farbe auf einem anderen Bildschirm anders aus?

Dieselbe Farbe kann anders aussehen, weil sich Bildschirme hinsichtlich Kalibrierung, Helligkeit, Panel-Technologie und unterstütztem Farbraum unterscheiden. Auch das Farbmanagement des Browsers und das Anzeigeprofil des Betriebssystems können die Darstellung beeinflussen. Übereinstimmende Zahlenwerte garantieren daher nicht, dass eine Farbe auf jedem Gerät physisch identisch aussieht.

Ändert Groß- oder Kleinschreibung bei Hexadezimalwerten die Farbe?

Nein. Bei den hexadezimalen Ziffern A bis F spielt die Groß- und Kleinschreibung keine Rolle. Deshalb stellen #AABBCC und #aabbcc dieselbe Farbe dar. Halte dich an die im Repository verwendete Schreibweise, um Änderungen zu vermeiden, die nur die Formatierung betreffen.

Darf ein Farbwert Akzente oder nichtlateinische Zeichen enthalten?

Nein, nicht in der standardmäßigen Hexadezimal-, RGB- oder HSL-Schreibweise. Sie verwendet ASCII-Ziffern, Buchstaben und Satzzeichen. Zeichen mit Akzenten oder nichtlateinische Zeichen gehören nicht zu diesen numerischen Farbsyntaxen. In umgebenden Variablennamen oder Metadaten können sie vorkommen, sofern die jeweilige Sprache und Dateikodierung dies zulassen.

Ist eine transparente Farbe dasselbe wie keine Farbe?

Nein. Eine vollständig transparente Farbe besitzt weiterhin Kanalwerte, auch wenn diese für sich genommen nicht sichtbar sind. Solche unsichtbaren Kanäle können bei Animationen, Interpolation, Compositing oder späteren Änderungen der Deckkraft relevant sein. Behalte sie deshalb bei, wenn die Anwendung auf dieses Verhalten angewiesen ist.

Sollte ich dezimale Kanalwerte runden?

Runde dezimale Farbkanäle und Alphawerte nur auf die Genauigkeit, die das Zielsystem akzeptiert und die für eine einheitliche Ausgabe erforderlich ist. Eine übertriebene Genauigkeit erschwert die Prüfung, während zu starkes Runden kleine Farbabweichungen verursachen kann. Vergleiche die gerenderte Komponente nach dem Runden mit dem vorgesehenen Hintergrund und prüfe ihre verschiedenen Interaktionszustände.