Konische Farbverläufe: Farbkreise, Diagramme und Glanz

Ein konischer Farbverlauf (englisch conic gradient) ändert die Farbe, während er um einen Mittelpunkt streicht, so wie der Zeiger einer Uhr über das Zifferblatt wandert. Ein linearer Farbverlauf ändert sich entlang einer Linie und ein radialer, während er sich nach außen bewegt, ein konischer aber ändert sich mit dem Winkel. Blickst du von oben auf einen in Streifen bemalten Kegel, sähest du dasselbe, daher der Name. Figma und einige andere Tools nennen ihn Winkelverlauf.

Dieses winkelbasierte Verhalten macht konische Verläufe gut für Dinge, die andere nicht können: Farbkreise, Tortendiagramme, gebürstetes Metall, Strahlenkränze und Lichtstrahlen. Dieser Leitfaden zeigt jedes mit Live-Beispielen. Die vollständige CSS-Syntax steht unter CSS conic-gradient().

So funktioniert ein konischer Farbverlauf

Du legst einen Mittelpunkt, einen Startwinkel und eine Liste von Farben mit Winkeln oder Prozentwerten fest. Null Grad zeigt nach oben, und der Verlauf läuft im Uhrzeigersinn. Wo eine Farbe endet und die nächste beginnt, ist ein Stopp, genau wie bei anderen Verläufen, nur dass 25 % eine Vierteldrehung bedeutet, nicht ein Viertel der Breite.

Diese Wiederholung der ersten Farbe am Ende ist wichtig. Weicht der letzte Stopp vom ersten ab, entsteht eine harte Linie senkrecht nach oben von der Mitte, wo der Verlauf auf seinen eigenen Anfang trifft. Wie du die Farbtöne auf einem solchen Kreis liest, erklärt der Leitfaden zum Farbkreis.

Beispiele für konische Farbverläufe im Design

Torten- und Ringdiagramme

Gib jeder Farbe einen Start- und Endwinkel, und der Verlauf wird zum Tortendiagramm, ohne Bild und ohne Diagrammbibliothek. Mit einer kreisförmigen Maske wird daraus ein Ringdiagramm. Das passt zu einfachen, dekorativen Daten auf Posts und Folien. Für echte Berichte füge Beschriftungen hinzu, denn ein Diagramm, das allein auf Farbe setzt, versagt bei Menschen, die Farben anders sehen.

.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}

Metall und Glanz

Gebürsteter Stahl, eine Schallplatte und ein Satinknopf reflektieren Licht in Keilen um ihre Mitte. Abwechselnd helle und dunkle Grautöne in einem konischen Verlauf ahmen das nach. Nimm vier bis sechs Wechsel; weniger sieht aus wie ein Wasserball, mehr wie ein Diagramm. Tönt die Grautöne leicht warm für Gold oder Messing und leicht bläulich für Chrom.

Strahlen und Kränze

Setzt du den Mittelpunkt über oder außerhalb des Bildes, wird ein schmaler heller Keil zum Scheinwerferstrahl oder zum Lichtschacht durch ein Fenster. Ein sich wiederholender konischer Verlauf mit abwechselnden Keilen wird zum Strahlenkranz, dem Retro-Stilmittel von Rabattplakaten. Halte Strahlenkränze hinter einer großen, einfachen Überschrift; allein sind sie laut.

Schillern

Echtes Schillern ändert den Farbton mit dem Blickwinkel. Ein sanfter konischer Schwung aus Pastelltönen, mit der Mitte seitlich versetzt, kommt dem überraschend nah. Er ist die Grundlage der meisten holografischen Farbverläufe.

Konisch, radial oder linear

Bist du unsicher, frag dich, was das Licht in deinem Bild tut. Licht, das über eine Fläche fällt, ist linear. Licht, das von einer Quelle kommt, ist radial. Licht, das von etwas Drehendem oder Gekrümmtem reflektiert wird, ist konisch. Arten von Farbverläufen zeigt alle nebeneinander.

Konische Farbverläufe richtig einsetzen

1. 1

   Entscheide, wo die Mitte liegt

   Ein zentrierter konischer Verlauf sieht aus wie ein Diagramm oder ein Farbkreis. Rückst du die Mitte in eine Ecke oder aus dem Bild, wird daraus Licht und Glanz.

2. 2

   Schließe den Kreis

   Wiederhole die erste Farbe am Ende, es sei denn, du willst eine sichtbare Naht. Harte Nähte sind nur für Diagramme und Strahlenkränze.

3. 3

   Verstecke oder mildere die Spitze

   Jeder konische Verlauf läuft in der Mitte in eine scharfe Spitze zusammen. Lege ein Logo, einen Kreis oder den Bildrand darüber oder weichzeichne die Ebene.

4. 4

   Nutze einen Startwinkel

   Das Drehen des Starts mit from verschiebt, wo der hellste Keil landet, und das ist für eine Komposition oft alles, was nötig ist.

5. 5

   Kombiniere mit anderen Arten

   Ein dezenter konischer Glanz über einer linearen oder radialen Basis vermittelt ein Materialgefühl, ohne sich in den Vordergrund zu drängen.

Konische Verläufe erzeugen auch Muster: Eine sich wiederholende Version mit vier harten Vierteln zeichnet ein Schachbrett in einer Zeile. CSS-Muster behandelt sie.