# Verlaufsumsetzung: Bilder in Sekunden neu einfärben [Canonical HTML page](https://gradiently.design/de/guide/gradient-map) Eine Verlaufsumsetzung nimmt jedes Bild, Foto, jede Textur oder Illustration und malt es in den Farben neu, die du wählst, und behält dabei Licht und Schatten. Es ist das schnellste Werkzeug zum Umfärben. ## The short version - Eine Verlaufsumsetzung ersetzt jeden Tonwert eines Bildes, vom dunkelsten bis zum hellsten, durch die Farbe an der passenden Stelle eines Verlaufs. - Das linke Ende des Verlaufs färbt die Schatten, das rechte Ende die Lichter, und alles dazwischen die Mitteltöne. - Ein guter Verlauf für eine Verlaufsumsetzung wird von links nach rechts stetig heller. Springt die Helligkeit hin und her, wirkt das Bild solarisiert. - Verlaufsumsetzungen eignen sich ideal, um Fotoserien einheitlich zu machen, Texturen und Illustrationen in Markenfarben umzufärben und für Color Grading. - Ein Duotone ist einfach eine Verlaufsumsetzung mit zwei Farben. Drei oder mehr Stopps geben viel feinere Kontrolle über die Mitteltöne. Eine **Verlaufsumsetzung** (englisch Gradient Map) färbt ein Bild um, indem sie jeden seiner Tonwerte durch eine Farbe aus einem Verlauf ersetzt. Das Bild wird zuerst nur als Helligkeit gelesen, von Schwarz bis Weiß, und dann wird jede Helligkeit gegen die Farbe an derselben Stelle des Verlaufs getauscht: Das linke Ende malt die Schatten, das rechte die Lichter. Formen, Licht und Details des Bildes bleiben genau gleich. Nur die Farben ändern sich, und du wählst alle. ## So funktioniert eine Verlaufsumsetzung Stell dir den Verlauf als Nachschlagetabelle vor. Ein Pixel mit 0 % Helligkeit nimmt die Farbe ganz links, ein Pixel mit 50 % Helligkeit die Farbe in der Mitte, ein Pixel mit 100 % die Farbe ganz rechts. Weil die Zuordnung nur von der Helligkeit abhängt, enden zwei ganz unterschiedliche Ausgangsfarben mit gleicher Helligkeit, etwa ein roter Pullover und eine grüne Hecke, in derselben Farbe. Genau das macht Verlaufsumsetzungen so gut darin, Bilder zu vereinheitlichen. | Tonwert im Bild | Position im Verlauf | Farbe in Markenviolett | | --- | --- | --- | | Tiefster Schatten | 0 % | Tinte `#120b1f` | | Dunkle Töne | 25 % | Amethyst `#3b1d6e` | | Mitteltöne | 50 % | Violett `#7c3aed` | | Helle Töne | 75 % | Orchidee `#f0abfc` | | Hellstes Licht | 100 % | Fliederweiß `#fdf4ff` | So färbt der Verlauf Markenviolett unten ein Bild um. Die meisten Fotos haben die meisten Pixel in den mittleren drei Zeilen. ## Verläufe für Verlaufsumsetzungen, die funktionieren Die wichtigste Regel: Der Verlauf sollte von links nach rechts stetig heller werden. Dann bleiben dunkle Dinge dunkel und helle hell, und das Bild behält seine Tiefe. Den Farbton darfst du unterwegs beliebig verschieben. Klassische fotografische Looks wie Sepia und Cyanotypie sind genau solche Verläufe. - Markenviolett: `linear-gradient(90deg, #120b1f 0%, #3b1d6e 25%, #7c3aed 50%, #f0abfc 75%, #fdf4ff 100%)` - Sepia: `linear-gradient(90deg, #1a120b 0%, #5c3d24 35%, #a67c52 65%, #f3e3c7 100%)` - Cyanotypie: `linear-gradient(90deg, #0a1f3c 0%, #1f4e8c 40%, #6fa3d6 70%, #eef5fb 100%)` - Hitze: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Goldener Film: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Tiefes Petrol: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Sechs Verläufe, die alle von links nach rechts heller werden. Jeder würde ein Foto überzeugend umfärben: Der Farbton darf wandern, die Helligkeit nicht. ### Verlauf, der das Bild zerstört - Helligkeit, die im Verlauf auf und ab geht - Eine blasse Farbe ganz links, sodass Schatten hell werden - Gegensätzliche Farbtöne nebeneinander, sodass die Mitteltöne grau werden - Nur zwei Stopps mit großem Farbtonabstand ### Verlauf, der das Bild hält - Helligkeit, die von links nach rechts stetig steigt - Ein Fast-Schwarz links, ein Fast-Weiß oder ein blasser Ton rechts - Benachbarte Farbtöne oder eine leuchtende Brücke zwischen entfernten - Drei bis fünf Stopps, um die Mitteltöne zu steuern Die Helligkeitsregel absichtlich zu brechen ergibt einen solarisierten, psychedelischen Look, der für Poster Spaß machen kann. Für alles, was noch wie ein Foto aussehen soll, halte den Verlauf stetig. Wird ein Mittelton grau, ist die Lösung dieselbe wie bei jedem Farbverlauf: siehe [schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients). ## Wofür du Verlaufsumsetzungen nutzt - **Einheitliche Fotoserien:** Stockfotos, Smartphone-Fotos und alte Archivbilder erscheinen alle in einer Palette, siehe [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) - **Markentexturen:** verwandle jede Graustufentextur, etwa Wolken, Beton, Stoff oder Rauschen, in einen Hintergrund in deinen Markenfarben, siehe [Hintergrundtextur](https://gradiently.design/de/guide/background-texture) - **Illustrationen und Icons:** färbe ein ganzes Set auf einmal um, indem du seine Grautöne umsetzt - **Color Grading:** stelle eine Verlaufsumsetzungsebene auf Weiches Licht oder Farbe mit niedriger Deckkraft für einen dezenten Filmlook über den Originalfarben - **Daten und Wissenschaft:** Heatmaps und Falschfarbenbilder sind Verlaufsumsetzungen von Messwerten - **Duotone und Tritone:** zwei oder drei Stopps für kräftige Poster-Looks, siehe [der Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect) ## So wendest du eine Verlaufsumsetzung in einem Bildeditor an 1. **Füge eine Verlaufsumsetzung als Einstellung hinzu** Photoshop, Affinity Photo und GIMP haben alle eine. Nutze wenn möglich eine Einstellungsebene, damit das Original unangetastet bleibt. 2. **Lege zuerst die Enden fest** Setze links eine fast schwarze Version deiner dunkelsten Markenfarbe und rechts einen blassen Ton. Prüfe, ob das Bild noch lesbar ist. 3. **Füge Stopps für die Mitteltöne hinzu** Setze deine Hauptmarkenfarbe bei etwa 50 % und verschiebe sie, bis Haut, Himmel oder Schlüsselobjekte stimmig aussehen. 4. **Mische sie bei Bedarf zurück** Für Grading statt vollständigem Umfärben stelle den Füllmethoden-Modus der Ebene auf Weiches Licht oder Farbe und senke die Deckkraft. 5. **Speichere den Verlauf** Speichere den Verlauf als Preset und nutze ihn auf jedem Bild der Serie, damit alle zusammenpassen. ## Eine Verlaufsumsetzung in CSS Browser können eine Verlaufsumsetzung mit einem SVG-Filter anwenden. `feColorMatrix` macht das Bild zu Graustufen, und `feComponentTransfer` bildet es über eine Wertetabelle für jeden Kanal ab. Jede Liste unten ist der Verlauf Markenviolett: die Rot-, Grün- und Blauwerte der fünf Stoppfarben geteilt durch 255, an gleichmäßig verteilten Positionen. ```html ``` Eine Verlaufsumsetzung mit fünf Stopps als SVG-Filter. Ändere die Tabellenwerte, um den Verlauf zu ändern. Mit Verlaufsumsetzungen kommst du von jedem Bild zu einer Palette, die dir gehört. Wenn du lieber vom Bild ausgehst, findet [ein Bild abgleichen](https://gradiently.design/de/guide/match-a-picture) seine Palette und die ähnlichsten Marks. In Gradiently kannst du außerdem jedes Foto im Studio in den Farben des Marks tönen, den du gerade nutzt, als Mono, Duotone oder sanfte Tönung, also eine Verlaufsumsetzung, die für dich gebaut wird. ## FAQ ### Was ist eine Verlaufsumsetzung? Eine Verlaufsumsetzung färbt ein Bild um, indem sie jeden Tonwert, vom dunkelsten bis zum hellsten, durch die Farbe an der passenden Stelle eines Verlaufs ersetzt. ### Was ist der Unterschied zwischen Verlaufsumsetzung und Duotone? Ein Duotone ist eine Verlaufsumsetzung mit nur zwei Farben. Verlaufsumsetzungen können drei oder mehr Stopps haben, für feinere Kontrolle über die Mitteltöne. ### Warum sieht meine Verlaufsumsetzung seltsam aus? Wahrscheinlich geht die Helligkeit des Verlaufs auf und ab. Lass ihn von links nach rechts stetig heller werden, damit Schatten dunkel und Lichter hell bleiben. ### Wie nutze ich eine Verlaufsumsetzung fürs Color Grading? Füge die Verlaufsumsetzung als Einstellungsebene hinzu, stelle ihren Füllmethoden-Modus auf Weiches Licht oder Farbe und senke die Deckkraft. ### Kann ich eine Verlaufsumsetzung in CSS nutzen? Ja, mit einem SVG-Filter, der in Graustufen umwandelt und dann jeden Kanal über die Tabellenwerte von `feComponentTransfer` abbildet.