Gelbverlauf: leuchtende Codes, die nicht ins Grüne kippen

Ein Gelbverlauf wirkt hell und fröhlich, wenn jeder Stopp warm tendiert: Creme, Butter, Zitrone, Gold, Orange. Er geht auf zwei vorhersehbare Arten schief. Mische ihn Richtung Blau oder Petrol, und die Mitte wird grün, dunkle ihn mit Grau ab, und er wird oliv. Halte den Farbton auf der warmen Seite von Gelb, vertiefe ihn mit Bernstein statt mit Schwarz, und er bleibt durchgehend Sonnenschein. Die Codes unten beruhen auf dieser Regel.

Warum Gelbverläufe grün oder matschig werden

Gelb liegt im Farbkreis direkt neben Grün, viel näher, als die meisten erwarten. Das macht es in drei Situationen anfällig.

• Mischen Richtung kühler Farben. Zwischen Gelb und Cyan, Petrol oder Blau muss der Browser durch Grün hindurch. Eine Mischung aus sonnigem Gelb zu Himmelblau bekommt in der Mitte einen Limetten- oder Salbeistreifen.
• Abdunkeln mit Schwarz oder Grau. Unsere Augen lesen ein dunkles, wenig gesättigtes Gelb als Oliv oder Khaki statt als „dunkles Gelb“. Es gibt kein tiefes Gelb, das noch gelb aussieht.
• Start bei einer Zitrone, die schon ins Grüne neigt. Säuerliche Zitronentöne wie #e4f04a wirken allein frisch, ziehen aber jeden benachbarten Stopp Richtung Limette.

Dasselbe Problem mit der grauen Mitte betrifft alle gegenüberliegenden Farben, und matschige Verläufe behandelt es allgemein. Gelb zeigt es nur zuerst, weil Grün so nah ist.

Leuchtende Gelbverlauf-Codes

Das sind die lauten: Sommer, Sale-Banner, Kindermarken, Festivals, Warnschilder, schön gemacht. Jeder kombiniert Gelb mit einem wärmeren Partner, damit Bewegung entsteht, ohne ins Grüne zu driften.

Leuchtendes Gelb ermüdet in großen Mengen, nutze diese also auf Posts und Bannern statt auf einer ganzen Website. Auf einer Story mit 1080×1920 gibt eine Gelbmischung, die unten zu Orange ausblendet, dem Auge einen Landeplatz und hält den hellsten Teil nahe dem Überschriftenbereich oben.

Helle Gelbverläufe: Butter und Creme

Blasses Gelb verhält sich wie warmes Papier. Es ergibt hervorragende Hintergründe für Speisekarten, Einladungen, Newsletter und alles mit viel Lesestoff, weil dunkle Schrift darauf bequem sitzt. Halte mindestens einen Stopp nahe Weiß, damit das Gelb wie Licht wirkt, nicht wie eine Tönung über allem.

Goldene und dunkle Gelbverläufe ohne Oliv

Damit Gelb satt wirkt, dunkle es nicht ab. Verschiebe es. Bewege die tieferen Stopps Richtung Bernstein, Ocker und Braun, und Gelb wird zu Gold, Honig und Senf statt zu Khaki. Speziell für metallische Finishs zeigt Goldverläufe, wie du den Glanz vortäuschst.

Gelb-Blau-Verläufe ohne grüne Mitte

Gelb und Blau sind eine klassische Paarung, aber eine direkte Mischung dazwischen erzeugt ein grünes Band. Du hast drei gute Optionen: einen hellen Stopp dazwischensetzen, die Mischung über Rosa und Violett führen oder die beiden Farben als Flächen statt als Mischung getrennt halten.

Im modernen CSS kannst du den Browser auch bitten, den langen Weg um den Farbkreis zu nehmen. Die Interpolation in OKLCH mit longer hue schickt Gelb über Orange, Rosa und Violett zu Blau statt über Grün. Unterstützung und Syntax behandelt CSS-Verläufe in OKLCH.

.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}

Text auf einem Gelbverlauf

Gelb ist die hellste gesättigte Farbe überhaupt, deshalb verschwindet weiße Schrift darauf. Weiß auf #facc15 misst etwa 1,5 zu 1, während ein tiefes Braun wie #422006 auf demselben Gelb über 9 zu 1 misst. Nutze fast überall dunkle Schrift und spare Weiß für die tiefsten Goldtöne. Farbkontrast und Barrierefreiheit hat die Schwellenwerte.

In Gradiently trifft Automatische Farbe diese Entscheidung für dich und wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass ein gelbes Design nicht bei jeder Größenänderung eine manuelle Kontrollprüfung braucht. Wenn Gelb Teil deiner Identität ist, behandelt Bedeutung der Farbe Gelb, was es signalisiert, und Orangeverläufe sind sein natürlicher Nachbar.