Farbe

Ich nehm immer blau … das finden alle gut.

./images/farbe/corporate-color-01.png

Corporate Color

./images/farbe/corporate-color-02.png

Corporate Color

./images/farbe/corporate-color-03.png

Corporate Color

./images/farbe/corporate-color-04.png

Corporate Color

./images/farbe/corporate-color-intellij.png

Corporate Color

./images/farbe/corporate-color-tiktok.png

Corporate Color

./images/farbe/der-gleiche-farbwert.png

Der gleiche Farbwert

./images/farbe/verlaeufe-01.png

Verläufe

./images/farbe/verlaeufe-02.png

Verläufe

./images/farbe/verlaeufe-03.png

Verläufe

./images/farbe/verlaeufe-04.png

Verläufe

Grundlagen

./images/grundlagen/farbspektrum-01.png

Farbspektrum

./images/grundlagen/farbmodelle-01.png

Farbspektrum

./images/grundlagen/farbmodelle-02.png

Farbspektrum

./images/grundlagen/farbmodelle-03.png

Farbspektrum

./images/grundlagen/farbmischung-01.png

Farbmischung

./images/grundlagen/farbmischung-02.png

Farbmischung

./images/grundlagen/farbkreis-01.png

Farbkreis

./images/grundlagen/saettigung-01.png

Sättigung

./images/grundlagen/saettigung-02.png

Sättigung

./images/grundlagen/saettigung-helligkeit-01.png

Sättigung und Helligekeit

./images/grundlagen/hue-saturation-brightness-01.png

Hue, Saturation and Brightness

./images/grundlagen/farbklima-01.png

Farbklima

./images/grundlagen/farbkreise-01.png

Farbkreise

Wechselwirkungen und Farbkontraste

Komplementärkontrast

./images/kontraste/komplementaer-kontrast-01.png

Komplementärkontrast

./images/kontraste/komplementaer-kontrast-02.png

Komplementärkontrast

./images/kontraste/komplementaer-kontrast-03.png

Komplementärkontrast

Komplementärkontrast

Wodniack

Komplementärkontrast

Bambini

Farbe-an-sich Kontrast

./images/kontraste/farbe-an-sich-kontrast-01.png

Farbe-an-sich Kontrast

Farbe-an-sich Kontrast

Mayersche

Farbe-an-sich Kontrast

Nintendo

Farbe-an-sich Kontrast

Nickelodeon

./images/kontraste/farbe-an-sich-kontrast-08.jpg

Farbe-an-sich Kontrast

Farbe-an-sich Kontrast

web.archive.org

Quantitätskontrast

./images/kontraste/quantitaets-kontrast-01.png

Quantitätskontrast

Quantitätskontrast

Nach dem Film

Quantitätskontrast

Caterpillar

Bunt-Unbunt Kontrast

./images/kontraste/bunt-unbunt-kontrast-01.png

Bunt-Unbunt Kontrast

Farbe-an-sich Kontrast

Th Köln

Farbe-an-sich Kontrast

Bauhaus

Farbe-an-sich Kontrast

Vue.Js

Farbe-an-sich Kontrast

Sushi Bikes

./images/kontraste/bunt-unbunt-kontrast-07.png

Bunt-Unbunt Kontrast

Hell-Dunkel Kontrast

./images/kontraste/hell-dunkel-kontrast-01.png

Hell-Dunkel Kontrast

Hell-Dunkel Kontrast

Kurzgesagt

Hell-Dunkel Kontrast

cda

Hell-Dunkel Kontrast

Jetbrains

Hell-Dunkel Kontrast

Bega

./images/kontraste/hell-dunkel-kontrast-06.png

Hell-Dunkel Kontrast

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-01.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-02.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-03.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-04.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-05.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-06.png

Kalt-Warm Kontrast

./images/kontraste/kalt-warm-kontrast-07.png

Kalt-Warm Kontrast

Qualitätskontrast

./images/kontraste/qualitaets-kontrast-01.png

