Zum Inhalt springen
Musterli

Warm

Farbverlauf Terrakotta

Von hellem Ton zu gebranntem Rotbraun, erdig und ruhig.

Im Editor anpassen

Winkel, Form und Farben ändern, dann als CSS, SVG oder PNG exportieren.

Farben

Die Farbstopps des Verlaufs. Ein Klick auf einen Wert kopiert ihn.

  1. Farbe 1

    Text in Schwarz, Kontrast 15.5:1

  2. Farbe 2

    Text in Schwarz, Kontrast 5.9:1

  3. Farbe 3

    Text in Weiss, Kontrast 7.8:1

Code

Füge die Zeilen in die Regel deines Elements ein. Die erste Zeile ist eine Ersatzfarbe, die zweite der Verlauf für alle Browser, die dritte interpoliert in OKLCH für moderne Browser.

CSS

background-color: #f0dac2;
background-image: linear-gradient(180deg, #f0dac2 0%, #efd7be 5.56%, #ebceb2 11.11%, #e6c1a1 16.67%, #e0b08d 22.22%, #d99e79 27.78%, #d38c67 33.33%, #cd7e5a 38.89%, #c97452 44.44%, #c8714f 50%, #c66f4e 55.56%, #c06b4b 61.11%, #b66446 66.67%, #ab5b41 72.22%, #9f523b 77.78%, #944a35 83.33%, #8b4431 88.89%, #853f2e 94.44%, #833e2d 100%);
background-image: linear-gradient(180deg in oklch, #f0dac2 0%, #efd7be 5.56%, #ebceb2 11.11%, #e6c1a1 16.67%, #e0b08d 22.22%, #d99e79 27.78%, #d38c67 33.33%, #cd7e5a 38.89%, #c97452 44.44%, #c8714f 50%, #c66f4e 55.56%, #c06b4b 61.11%, #b66446 66.67%, #ab5b41 72.22%, #9f523b 77.78%, #944a35 83.33%, #8b4431 88.89%, #853f2e 94.44%, #833e2d 100%);

Tailwind

bg-[#f0dac2] bg-[linear-gradient(180deg,_#f0dac2_0%,_#efd7be_5.56%,_#ebceb2_11.11%,_#e6c1a1_16.67%,_#e0b08d_22.22%,_#d99e79_27.78%,_#d38c67_33.33%,_#cd7e5a_38.89%,_#c97452_44.44%,_#c8714f_50%,_#c66f4e_55.56%,_#c06b4b_61.11%,_#b66446_66.67%,_#ab5b41_72.22%,_#9f523b_77.78%,_#944a35_83.33%,_#8b4431_88.89%,_#853f2e_94.44%,_#833e2d_100%)]

Den Verlauf weiterdenken

Dieselben Farben in anderen Generatoren. Jede Karte öffnet den Editor mit diesen Farben.

Mit den Farben weiterarbeiten

Mach aus den Farbstopps eine Palette oder eine ganze Farbskala.

So verwendest du den Verlauf

Kopiere das CSS in die Regel des Elements, das den Verlauf tragen soll, etwa einen Abschnitt, eine Karte oder einen Button. Für Text auf dem Verlauf wähle eine Schriftfarbe, die auf allen Farbstopps genügend Kontrast hat; die Werte bei den Farben helfen dir dabei. Im Editor änderst du Winkel, Form und Übergang und exportierst den Verlauf auch als Bild.

Ähnliche Verläufe

Alle Farbverläufe

  • Zimtstern

    Helles Creme, Zimtbraun und dunkler Kakao, gemütlich wie Weihnachtsgebäck.

  • Alpenglühen

    Warmes Gelb, Orange und Rosenrot wie das letzte Licht auf den Gipfeln.

  • Aprikose

    Sanfter Übergang von cremigem Hellgelb zu reifem Aprikosenorange.

  • Glut

    Ein radialer Verlauf von Goldgelb über Orange zu dunklem Rot, wie glühende Kohlen.

  • Kürbisfeld

    Kräftiges Gelb und sattes Orange, quer von links nach rechts.

  • Gletscher

    Fast weisses Eisblau, das nach unten in kräftiges Blau übergeht.