Farbstudio

Eine Farbe wählen und ihren Code kopieren

1. 01

   Öffne „Farbwähler“. Verschiebe den Griff auf dem Farbstreifen, um einen Farbton wie Blau oder Grün zu wählen.

2. 02

   Verschiebe den Griff im großen Quadrat, um die Farbe heller, dunkler oder weniger kräftig zu machen.

3. 03

   Suche unter „Farbformate“ das gewünschte Format und drücke die zugehörige Kopiertaste.

4. 04

   Füge den kopierten Wert in die gewünschte App oder das Dokument ein.

Die Formatfelder zeigen das Ergebnis und lassen sich nicht bearbeiten. „Alle Formate kopieren“ kopiert alle fünf Werte samt Bezeichnungen. HEX, RGB, HSL, HSV und CMYK beschreiben dieselbe ausgewählte Farbe auf unterschiedliche Weise.

HEX, RGB und HSL eignen sich für Webstyles. HSV und CMYK sind rechnerische Umwandlungen, keine direkt einsetzbaren CSS-Deklarationen. CMYK berücksichtigt hier weder Drucker- noch Papierprofile und sagt deshalb die genaue Druckfarbe nicht voraus.

„Vom Bildschirm aufnehmen“ öffnet die Pipette des Browsers, sofern er sie unterstützt. Wähle einen sichtbaren Pixel, um dessen Farbe zu übernehmen, oder brich mit Escape ab. Auf Touchgeräten steht diese Funktion nicht zur Verfügung. Auch einige Desktopbrowser unterstützen sie nicht.

Passende Farben finden

Die Auswahl unter „Farbharmonie“ erzeugt Vorschläge zur aktuellen Farbe. Wähle einen Vorschlag, um ihn als aktuelle Farbe zu übernehmen und die Formatwerte zu aktualisieren.

Diese Vorschläge prüfen nicht, ob Text lesbar ist. Prüfe Text- und Hintergrundfarbe vor ihrer Verwendung gemeinsam mit „Kontrastprüfung“. „Als Vorlage speichern“ speichert die aktuelle Farbe und Harmonie für später.

Farben aus einem Bild gewinnen

1. 01

   Öffne „Farben aus Bildern“ und füge ein Bild von deinem Gerät hinzu.

   Bild importieren

   Datei auswählen

   JPGPNGWEBPAVIFGIFBMPTIFFICOHEICHEIF

2. 02

   Warte, bis die vorgeschlagenen Farben erscheinen. Ändere „Anzahl der Farben“, wenn du mehr oder weniger Vorschläge benötigst.

3. 03

   Klicke auf ein Farbfeld, um es auszuwählen und seinen HEX-Wert zu kopieren. Der Bereich zur ausgewählten Farbe zeigt auch RGB, HSL, HSV und CMYK.

4. 04

   Klicke auf eine andere Bildstelle, um deren Farbe hinzuzufügen.

„Anzahl der Farben“ erlaubt 1 bis 20 automatische Vorschläge. Manuell gewählte Farben kommen hinzu, daher kann die fertige Liste länger sein. Die Vorschläge beruhen auf abgetasteten Pixeln und Farbgruppen. Sie zählen nicht jede einzelne Farbe im Originalbild auf.

„Extreme Farbtöne filtern“ lässt bei der Ermittlung der Vorschläge sehr dunkle und sehr helle Pixel aus. Schalte die Option aus, wenn diese Farben wichtig sind oder das Bild überwiegend schwarzweiß ist. Änderungen an dieser Option oder an „Anzahl der Farben“ berechnen die Vorschläge neu. Bei einem Standbild ersetzen sie dabei auch manuell gewählte Farben.

„Punkte anzeigen“ blendet die Abtastmarkierungen im Bild ein. Beim Ausschalten verschwinden nur die Markierungen, nicht die Farben. Ziehe eine sichtbare Markierung an eine andere Stelle, um dort eine Farbe zu wählen. Mit der Maus hilft die vergrößerte Vorschau beim genauen Platzieren.

Entferne ein Farbfeld mit seiner Löschtaste. „Bild entfernen und neu beginnen“ fragt nach, bevor das aktuelle Bild und seine Farben entfernt werden. Gespeicherte Vorlagen bleiben erhalten.

Große Bilder können für die Abtastfläche verkleinert werden. Ein ausgewählter Wert kann daher aus dem angezeigten, skalierten Bild stammen und nicht aus einem unveränderten Pixel in voller Originalauflösung. Transparenz wird nicht als eigener Farbkanal behandelt.

Farben aus einem animierten GIF wählen

Ein animiertes GIF wird mit einer Zeitleiste für die Einzelbilder geöffnet. Wähle ein Bild mit den Vor- und Zurücktasten, dem Schieberegler oder einer Miniatur aus. Du kannst die Animation auch abspielen und anhalten.

Klicke in das Bild, um eine Farbe aus dem aktuellen Einzelbild zu sammeln. Die Farbliste verbindet gespeicherte Auswahlen aus den verwendeten Einzelbildern. Der Wechsel zu einem anderen Bild erzeugt nicht automatisch für jedes Einzelbild eine neue Palette.

Ändere „Anzahl der Farben“ oder „Extreme Farbtöne filtern“, um die automatischen Farben des aktuellen Einzelbilds neu zu berechnen. Die Auswahl wird für jedes GIF-Einzelbild getrennt gespeichert. Deshalb können Farben aus anderen Einzelbildern in der gemeinsamen Liste verbleiben. Speichere eine Bildvorlage, wenn du das Bild, die Auswahl je Einzelbild und die Abtastpositionen behalten möchtest.

Eine Palette erstellen und bearbeiten

Öffne „Paletten erstellen“, um mit den Material-Farben zu beginnen, oder wähle eine andere Schnellvorlage. Wenn du die aktuelle Palette bereits geändert hast, kann vor dem Ersetzen durch eine Vorlage eine Bestätigung erscheinen.

„Zufallspalette“ ändert die ungesperrten Farben. Sperre Farben, die du behalten möchtest, und erzeuge die Palette erneut. Die Sperre schützt eine Farbe beim zufälligen Erzeugen. Du kannst sie weiterhin bearbeiten, entfernen oder durch eine Vorlage ersetzen.

„Farbe hinzufügen“ fügt ein Farbfeld hinzu. Jedes Feld lässt sich bearbeiten oder löschen und hat einen Griff zum Verschieben. Mindestens eine Farbe muss erhalten bleiben. Klicke auf den angezeigten Wert, um ihn zu kopieren. Mit HEX oder RGB wechselst du das kopierte Format.

Am Computer öffnet „Farbe bearbeiten“ den Farbwähler des Browsers. Auf Touchgeräten erscheint ein Dialog mit Farbreglern sowie HEX- und RGB-Feldern. Mit „Anwenden“ übernimmst du die Änderung, mit „Abbrechen“ verwirfst du sie.

Mit „Rückgängig“ und „Wiederholen“ gehst du durch die letzten Änderungen der Palette. Der Verlauf hält während der aktuellen Seitensitzung bis zu 50 Zustände fest. „Zurücksetzen“ fragt nach, bevor die Standardpalette wiederhergestellt wird.

„Fokusmodus“ zeigt die Palette samt Bearbeitungsfunktionen auf einer größeren Fläche. Drücke Escape oder „Fokusmodus beenden“, um zurückzukehren. Nach dem Neuladen beginnt die Arbeitspalette wieder mit den Ausgangsfarben. Nutze vor dem Verlassen „Als Vorlage speichern“ oder „Palette herunterladen“.

Eine Farbsammlung herunterladen oder kopieren

Öffne den Exportdialog über „Farben herunterladen“ in „Farben aus Bildern“ oder „Palette herunterladen“ in „Paletten erstellen“. PNG, JPG und SVG erzeugen einen Streifen mit Farbfeldern. „HEX-Codes einschließen“ und „RGB-Codes einschließen“ ergänzen die entsprechenden Beschriftungen im Bild.

JSON lädt die Farbwerte als strukturierte Daten herunter. „CSS kopieren“ kopiert nummerierte benutzerdefinierte Eigenschaften, zum Beispiel --color-1, die sich in einem Website-Stylesheet verwenden lassen. Für PNG und JPG kannst du „Breite (px)“ auf 120 bis 7680 Pixel einstellen. Die Höhe beträgt ein Sechstel der Breite, auf ganze Pixel gerundet. SVG verwendet einen Koordinatenraum von 1200 × 200.

Der Bildexport enthält die gesammelten Farben, nicht das hochgeladene Foto. Exportiere vor dem Leeren der Arbeitsfläche, wenn du eine separate Datei behalten oder teilen möchtest.

Einen Farbverlauf erstellen

Öffne „Farbverläufe erstellen“ und wähle einen Verlaufstyp. Ein Farbstopp legt eine Farbe an einer bestimmten Stelle des Verlaufs fest. Verschiebst du ihn, ändert sich die Position dieser Farbe.

Klicke bei linearen oder Mehrpunktverläufen auf eine freie Stelle der Fläche, um eine Farbe hinzuzufügen. Bei radialen und konischen Verläufen klickst du auf die Stoppleiste. Lineare, radiale und konische Verläufe erlauben bis zu sechs Stopps, Mehrpunktverläufe bis zu zehn Punkte. Mindestens zwei bleiben erhalten.

Klicke auf einen Farbpunkt, um seine Farbe zu bearbeiten. Ein Doppelklick entfernt ihn, sofern diese Geste unterstützt wird. Auf Touchgeräten lassen sich lineare und Mehrpunkt-Farbpunkte auch durch doppeltes Tippen entfernen. Radiale und konische Stoppgriffe entfernst du durch ruhiges Gedrückthalten. Du kannst diese Griffe auch mit Tab fokussieren und Delete drücken.

Beim Hinzufügen einer linearen Farbe werden die Stopps entlang der vorhandenen Linie neu verteilt. „Farbverlauf umkehren“ kehrt ihre Reihenfolge um. „Richtung zurücksetzen“ setzt Richtung oder Mittelpunkt des aktuellen Typs zurück. Die Vorschau aktualisiert sich während der Bearbeitung.

„Verlaufsvorlagen“ bietet Entwürfe als Ausgangspunkt. „Bibliothek öffnen“ öffnet eine größere Sammlung mit Suchfeld. Eine Vorlage ersetzt die aktuellen Verlaufseinstellungen und fragt bei Bedarf vorher nach. Mit der Vergrößerungstaste der Vorschau kannst du den Verlauf größer betrachten. Escape führt zurück.

Den Verlauf anderswo verwenden

CSS liefert den in der Vorschau verwendeten Verlauf. Füge ihn in eine background-Deklaration deines Stylesheets ein. SCSS enthält eine Variable mit dem Verlauf und ein Anwendungsbeispiel.

Tailwind vereinfacht das Ergebnis auf eine lineare Richtung und bis zu drei Farben. Zwischenstopps, genaue Positionen und die Form radialer, konischer oder Mehrpunktverläufe können dabei verloren gehen. Verwende CSS, wenn diese Details erhalten bleiben sollen.

SVG erzeugt Vektormarkup für lineare oder radiale Verläufe. Konische und Mehrpunktverläufe werden in SVG linear angenähert und sehen deshalb anders aus. Ein Kommentar im erzeugten Code weist auf diese Ersetzung hin.

„Verlauf herunterladen“ exportiert eine PNG- oder JPG-Datei mit 1200 × 600 Pixeln. Im Exportdialog kannst du außerdem CSS-, Tailwind-, SCSS- oder SVG-Code kopieren. Prüfe das exportierte Bild in seiner endgültigen Größe, da sein Seitenverhältnis von der Vorschau abweichen kann. Speichere Bild oder Code vor dem Verlassen. Der aktuelle Verlauf wird nicht als Vorlage gespeichert.

Die Lesbarkeit von Text prüfen

1. 01

   Öffne „Kontrastprüfung“.

2. 02

   Gib Text- und Hintergrundfarbe als sechsstellige HEX-Werte einschließlich # ein oder wähle sie jeweils mit dem Farbwähler aus.

   Textfarbe

   Hintergrundfarbe

3. 03

   Lies das Kontrastverhältnis und die vier Ergebnisse für AA und AAA ab.

4. 04

   Falls das Farbpaar nicht besteht, ändere eine Farbe oder probiere „An AA anpassen“ oder „An AAA anpassen“. Prüfe anschließend das Ergebnis erneut.

   An AA anpassen

   An AAA anpassen

Schwarzer Text auf Weiß hat beispielsweise ein Verhältnis von 21:1. Weiß auf Weiß hat 1:1. Ein höherer Wert bedeutet einen größeren Helligkeitsunterschied.

WCAG stuft Text ab 18 Punkt, etwa 24 CSS-Pixeln, als groß ein. Bei Fettschrift gilt dies ab 14 Punkt, etwa 18,7 CSS-Pixeln. Die vier Anzeigen zeigen beide Größenkategorien gleichzeitig. Eine andere Schriftgröße in der Vorschau ändert das Kontrastverhältnis der Farben nicht.

Diese Grenzwerte stammen aus den WCAG-Hinweisen zum Mindestkontrast und den Hinweisen zum erhöhten Kontrast. Ein bestandenes Farbpaar belegt nicht die Barrierefreiheit einer ganzen Seite.

„An AA anpassen“ und „An AAA anpassen“ versuchen, die Textfarbe bei unverändertem Hintergrund aufzuhellen oder abzudunkeln. Ziel sind die Grenzwerte für normalen Text. Bei manchen Farbpaaren gelingt das mit dieser Methode nicht. Wähle dann selbst eine andere Text- oder Hintergrundfarbe.

Verwende einen vollständigen Wert wie #336699. Bei einem unvollständigen oder ungültigen Wert bleibt die zuletzt akzeptierte Farbe aktiv. Das Verhältnis wird mit zwei Nachkommastellen angezeigt. Ob es besteht, entscheidet jedoch der ungerundete Wert.

Die angenäherten Farbfilter ändern nur die Vorschau. Sie sind einfache visuelle Effekte und simulieren das Farbsehen einer bestimmten Person nicht zuverlässig. Die Kontrastberechnung bleibt unverändert.

Vorlagen und letzte Farben aufbewahren

„Als Vorlage speichern“ speichert eine benannte Konfiguration aus „Farbwähler“, „Farben aus Bildern“, „Paletten erstellen“ oder „Kontrastprüfung“. Gib einen Namen ein und drücke „Vorlage speichern“. Mit „Vorlagen“ öffnest du die gespeicherte Liste. Auf dem Smartphone nutzt du die Lesezeichentaste. Wähle eine Vorlage, um sie im zugehörigen Werkzeug wiederherzustellen.

Vorlagen werden in diesem Browser gespeichert. Bildvorlagen können neben Farben und Abtastpositionen auch das importierte Bild enthalten. Sie werden nicht automatisch auf andere Geräte übertragen und können beim Löschen der Browserdaten verloren gehen. Lade wichtige Ergebnisse zusätzlich als Dateien herunter.

„Löschen“ entfernt nach Bestätigung eine gespeicherte Vorlage. „Alles löschen“ entfernt nach Bestätigung die gesamte Sammlung. Keine der beiden Aktionen löscht Originaldateien von deinem Gerät.

„Zuletzt verwendete Farben“ hält bis zu 20 letzte Einträge fest. Die Auswahl eines Eintrags kopiert seinen HEX-Wert. In „Farbwähler“ wird die Farbe außerdem übernommen. Das Leeren der Farbhistorie ist vom Löschen der Vorlagen unabhängig.

Wenn ein Ergebnis nicht stimmt

Lässt sich ein Bild nicht öffnen, versuche eine kleinere JPG- oder PNG-Datei. Für HEIC und HEIF gibt es einen zusätzlichen Decoder. Bei anderen Bildvarianten hängt die Unterstützung vom Browser ab. Es lässt sich jeweils nur ein Bild öffnen.

Wenn die ermittelten Farben ein gewünschtes Detail nicht erfassen, klicke von Hand auf die betreffende Stelle. Schalte „Extreme Farbtöne filtern“ aus, wenn du fast schwarze oder fast weiße Farben brauchst. Automatische Vorschläge beschreiben Gruppen abgetasteter Farben. Ihr Mittelwert muss daher nicht als exakte Pixelfarbe im Bild vorkommen.

Weicht ein kopierter Verlauf von der Vorschau ab, prüfe das gewählte Codeformat. Tailwind und manche SVG-Ausgaben sind Annäherungen. CSS erhält den Verlaufstyp und die Positionen.

Ist das Kopieren in „Farbwähler“ oder „Farben aus Bildern“ blockiert, markiere den Wert im Ausgabefeld und nutze den üblichen Kopierbefehl. Eine Palette kannst du stattdessen als JSON oder Bild exportieren. Verarbeitung und gespeicherte Sammlungen bleiben im Browser, dessen Speicher jedoch keine Sicherung ersetzt.

Mit der Tastatur arbeiten

„Rückgängig“ und „Wiederholen“ der Palette werden über Tasten bedient. Das Werkzeug weist Cmd + Z oder Ctrl + Z nicht den Palettenänderungen zu. Beim Bearbeiten von Text funktionieren diese Tastenkombinationen wie gewohnt.