Qualitätskontrast

./images/kontraste/qualitaets-kontrast-02.png

Qualitätskontrast

./images/kontraste/qualitaets-kontrast-03.png

https://dribbble.com/shots/26682684-Monexa-Financial-Platform-Web-Design

./images/kontraste/qualitaets-kontrast-04.png

https://dribbble.com/shots/26655404-Brightpeak-Modern-Marketing-Landing-Page

./images/kontraste/qualitaets-kontrast-05.png

https://dribbble.com/shots/25909455-Health-Care-Products-Web-Design

./images/kontraste/qualitaets-kontrast-06.png

https://dribbble.com/shots/26591429-Spendy-Financial-Tracker-Landing-Page

./images/kontraste/qualitaets-kontrast-07.png

https://dribbble.com/shots/26152814-Nexa-Ai-Agents-Landing-page-web-design-3D-Animation

Simultankontrast

./images/kontraste/simultan-kontrast-01.png

Simultankontrast

./images/kontraste/simultan-kontrast-02.png

Simultankontrast

./images/kontraste/simultan-kontrast-03.png

Simultankontrast

./images/kontraste/uebersicht-01.png

Simultankontrast

Flimmern

./images/kontraste/flimmern-01.png

Flimmern

Gut zu wissen

Dieselbe Farbe wirkt auf dunklem Hintergrund leuchtender.

Liegen benachbarte Farben nahe beieinander, so schwächen sie sich ab.

Treffen Komplementärfarben aufeinander, so verstärken sie sich gegenseitig.

Bei zu kleinem Helligkeitsunterschied entsteht ein Flimmern.

./images/kontraste/flimmern-02.png

Flimmern

./images/kontraste/flimmern-03.png

Flimmern

Farbwirkung

./images/farbwirkung/farbklimata-01.png

Farbklimata

./images/farbwirkung/farbklimata-02.png

Farbklimata

./images/farbwirkung/pixel-06-a.png
./images/farbwirkung/pixel-06-b.png
./images/farbwirkung/pixel-07-a.png
./images/farbwirkung/pixel-07-b.png
./images/farbwirkung/pixel-08-a.png
./images/farbwirkung/pixel-08-b.png
./images/farbwirkung/pixel-09-a.png
./images/farbwirkung/pixel-09-b.png

Ich mache immer alles blau.
Blau finden alle gut.

./images/farbwirkung/farbharmonie-01.png

Farbharmonie

./images/farbwirkung/farbharmonie-02.png

Farbharmonie

./images/farbwirkung/farbkreis-01.png

Farbkreis

./images/farbwirkung/farb-bedeutung-rot.png
./images/farbwirkung/farb-bedeutung-orange.png
./images/farbwirkung/farb-bedeutung-gelb.png
./images/farbwirkung/farb-bedeutung-gruen.png
./images/farbwirkung/farb-bedeutung-cyan.png
./images/farbwirkung/farb-bedeutung-blau.png
./images/farbwirkung/farb-bedeutung-violett.png
./images/farbwirkung/farb-bedeutung-weiss.png
./images/farbwirkung/farb-bedeutung-grau.png
./images/farbwirkung/farb-bedeutung-schwarz.png
./images/farbwirkung/licht-raum-01-a.png
./images/farbwirkung/licht-raum-01-b.png
./images/farbwirkung/licht-raum-01-c.png
./images/farbwirkung/licht-raum-01-d.png
./images/farbwirkung/licht-raum-02-a.png
./images/farbwirkung/licht-raum-02-b.png
./images/farbwirkung/licht-raum-02-c.png
./images/farbwirkung/licht-raum-02-d.png
./images/farbwirkung/licht-raum-03-a.png
./images/farbwirkung/licht-raum-03-b.png
./images/farbwirkung/licht-raum-03-c.png
./images/farbwirkung/windows-farbe-01.png

Windows Farbschema

./images/farbwirkung/windows-farbe-02.png

Windows Farbschema

