Orangeverlauf: 25 warme Codes von Pfirsich bis Brandorange

Ein Orangeverlauf mischt zwei oder mehr Orangetöne, oft mit einem benachbarten Gelb, Rot oder Rosa, und kaum ein Verlauf wirkt wärmer. Helle Pfirsich- und Aprikosenversionen wirken sanft und einladend, leuchtende Mandarine laut und verspielt, Brandorange oder Rost erdig und erwachsen. Unten stehen 25 Codes, nach diesen Stimmungen gruppiert, danach folgt, was dazu passt und wie du Schrift darauf setzt, ohne deine Worte zu verlieren.

Sanfte Orangeverläufe: Pfirsich und Aprikose

Blasse Orangetöne sind der freundlichste Einstieg in die Farbe. Sie liegen nah an Haut, Brot und dem Licht später Nachmittage, weshalb Bäckereien, Hautpflege und Kindermarken auf sie setzen. Halte den hellsten Stopp fast cremefarben, damit die Mischung einen ruhigen Ort zum Ausruhen hat. Einen ganzen Artikel zum blassesten Ende findest du unter Pfirsichverläufe.

Leuchtende Orangeverläufe: Mandarine und Zitrus

Gesättigtes Orange ist pure Energie. Es passt zu Sales, Essenslieferung, Sport, Festivals und allem, was in Vorschaugröße auffallen muss. Das Risiko ist, dass leuchtendes Orange zu einem einzigen lauten Block verflacht, gib ihm also einen helleren Stopp Richtung Gelb oder einen tieferen Richtung Rot. Diese kleine Verschiebung lässt es wie Licht statt wie Farbe wirken.

Sonnenuntergangs- und Bernstein-Orangeverläufe

Orange senkrecht von Gold oben zu Rot oder Pflaume unten laufen zu lassen ergibt einen Sonnenuntergang, vermutlich den vertrautesten Verlauf überhaupt. Bernsteinmischungen sind der leisere Cousin: Honig-, Marmeladen- und Whiskytöne, die reich wirken, ohne zu schreien. Für die volle Himmelsbehandlung geht Sonnenuntergangsverläufe weiter.

Brandorange- und Rost-Verläufe

Schiebst du Orange Richtung Braun, wird es zu Terrakotta, Rost und Kupfer: Farben von Tontöpfen, Herbstlaub und altem Leder. Sie wirken handwerklich und durchdacht, daher passen sie zu Interieurs, Kaffee, Keramik, Outdoor-Marken und allem mit handgemachter Geschichte. Sie tragen auch weißen Text weit besser als leuchtendes Orange.

Oranges Licht auf dunklem Grund

Die hochwertigste Art, Orange zu nutzen, ist sparsam. Beginne bei fast Schwarz, tiefem Braun oder Marine und lass ein Orange aus einer Ecke glühen wie Glut oder eine Straßenlaterne. Das ist die Behandlung für späte Events, Restaurants, Musik und alles, was nach Einbruch der Dunkelheit warm wirken soll. Dunkle Mischungen zeigen leicht Banding, lies also dunkle Verlaufshintergründe vor dem Export.

Farben, die zu einem Orangeverlauf passen

Orange hat zwei Arten guter Partner. Nachbarn wie Gelb, Rosa und Rot gehen direkt in es über. Gegenspieler wie tiefes Blau und Petrol lassen es vibrieren, sollten aber als Akzent neben dem Orange stehen, nicht in derselben Mischung, weil der Mittelpunkt zwischen ihnen grau wird. Matschige Verläufe erklärt, warum, und Komplementärfarben zeigt, wie du den Sog sicher nutzt.

Text auf Orangeverläufen

Hier scheitern die meisten Orange-Designs. Weiß auf leuchtender Mandarine wirkt kräftig, hat aber ein Kontrastverhältnis von etwa 2,8 zu 1, weit unter den 4,5 zu 1, die WCAG für Fließtext verlangt. Fast Schwarz auf demselben Orange erreicht über 6 zu 1. Die Regel ist einfach: dunkle Schrift auf hellen und leuchtenden Orangetönen, weiße Schrift erst ab Brandorange abwärts. Die vollständige Methode steht in Farbkontrast und Barrierefreiheit.

Gradiently übernimmt diesen Teil für dich. Ein Mark weiß, wo die Worte stehen: Er verschiebt seinen ruhigsten Bereich dahinter, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass ein oranges Design in jeder Größe lesbar bleibt, ohne Kästen oder Schatten.

Orangeverlauf in CSS

Jeder Code oben ist ein einzelner CSS-Wert, den du in background einfügen kannst. Für einen Abschnitt, der Wärme und Tiefe braucht, schichte ein radiales Licht über eine lineare Basis und setze immer eine einfarbige Ersatzfarbe. Lies lineare CSS-Verläufe für die vollständige Syntax.

.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}

Wenn du einen Orange-Look willst, den sonst niemand postet, stöbere im Markt nach warmen Marks: Suche Wörter wie „Brandorange“ oder „Aprikose“, gestalte kostenlos mit jedem freien und sichere ihn dir, wenn er zu deiner Marke wird.