Farbverläufe

Farbverlauf-Textur: Körnung, Papier, Glas und Seide erklärt

Zwei Farbverläufe mit identischen Farben können wie ein Filmstill, eine Letterpress-Karte, ein Smartphone-Display oder ein Abendkleid wirken. Der Unterschied ist die Textur, und sie sagt mehr als die Farben.

GradientlyVerifiziertes Gradiently-Konto··4 Min. Lesezeit
Cover: February Quay · GR·75X1·NM

Die Kurzfassung

  • Farbverlauf-Textur ist jedes Oberflächendetail über einer Farbmischung, etwa Körnung, Papierfasern, Glas oder ein Seidenglanz, das sie wie ein Material wirken lässt.
  • Jede Texturfamilie bringt eigene Assoziationen mit: Körnung steht für Film und Druck, Papier für Handwerk, Glas für Technik und Seide für Luxus.
  • Textur verändert den Charakter eines Verlaufs stärker als ein Farbwechsel, und deshalb ist sie eines der am schwersten zu kopierenden Elemente.
  • Texturen lassen sich stapeln, meist als Struktur wie Seide oder Riffelung, als Oberfläche wie Körnung oder Papier und als Licht obenauf.
  • Textur sollte den Worten nicht im Weg stehen: heller hinter Text, stärker in offenen Bereichen.
Auf dieser Seite

Farbverlauf-Textur ist die Oberfläche, die du über eine Farbmischung legst, damit sie wie ein Material wirkt und nicht wie eine Bildschirm-Voreinstellung: eine feine Körnung wie bei Film, die Struktur von Papier, die Klarheit und Brechung von Glas oder die weichen Falten von Seide. Die Farben sagen, in welcher Stimmung du bist, die Textur sagt, woraus das Ding gemacht ist. Deshalb können zwei Verläufe mit identischen Farben völlig anders wirken, und deshalb ist Textur einer der unverwechselbarsten Teile einer visuellen Identität.

Die vier Texturfamilien

TexturWie sie aussiehtWas sie sagtPasst zu
KörnungFeines zufälliges Rauschen über der FarbeFilm, Druck, analoge WärmeRedaktionelles, Musik, Fotografie, die meisten Marken
PapierWeiche Fasern und Struktur, warmer gebrochen weißer GrundHandwerk, Ruhe, etwas von Hand GemachtesPapeterie, Essen, Bücher, Studios
GlasKlarheit, Unschärfe, Brechung, scharfe LichterTechnik, Präzision, TiefeApps, Software, Hardware, Finanzen
SeideGlatte Falten mit weichen, wandernden LichternLuxus, Weichheit, SinnlichkeitBeauty, Mode, Duft, Schmuck
Vier Familien, vier Stimmen. Wähle die, die dazu passt, woraus deine Marke gemacht wäre, wenn sie ein Objekt wäre.

Körnung: Film und Druck

Körnung ist die vielseitigste Textur und die am leichtesten hinzuzufügende. Eine feine Schicht einfarbigen Rauschens lässt eine Mischung wie fotografiert oder gedruckt wirken und verdeckt außerdem das Banding, das glatte digitale Verläufe oft zeigen. Sie funktioniert mit fast jeder Palette und ist deshalb zum Standard-Feinschliff geworden. Wie viel du einsetzt und wie, steht in körnige Farbverläufe.

Papier: Handwerk und Ruhe

Papiertextur bringt einen warmen, gebrochen weißen Grund, weiche Fasern und eine leichte Unebenheit mit, als wäre der Verlauf gedruckt oder gemalt. Sie passt natürlich zu hellen Farben, gedämpften Druckfarben und Serifenschrift. Halte die Farbwolken klein und lass das Papier durchscheinen. Ein pastelliger oder erdiger Verlauf auf Papier wirkt handgemacht, wie es ein reinweißer Grund nie tut. Palettenvorschläge dafür findest du unter Pastell-Farbverläufe.

Textur-Skizzen mit einzelnen CSS-Verläufen. Satin entsteht aus scharfen, hellen Bändern zwischen dunkleren Falten, geriffeltes Glas aus wiederholten schmalen Lichtern, eine Scheibe aus einer einzelnen dünnen Spiegelung.

Glas: Technik und Tiefe

Glastexturen gibt es in zwei Arten. Mattglas verwischt alles dahinter und ist die Grundlage von Glassmorphism. Klares oder geriffeltes Glas bricht die Farbe in Bänder und setzt scharfe Lichter, wo Licht eine Kante trifft. Beide stehen für Präzision und moderne Hardware. Der Schlüssel ist das Licht: eine dünne, helle Linie, dort platziert, wo das Licht treffen würde, und dunklere Farbe überall sonst.