./images/farbwirkung/windows-farbe-03.png

Windows Farbschema

./images/farbwirkung/windows-farbe-04.png

Windows Farbschema

./images/farbwirkung/windows-farbe-05.png

Windows Farbschema

./images/farbwirkung/windows-farbe-06.png

Windows Farbschema

Lesbarkeit

./images/lesbarkeit/flimmern-01.png

Flimmern

./images/lesbarkeit/fernwirkung-01.png

Fernwirkung nach Heller

./images/lesbarkeit/nahwirkung-01.png

Nahnwirkung nach Heller

./images/lesbarkeit/buch-lesbarkeit-01.png
./images/lesbarkeit/buch-lesbarkeit-02.png
./images/lesbarkeit/buch-lesbarkeit-03.png
./images/lesbarkeit/buch-lesbarkeit-04.png
./images/lesbarkeit/buch-lesbarkeit-05.png
./images/lesbarkeit/buch-lesbarkeit-06.png
./images/lesbarkeit/buch-lesbarkeit-07.png
./images/lesbarkeit/buch-lesbarkeit-08.png
./images/lesbarkeit/buch-lesbarkeit-09.png

Farbenlesen

./images/farbenlesen/farben-lesen-01.png
./images/farbenlesen/farben-lesen-02.png
./images/farbenlesen/farben-lesen-03.png
./images/farbenlesen/farben-lesen-04.png
./images/farbenlesen/farben-lesen-05.png
./images/farbenlesen/farben-lesen-06.png

Farbe zum Orientieren

Das Netz der Stadt

Benedikt Schmitz

./images/orientierung/krankenhaus-01.jpg

Farbe zum Orientieren

./images/orientierung/anatomie-01.jpg

Farbe zum Orientieren

./images/orientierung/kabel-01.png

Farbe zum Orientieren

Farbe zum Orientieren

Electronic Book Review

Farbe zum Orientieren

Electronic Book Review

Farbe zum Orientieren

Electronic Book Review

Farbe zum Orientieren

Electronic Book Review

Probleme?

./images/orientierung/farbstrahl-01.png

Farbe zum Orientieren

./images/orientierung/farbstrahl-02.png

Farbe zum Orientieren

./images/orientierung/farbstrahl-03.png

Farbe zum Orientieren

./images/orientierung/farbstrahl-04.png

Farbe zum Orientieren

./images/orientierung/regeln-01.png

Farbe zum Orientieren

Farbe zum Strukturieren

./images/strukturierung/strukturieren-01.png

Farbe zum Strukturieren

Farbe zum Strukturieren

Museums für Schöne Künste

Farbe zum Strukturieren

Museums für Schöne Künste

Farbe zum Strukturieren

Museums für Schöne Künste

Farbe zum Strukturieren

Mailchimp

Farbe zum Strukturieren

Explicatis

./images/strukturierung/strukturieren-07.png

Farbe zum Strukturieren

Farbe zum Akzentuieren

./images/akzentuierung/akzentuieren-01.png

Farbe zum Akzentuieren

./images/akzentuierung/akzentuieren-02.png

Farbe zum Akzentuieren

./images/akzentuierung/akzentuieren-03.png

Farbe zum Akzentuieren

./images/akzentuierung/akzentuieren-06.png

Farbe zum Akzentuieren

Farbe zum Akzentuieren

Mini

Farbe zum Emotionalisieren

Das passiert automatisch

Zusammenfassung

Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.

Ein Farbklima aus zwei Grundfarben reicht meist aus.

Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.

Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.

Zusammenfassung

Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.

Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.

Je farbiger ein Text, umso unleserlicher wird er.

Text sollte nicht mit Blau dargestellt werden. Da Blau ein relativ kurzwelliges Licht ist und Licht unschärfer gesehen wird, je kurzwelliger es ist, wirkt Blau unschärfer als andere Farben.

./images/outro/adobe-color.png

Farbe zum Akzentuieren

Danke für's Mitmachen

https://christiannoss.de