Der Farbkreis

Die Nutzung eines Farbkreises ist eine einfache und effektive Methode, um eine ansprechende und stimmige Farbpalette für jedes Projekt zu erstellen. So geht's:

Schritt 1: Wähle eine Basisfarbe.

Nutze den Farbwähler, um eine Basisfarbe auf dem Farbkreis auszuwählen. Diese Farbe bildet das Fundament deiner Farbpalette, bestimmt die Stimmung und den Ton deines Designs und beeinflusst die Auswahl der zusätzlichen Farben.

Schritt 2: Entscheide dich für ein Farbschema.

Wähle ein Farbschema. Jedes Schema bietet eine andere visuelle Wirkung:

• Komplementär gibt dir maximale Kontraste durch die Verwendung von Farben, die sich genau gegenüberliegen.
• Triadisch sorgt für einen lebendigen, aber ausgewogenen Look durch Farben in einer Dreiecksformation.
• Analog bringt einen harmonischen Effekt mit Farben, die nebeneinander liegen.
• Split Complementary (oder geteiltes Komplementär) eignet sich für einen kontrastreichen Look mit weniger Spannung durch die Basisfarbe und zwei angrenzende Farben als Komplementärfarben.
• Quadratisch bringt mehr Vielfalt mit vier Farben, die gleichmäßig um den Kreis verteilt sind.
• Monochromatisch nutzt die Helligkeit (Tönungen) und Dunkelheit (Schattierungen) der Basisfarbe, um subtile Übergänge und markante Kontraste zu erzeugen.

Schritt 3: Auf dein Design anwenden.

Sobald du die beste Farbpalette für dein Projekt gefunden hast, kannst du sie für die gewünschte visuelle Wirkung auf dein Design anwenden.

Die Farbtheorie bietet Designer*innen ein Rahmenwerk, um das perfekte Farbschema zu erstellen und den gewünschten Eindruck zu vermitteln, sei es durch tiefe Violett- und Goldtöne für Eleganz oder sanfte Blau- und Grüntöne für Ruhe. Ob du mit starken Kontrasten Aufmerksamkeit erregen oder lieber eine harmonische Atmosphäre schaffen möchtest, das Verständnis der Farbtheorie ist entscheidend. Hier ist ein Überblick über einige wichtige Konzepte:

Was sind die Primärfarben (RYB)?

Primärfarben im RYB-Farbmodell sind Rot, Gelb und Blau. Diese drei Farben bilden die Grundlage des Farbkreises und können in verschiedenen Anteilen gemischt werden, um alle anderen Farben zu erzeugen.

Was sind die Sekundärfarben?

Sekundärfarben füllen die Räume zwischen den Primärfarben auf dem Farbkreis und entstehen durch das Mischen zweier Primärfarben. Zum Beispiel ergibt die Mischung aus Rot und Blau Lila, während Rot und Gelb Orange ergeben. Grün entsteht durch die Mischung von Gelb und Blau.

Was sind die Tertiärfarben?

Die restlichen Farben auf dem Kreis sind die Tertiärfarben oder Zwischenfarben. Diese Farben erhältst du, wenn du eine Primärfarbe mit einer Sekundärfarbe mischst. Zum Beispiel ergibt die Mischung aus Rot und Orange Rot-Orange und füllt den fehlenden Raum zwischen den beiden Farben. Mit einem scrollbaren Farbkreis kannst du den individuellen Farbton von Rot-Orange basierend auf deiner Platzierung auf dem Kreis anpassen. Du kannst auch Blau-Grün, Blau-Violett, Rot-Orange, Rot-Violett, Gelb-Orange und Gelb-Grün mischen, um einzigartige Tertiärfarben zu erzeugen. Diese feine Farbauswahl ermöglicht es Produktdesigner*innen, genau die richtigen Schattierungen und Akzentfarben zu finden.

Was sind die sieben Farbschemata?

Farbschemata sind strategische Farbkombinationen, die helfen, visuelle Balance zu schaffen. Diese Schemata nutzen Prinzipien der Farbtheorie für ästhetisch ansprechende Designs. Es gibt sieben gängige Arten von Farbschemata:

Komplementärfarben

Komplementärfarben sind Farben, die sich innerhalb des Farbkreises gegenüberliegen. Sie stehen in starkem Kontrast zueinander. Eine Komplementärfarbe findest du, wenn du eine Farbe auswählst und dann den Farbkreis um 180 ° drehst. Einige komplementäre Farbschemata sind allgemein bekannt und beliebt, z. B. Rot und Grün. Farbschemata dieser Art können sehr effektiv sein, wenn du sowohl warme als auch kalte Farben in deinem Produkt verwenden möchtest.

Geteilt komplementäre Farben

Geteilt komplementäre Farben sind eine Variante, bei der du eine Primärfarbe mit den zwei Farben direkt neben der Komplementärfarbe kombinierst. So erhältst du drei Farben, die eine subtilere Farbpalette ergeben als ein rein komplementäres Farbschema, das für einen starken Kontrast sorgt.

Monochromatische Farben

Monochromatische Farben sind vielleicht am einfachsten zu verstehen, da sie lediglich die hellere oder dunklere Version einer Grundfarbe sind. Ein monochromatisches Farbschema reduziert die Komplexität der Entscheidungsfindung bei der Verwendung mehrerer kontrastierender Farben und ermöglicht es Designer*innen, Farbe auf subtile Weise effektiv zu nutzen. Um eine monochromatische Farbpalette zu erstellen, skalierst du die helleren und dunkleren Versionen gleichermaßen von deiner Primärfarbe.

Analoge Farben

Analoge Farben sind Gruppen von drei Farben, die in einem Farbkreis nebeneinander liegen. Dadurch entsteht eine weichere, natürlichere Farbpalette. In der Natur findest du zahlreiche eng verwandte Farbtöne. Denk z. B. an die Blätter eines Baumes oder an die feinen Unterschiede in der Farbe des Wassers, wenn du auf das Meer hinausschaust. Ein analoges Farbschema wirkt harmonisch und kann helfen, verschiedene Elemente in einem Design visuell miteinander zu verbinden.

Triadisch

Ein triadisches Farbschema gibt dir drei gleichmäßig kontrastierende Farben. Die Punkte sind gleichmäßig um den Farbkreis verteilt und bilden ein gleichseitiges Dreieck. Es ist am besten, eine einzelne Primärfarbe auszuwählen und die anderen beiden als Akzente zu verwenden, wenn du mit einem triadischen Farbschema designst. Triadische Farbschemata wirken tendentiell mutiger und verspielter.

Tetradisch (doppelt komplementär)

Was haben Google und Microsoft gemeinsam? Beide verwenden tetradische Farbpaletten für ihre Logos. Tetradisch bezieht sich auf eine Gruppe von vier, also wählen wir in diesem Fall vier Farben, die ein Rechteck bilden. Diese Farben umfassen zwei Sets von Komplementärfarben und schaffen eine lebendige und energetische Palette. Ein tetradisches Farbschema wird manchmal als „doppelt komplementär“ bezeichnet.

Quadratisch

Ähnlich wie bei Tetradisch verwendet ein quadratisches Farbschema vier Farben, aber in diesem Beispiel sind sie gleichmäßig um den Farbkreis verteilt und bilden ein Quadrat. Dies schafft einen ausgewogeneren Look im Vergleich zum hohen Kontrast der tetradischen Schemata. Wie bei tetradischen Farbschemata ist es am besten, eine dominante Farbe zu wählen und die anderen als Akzente zu verwenden.

Warme Farben vs. kalte Farben

Der Farbkreis unterscheidet zwischen warmen und kühlen Farbtönen. Warme Farben vermitteln Intensität, wie Rot, Orange und Gelb. Kühle Töne wie Violett, Blau und Grün erzeugen ein Gefühl der Ruhe und Entspannung. So nutzt die Meditations-App Calm z. B. hauptsächlich die Farbe Blau, um bewusst ein Gefühl der Ruhe zu schaffen.

Ein Farbsystem (auch Farbmodell oder Farbordnung) ist ein System, bei dem Farben durch numerische Werte dargestellt werden. Auf dieser Seite werden vier Farbmodelle verwendet:

1. Rot, Grün und Blau (RGB)
2. Cyan, Magenta, Gelb und Schwarz (CMYK)
3. Farbwinkel, Sättigung und Helligkeit (HSL)
4. Hexadezimalcodes

Rot, Grün, Blau (RGB)

Das RGB-Farbsystem bildet die Grundlage für alle Designs, die auf einem Bildschirm angezeigt werden. Dieses Farbsystem basiert auf der menschlichen Farbwahrnehmung und darauf, wie unsere Augen mit Licht interagieren. Diese „additiven Farben“ können gemischt werden, um die Vielzahl von Farben zu erzeugen, die wir täglich auf unseren Bildschirmen sehen.

Cyan, Magenta, Gelb und Schwarz (CMYK)

Das CMYK-Modell hingegen ist die Grundlage für jede Art von Druckdesign. Diese „subtraktiven Farben“ absorbieren die Wellenlängen des Lichts und entsprechen damit besser den Pigmenten, die in der realen Welt vorkommen.

• Cyan (C): Cyan ist eine bläulich-grüne Farbe. Wenn cyanfarbene Drucktinte auf eine Oberfläche aufgetragen wird, absorbiert sie rotes Licht, wodurch sie dem menschlichen Auge blaugrün erscheint.
• Magenta (M): Magenta ist eine violett-rötliche Farbe. Sie absorbiert grünes Licht, sodass wir sie als Rotviolett wahrnehmen.
• Yellow ( Y): Gelb absorbiert blaues Licht. Dadurch entsteht beim Druck eine gelbliche Farbe.
• Key (K) bzw. Schwarz: Das „K“ in CMYK steht für „Key“, was sich auf die schwarze Komponente bezieht. Schwarze Druckfarbe wird verwendet, um den Farben mehr Tiefe zu verleihen und den Kontrast zwischen Bildern und Text zu verstärken. Außerdem werden dadurch verunreinigt erscheinende Farben vermieden, die bei dem Versuch entstehen können, Schwarz durch die Kombination anderer Farben zu erzeugen.

Farbwinkel, Sättigung und Helligkeit

Der Farbwinkel oder Farbton repräsentiert die Farben, die im Farbkreis zu sehen sind. Stell dir das als Spektrum in einem 360-Grad-Kreis vor. Während du um diesen Kreis herum navigierst, triffst du auf verschiedene Farbtöne.

• Farbwinkel/Farbton: Die Definition von „Hue“ bzw. „Farbwinkel“ ist ziemlich komplex, bezieht sich aber im Wesentlichen auf die Farben, die du im Farbkreis siehst. Ein Kreis hat 360 Grad, und die verschiedenen Farbtöne werden verschiedenen Winkeln im Kreis zugeordnet.
• Sättigung: Die Lebendigkeit oder Intensität eines Farbtons, bekannt als Sättigung, spiegelt seine Reinheit und Fülle wider. Am äußeren Rand des Farbkreises siehst du einen Farbton in voller Sättigung. Wenn du dich zur Mitte des Kreises bewegst, wird der Farbton weniger intensiv. Um die Intensität eines Farbtons zu verringern, mischen wir Schwarz und Weiß (also Grau) ein.
• Helligkeit: Die Helligkeit bestimmt, wie viel Schwarz oder Weiß einer Farbe beigemischt wird. Du erhältst Pastellfarben, wenn du mehr Weiß hinzufügst, und eine tiefere, dunklere Palette, wenn du mehr Schwarz dazumischst.

Hexadezimalcodes

Mit Hexadezimal- oder Hex-Codes wird deinem Computer mitgeteilt, wie viel Rot, Grün und Blau er kombinieren muss, um die Farbe eines Pixels auf deinem Bildschirm zu erzeugen.

Jedes Pixel auf deinem Bildschirm besteht aus drei verschiedenen Farbelementen, die rotes, grünes und blaues Licht erzeugen. Diese Farbelemente, manchmal auch Subpixel genannt, sind so klein, dass sie dem menschlichen Auge als eine einzige Farbe erscheinen.

Durch das Mischen verschiedener Anteile von rotem, grünem und blauem Licht kann jedes Pixel bis zu 16 Millionen Farben darstellen – mehr als das menschliche Auge wahrnehmen kann.

Jedes Pixel kann 256 Rot-, 256 Grün- und 256 Blauwerte mischen, um 16 Millionen mögliche Farben zu erzeugen. (Wenn du 256 x 256 x 256 multiplizierst, erhältst du etwas mehr als 16 Millionen). Anhand von Binärcodes (bestehend aus einer Reihe von Einsen und Nullen) teilt dein Computer jedem Pixel mit, welche Farbe es darstellen soll. Um z. B. den Rotwert auf 200 zu setzen, würde der Computer diesen Wert in binärer Form ausgeben: 11001000. Da binärer Code für Menschen unverständlich ist, wird das hexadezimale System als lesbare Alternative verwendet.

Wie funktioniert der Hex-Code?

Ein Hex-Code hat drei Werte – einen für Rot, Grün und Blau, die jeweils durch zwei Ziffern dargestellt werden. Zum Beispiel besteht #F234A2 aus:

• Rot: F2
• Grün: 34
• Blau: A2

Was hat es mit den Buchstaben auf sich? Im Gegensatz zu unserem üblichen Dezimalsystem (Basis-10) verwendet das hexadezimale System Basis-16. Es geht von 0 bis 9, und um die Zahlen von 10 bis 15 darzustellen, werden die Buchstaben A bis F verwendet.

Hex-Codes in RGB umwandeln