Seide: Luxus und Weichheit

Seide und Satin sehen aus wie glatte Stofffalten: breite weiche Schatten und schmale helle Lichter, wo sich der Stoff zum Licht dreht. Am Bildschirm heißt das ein Verlauf mit scharfen Lichtbändern zwischen tieferen Tönen, oft in einem einzigen Farbton. Tiefe Juwelenfarben wie Wein, Smaragd und Mitternacht wirken wie Abendgarderobe, blasse wie Champagner und Rouge wie Braut- oder Hautpflege. Seide wirkt wunderschön in Zeitlupe, wo die Lichter wandern können.

So stapelst du Texturen

Echte Materialien kombinieren Texturen: Seide hat Glanz und Gewebe, bedrucktes Papier hat Fasern und Farbkorn. Verläufe können das auch, solange jede Schicht eine klare Aufgabe hat. Eine verlässliche Reihenfolge ist Farbe, dann Struktur, dann Oberfläche, dann Licht.

  1. 1

    Farbfläche

    Die Mischung selbst: dein Verlauf, Mesh oder Leuchten. Bring sie zuerst in Ordnung, denn Textur kann eine schlammige Palette nicht retten.

  2. 2

    Struktur

    Die großflächige Form des Materials: Seidenfalten, Glasriffelung, die weiche Unebenheit von Papier. Sie verändert, wie die Farbe fließt.

  3. 3

    Oberfläche

    Das feine Detail: Körnung oder Papierstruktur. Sie liegt über allem und lässt die Oberfläche körperlich wirken.

  4. 4

    Licht

    Lichter und Schatten, die dem Auge sagen, woher das Licht kommt. Eine einzige konsistente Lichtquelle lässt alle Schichten wie ein Objekt wirken.

css
.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}
Zwei gestapelte Schichten: eine Satinstruktur im Verlauf und eine feine Körnungsoberfläche, im Modus Weiches Licht darübergelegt.

Textur und Lesbarkeit

Textur fügt Detail hinzu, und Detail hinter kleinen Buchstaben macht sie schwerer lesbar. Halte die Textur hinter Text heller und in offenen Bereichen stärker, und lass Schrift und Logos über jeder Texturschicht liegen, damit ihre Kanten scharf bleiben. Starke Seidenlichter und Glasspiegelungen sind das größte Risiko, weil sie helle Linien erzeugen, die ein Wort durchschneiden können. Siehe Schrift auf unruhigen Hintergründen.

Textur in voller Stärke hinter den Worten: Die Oberfläche konkurriert mit dem Satz.

Dasselbe Material, das sich hinter den Worten zurücknimmt: Textur, wo Platz ist, Ruhe, wo Text steht.

Textur als Identität

Farben lassen sich in Sekunden aus einem Screenshot abgreifen. Eine Textur und die Art, wie sie sich mit Licht und Bewegung verhält, ist viel schwerer nachzubauen. Das macht Textur zu einem der stärksten Wege, einen Verlauf zu deinem zu machen. Jeder Mark in Gradiently stapelt bis zu drei Materialien über seinen Farben, mit eigenem Licht und eigener Körnung, und in der Forge wählst du sie Regler für Regler.

February Quay

GR·75X1·NM

February Quay

Diesen Mark ansehen
Ein Mark ist Farben plus Materialien, Licht, Körnung und Bewegung. Die Materialien machen, dass er sich wie ein Objekt anfühlt.

Häufige Fragen

Was ist Farbverlauf-Textur?

Farbverlauf-Textur ist Oberflächendetail über einer Farbmischung, etwa Körnung, Papier, Glas oder Seide, sodass der Verlauf wie ein Material wirkt.

Welche Textur sollte ich auf einem Farbverlauf nutzen?

Wähle die Textur passend dazu, woraus deine Marke gemacht wäre: Körnung für Film und Druck, Papier für Handwerk, Glas für Technik, Seide für Luxus.

Wie füge ich einem Farbverlauf in CSS Textur hinzu?

Lege ein Rausch- oder Musterbild mit einem Füllmodus wie Weiches Licht oder Überlagern und geringer Deckkraft über den Verlauf.

Kann ich Texturen auf einem Farbverlauf kombinieren?

Ja. Stapele sie nach Aufgabe: Farbfläche, dann Struktur wie Seidenfalten, dann Oberfläche wie Körnung, dann Licht.

Macht Textur Text schwerer lesbar?

Das kann sie. Halte die Textur hinter Worten heller und lass Text über allen Texturschichten liegen.

Diesen Artikel teilen

Geschrieben von GradientlyVerifiziertes Gradiently-Konto

Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.

Unser Profil ansehen