Webdesign: Farben
Farben wecken unterschiedliche Assoziationen. Je nach Land und Kultur wird den Farben eine andere Bedeutung zugewiesen. Wer mit Farben zu tun hat, der braucht immer mal wieder geeignete Online-Tools.
Informationen gemäss Stand vom 13.5.2023
Inhaltsverzeichnis: Farben
- Wichtige Begriffe
- Die Farben im Detail
- Wie Sie Farben aufgrund eines Fotos wählen!
- Gibt es zur Farbenwahl nützliche Online-Tools?
- Farbenverlauf
- Weitere Tipps
- Das Video
Wichtige Begriffe
Gelb, Rot und Blau sind die Primärfarben.
Wenn Sie die Primärfarben miteinander mischen, entstehen die Sekundärfarben.
Wenn Sie eine Primärfarbe mit einer Sekundärfarbe mischen, entstehen Tertiärfarben.
Das CMYK-Farbmodell steht für Cyan, Magenta, Yellow und Key.
Das RGB-Farbmodell wurde für digitale Displays entwickelt. RGB steht für die Farben Rot, Grün und Blau.
Die Farben im Detail
In unserem Kulturkreis können den Farben folgende Werte zugesprochen werden:
- Blau
seriös, spirituell, beruhigend, rational, stabil, göttlich, harmonisch, ruhig, jedoch auch kalt, übermässig tugendhaft, sachlich, lästig, undurchschaubar. Erholung, Vertrauen, Ruhe und Treue - Rot
antreibend, stark, leidenschaftlich, erhitzend, impulsiv, anregend, aktiv, wärme, dynamisch, jedoch auch kräftig, warnend und aggressiv. - Orange
froh, aktiv, genussvoll, aufbauend, jugendlich, gesundheitsfördernd, vital, lebensfreudig, warm, energetisch, gesellig, jedoch auch billig, aufdringlich und laut. Optimismus, Vertrauen – aber auch Überforderung und physische Leiden. - Violett
würdevoll, befreiend, magisch, kreativ, weiblich, fantasievoll, selbstlos, empfindsam, intuitiv, aussergewöhnlich, jedoch auch Spiritualität, Eitelkeit, Einsamkeit, überheblich, unreif. - Bordeaux
positiv, selbstbewusst, stark, bestimmt, aufregend, optimistisch, jedoch auch dominierend, aggressiv, herrschsüchtig, bedrohlich. - Rosa
zugänglich, sanft, ansprechbar, überhaupt nicht bedrohlich, jedoch auch Mitleid erregend, übervorsichtig. - Grün
ausgleichend, harmonisch, frisch, Naturverbundenheit, Neubeginn, Hoffnung, Vertrauen, Frische, Entspannung und Ruhe, jedoch auch Unerfahrenheit und Neid. - Gelb
leichtigkeit, hell, heiter, warm, stärkend, aufheiternd, optimistisch, Herbst, Behaglichkeit, Weisheit, Reife, jedoch auch Feigheit, Krankheit, Egoismus, Verrat und Neid. - Grau
seriös, neutral, ausgewogen, dezent, zurückhaltend, jedoch auch Elend, Trostlosigkeit, unverbindlich, unbestimmt. Weiss
seriös, rein, klar, frisch, futuristisch, friedlich, aufrichtig, frei, neutral, festlich, jedoch auch nüchtern, kalt. Unschuld und Wahrheit- Schwarz
feierlich, raffiniert, eigenwillig, sinnlich, geradlinig, geheimnisvoll, individuell, stark, dramatisch, neutral, seriös, jedoch auch düster, reserviert, streng, hart, Trauer, Kraft und Tod. - Braun
Anpassung, Gelassenheit, Erfahrung und Bequemlichkeit, jedoch auch die Schwere.
Wie Sie Farben aufgrund eines Fotos wählen!
- Farben extrahieren
Dieses Werkzeug extrahiert aus einem Foto eine Farbpalette. HEX-Codes werden gleich dazu geschrieben. Als Formate sind JPG, PNG und GIF-Dateien erlaubt. Das Werkzeug erstellt auch gleich eine ASE-Datei für Photoshop und eine CSS-Datei mit den Farben.
bighugelabs.com/colors.php
- Farbenschema generieren
Hier lässt sich ein Schema eines Fotos erstellen, welches sich bereits im Internet befinden muss.
degraeve.com/color-palette/
Gibt es zur Farbenwahl nützliche Online-Tools?
- Colorsystem
Auf dieser Site gibt es viele nützliche Hinweise rund um Farben. So zum Beispiel Farbsysteme in Kunst und Wissenschaft, Farben und Kulturen sowie den virtuell begehbaren Farbraum.
colorsystem.com - Designguide
Weitere nützliche Informationen finden Sie bei designguide.at. Die Schwerpunkte:
➤ Farben Einführung
➤ Licht/Körperfarben
➤ Farbsysteme
➤ Farbmessung
designguide.at/farbe.html - Farbimpulse
Ganz dem Thema Farben verschrieben hat sich Farbimpulse, das Onlinemagazin für Farben in Wissenschaft und Praxis.
farbimpulse.de - Weitere Werkzeuge
rund um Farben und Fonts.
Farbenverlauf => Gradient
- Farbverlauf-Generator
Zur Erstellung eines Farbverlaufes können Sie die gewünschten Farben wahlweise mit den Schiebereglern einstellen, per Mausklick auswählen oder direkt als einen Hex-Wert eintragen.
migano.de/gradientmaker.php - Zweifarbig
Eventuell möchten Sie die Bilder auf Ihrer Website alle im gleichen Farbton verwenden. Dafür eignet sich dieses Online-Tool.
duotone.shapefactory.co - Ultimate CSS Gradient Generator (E)
Erstellen Sie eigene Farbverläufe mit dem ausgefeilten CSS Generator. Sie erhalten den CSS Code für Ihre Website.
colorzilla.com/gradient-editor/ - CSS Gradient (E)
CSS Gradient ist eine kleine Website und ein kostenloses Tool, mit dem Sie einen Gradienten-Hintergrund für Websites erstellen können. Neben der Tatsache, dass es sich um einen CSS-Gradientengenerator handelt, ist die Website auch vollgepackt mit bunten Inhalten über Gradienten von technischen Artikeln bis hin zu realen Gradientenbeispielen wie Stripe und Instagram.
cssgradient.io
Weitere Tipps
- Weniger ist mehr
Verwenden Sie nicht zu viele Farben, sondern arbeiten Sie mit Farbpaletten. Der Einsatz zu vieler Farben macht ein Design unruhig und unübersichtlich. - Kontrast
Achten Sie auf einen guten Kontrast von Text und Hintergrund. Wenn Sie etwas verkaufen wollen, hat die saubere Lesbarkeit des Textes erste Priorität.
Das Video
Autor: Walter B. Walser, kundennutzen.ch