Da Hex-Codes und HSL-Werte eigentlich nur verschiedene Darstellungsformen des RGB-Farbmodells sind, können sie konvertiert werden. Du wirst wahrscheinlich nicht oft einen Hex-Code in einen RGB-Wert umwandeln müssen, es gibt jedoch eine schnelle und einfache Methode. Für jeden der drei Werte:

• Multipliziere die erste Zahl (oder den ersten Buchstaben) mit 16.
• Addiere die zweite Zahl (oder den zweiten Buchstaben) dazu.

Für #E234A2 ist der erste Wert E2. Er repräsentiert die Zahl 226 (14 * 16 + 2). Diese Zahl ist der RGB-Wert für die Farbe Rot. Und #E234A2 hat die folgenden RGB-Werte:

• Rot: 226
• Grün: 49
• Blau: 152

(Du kannst auch Hex-Codes oder RGB-Werte in HSL-Werte umwandeln, aber diese Berechnung ist etwas komplizierter.)

Farbprofile im digitalen Design: sRGB und P3

Verschiedene Geräte, Monitore, Browser und Anwendungen verwenden unterschiedliche Technologien für die Farbwiedergabe, was zu visuellen Diskrepanzen zwischen ihnen führen kann. Deshalb solltest du beim Design für digitale Plattformen Farbprofile berücksichtigen, da dadurch ein einheitlicher Standard zur Definition und Darstellung von Farben für den jeweiligen Bildschirm festgelegt wird.

Farbprofile im digitalen Design wie sRGB und P3 sorgen für eine konsistente Farbdarstellung über verschiedene Geräte hinweg. sRGB war jahrzehntelang der Webstandard für Content Creators und Webdesigner*innen und gewährleistet visuelle Konsistenz auf den meisten Verbrauchergeräten. Display P3, oft einfach als P3 bezeichnet, kann ein Spektrum von Farben mit erhöhter Lebendigkeit darstellen und zeigt 49 % mehr unterscheidbare Farben als sRGB. Die Verwendung von P3 auf Geräten wie Smartphones oder Laptops, die für sRGB ausgelegt sind, kann jedoch zu einem höheren Energieverbrauch führen, da das Gerät mehr Leistung benötigt, um den erweiterten Farbbereich darzustellen. Wenn du für Plattformen wie iOS oder hochauflösende/Retina-Bildschirme designst, ist Display P3 die beste Wahl, aber nicht alle Anwendungen und Software unterstützen den erweiterten Farbbereich vollständig.

Hier erfährst du, wie Figma P3-Farbprofile unterstützt.

WCAG und barrierefreie Farben

1999 veröffentlichte das World Wide Web Consortium (W3C) die erste Version der Web Content Accessibility Guidelines (WCAG). Dieses technische Dokument stellt sicher, dass Webinhalte für alle Benutzer*innen zugänglich sind. Anerkannt als der weltweite Standard für Barrierefreiheit im Web, haben die Empfehlungen des W3C erheblichen Einfluss in der Webentwicklung und im digitalen Design. Die Organisation veröffentlicht laufend Updates, um technologische Fortschritte und aufkommende Barrierefreiheitsbedürfnisse zu berücksichtigen.

Das aktuelle Dokument, WCAG 2.1, erweitert die Richtlinien zur Barrierefreiheit im Netz, indem es ein breiteres Spektrum an Behinderungen, einschließlich kognitiver Beeinträchtigungen und der Nutzung mobiler Geräte, berücksichtigt und so eine inklusivere Web-Erfahrung schafft. Ein wichtiger Aspekt, der in den Richtlinien behandelt wird, ist die visuelle Zugänglichkeit, insbesondere die Bedeutung von Kontrasten im Farbschema. Ein angemessener Kontrast stellt sicher, dass Text und interaktive Elemente sich von Hintergrundfarben abheben, was für Benutzer*innen mit Sehbehinderungen wie Farbenblindheit oder geringer Sehkraft unerlässlich ist.

Die WCAG-Empfehlungen spezifizieren Mindestkontrastverhältnisse für Text und Bilder von Text, um sicherzustellen, dass alle Benutzer*innen, unabhängig von ihren visuellen Fähigkeiten, auf Informationen zugreifen können. Zum Beispiel wird ein Mindestkontrastverhältnis von 4,5:1 für normalen Text empfohlen. Größerer Text muss ein Verhältnis von mindestens 3:1 haben.

WCAG 3.0 ist derzeit in Entwicklung und verspricht, noch umfassender zu werden. Es wird erwartet, dass unter anderem detailliertere Richtlinien für Farbkontraste eingeführt werden.

Mehr über WCAG 2.1 erfahren