Wie man eine Farbe wählt und ihren Code abliest

Der Wähler ist ein flaches Spectrum-Feld: Ziehen Sie im Quadrat für Sättigung und Helligkeit, nutzen Sie den senkrechten Regler für den Farbton und den waagerechten für die Deckkraft, oder tippen Sie eine Farbe direkt in das Feld darunter. Dieses Feld enthält immer die aktuelle Farbe, als #rrggbb solange sie voll deckend ist und als rgba(...), sobald der Deckkraftregler unter 100 % geht.

Die Palette neben dem Quadrat enthält 66 feste Felder in drei Reihen, und die Reihe darunter sammelt die Farben, die Sie selbst gemischt haben. Das Wählen läuft im Browser: Während Sie ziehen, tippen oder klicken, geht keine Anfrage hinaus, und kein Farbwert verlässt den Rechner.

  1. Ziehen Sie im Quadrat, um eine Farbe zu wählen, oder klicken Sie eines der 66 Felder der Palette an, um von einem bekannten Wert zu starten.
  2. Feinjustieren Sie den Farbton am senkrechten Regler und bewegen Sie bei Bedarf den Deckkraftregler; das Feld zeigt dann rgba(...).
  3. Tippen oder fügen Sie eine CSS-Farbe ein, wenn Sie den Wert schon kennen: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), hsl(), einen Namen wie red oder transparent. Mit der Eingabetaste wird sie übernommen.
  4. Lesen Sie den Wert im Feld ab und kopieren Sie den Text in Ihr Stylesheet, oder klicken Sie auf das kleine ✕, um die Auswahl zu leeren und neu zu beginnen.

Palette, Wertfeld und die Grenzen des Werkzeugs

Was die Palette behält

Die drei oberen Reihen sind fest: sechs Grautöne, zehn gesättigte Farben und fünfzig abgetönte Schattierungen. Sie ändern sich nie, und ein Klick darauf wird nicht festgehalten, denn eine Vorgabe ist keine eigene Farbe.

Die Reihe darunter speichert bis zu sieben selbst gewählte Farben, die neueste zuerst: aufgenommen wird, was Sie tippen, anklicken oder nach dem Ziehen festlegen. Die Liste liegt in diesem Browser unter einem Schlüssel der Domain voritools.com und übersteht daher ein Neuladen auf diesem Gerät; sie wird nicht abgeglichen, und ein anderer Browser startet mit leerer Reihe.

Das Wertfeld lesen

Das Feld ist die Ausgabe des Werkzeugs: die aktuelle Farbe in der Schreibweise, die CSS braucht. Deckende Farben erscheinen als #rrggbb; Farben unter 100 % Deckkraft als rgba(...), weil sechs Hexziffern keinen Alphakanal tragen können. Der Tooltip eines Feldes und die kleine Vorschau neben dem Eingabefeld zeigen denselben Wert.

Werte mit Alpha in Hex-Schreibweise werden nach CSS Color 4 gelesen: #12345678 bedeutet #123456 mit Alpha 0x78/255 und erscheint als entsprechender rgba(...)-Wert, #abcd bedeutet #aabbccdd. Einen Wert, den der Wähler nicht lesen kann, markiert der rote Rahmen, und die Seite zeigt den Hinweis, dass der Farbwert nicht gelesen werden konnte.

Was dieses Werkzeug nicht tut

Es arbeitet mit einer Farbe zur Zeit und nur auf dieser Seite: kein Palettenexport, kein Herunterladen von CSS-Variablen oder JSON, keine Kontrast- oder Barrierefreiheitsprüfung und keine Farberkennung aus einem Foto oder Screenshot. Dafür gibt es das Schwesterwerkzeug für Bildfarben.

Eine Kopierschaltfläche gibt es ebenfalls nicht; das Feld ist ein normales Textfeld, dessen Inhalt Sie wie jeden anderen Wert kopieren. Und weil die Reihe der zuletzt genutzten Farben im Browser liegt, entfernt das Löschen der Websitedaten sie; ein privates Fenster beginnt jedes Mal mit leerer Reihe.

Zuletzt verwendet: