Do

21

Apr

2016

Die richtigen Farben für eure Webseite

Blau. Ungefähr Hellblau. Irgendwas mit Blau-Grün-Dings. Manchmal ist es schwer zu beschreiben, welche Farbe ihr euch vorstellt – vor allem, wenn ihr versucht, die exakte Farbe aus eurem Logo zu reproduzieren. Anstatt die Farben anzunähern und zu hoffen, dass es "ungefähr hinhaut", gibt es viel bessere Wege, das Farbkonzept eurer Webseite zu erarbeiten! Der Schlüssel dazu sind Farbcodes und bestimmte Tools, die ich euch in diesem Blogbeitrag vorstelle.

Der Trick an der Sache mit den Farben ist, sich mit Farbcodes und entsprechenden kleinen Helfer-Programmen vertraut zu machen. Wenn ihr das gemacht habt, könnt ihr mit unseren Style-Optionen ganz einfach die passenden Farben einstellen.

 

In diesem Artikel gehe ich mit euch durch, wie ihr RGB- und Hex-Codes findet und diese dann auf eurer Webseite nutzt. 

So arbeitet ihr mit Farbcodes

Ein Farbcode – was ist das überhaupt?

Vielleicht habt ihr ja schon einmal von Pantone-Farben gehört oder Farbfächer gesehen, deren Farbfelder Bezeichnungen wie Autumn Mist oder Flamingo's Dream tragen. Auf eurer Webseite lassen wir das hinter uns und arbeiten stattdessen mit Web-Farben, die für die Anzeige am Computer-Bildschirm optimiert sind.

Im Internet werden all die zigtausend Farben durch ihren Code (oder Wert) definiert, den Computerprogramme verstehen und entsprechend exakt anzeigen können. Während also ein Programm nichts mit dem wohlklingenden Namen Whispering Peach anfangen kann, weiß es, wie es den Farbcode #FF9899 in schickes Pink umwandelt. Computer, hm? Manchmal haben sie einfach keinen Blick für Poesie...

 

Das Gute daran ist jedoch: Sobald ihr diesen Code gefunden habt, habt ihr den Schlüssel dazu, jede Farbe exakt zu reproduzieren!

 

Es gibt verschiedene Arten, Farben zu kodieren. Zwei Arten – RGB und Hex – sind wichtig für die Darstellung am Bildschirm und damit auch wichtig für euch:

 

  • RGB Wert | RGB Code. Durch drei verschiedene Werte, die die genaue Zusammensetzung einer Farbe durch Rot, Grün und Blau steuern, könnt ihr jede Farbe exakt definieren. Die Codes sehen dann zum Beispiel so aus: RGB (26, 119, 127) oder RGB: 26, 119, 127.

  • Hex Wert | Hex Code. Der Hex-Code eurer Farben wird als 6-stelliger alphanumerischer Code angezeigt, zum Beispiel: E82C0C. Im Web setzt man in der Regel eine Raute davor, also: #E82C0C.

Ihr wisst jetzt also, was ein Code ist. Wie findet ihr nun den entsprechenden Wert für eure Farben heraus? 

Eure Geheimwaffe: das Farbauswahl-Werkzeug

Farbauswahl-Werkzeuge, auch Color Pickers genannt, sind ideal, wenn ihr eine bestehende Farbe auf eurer Webseite nutzen möchtet. Vielleicht befindet sie sich ja in eurem Logo oder auf einer Produkt-Verpackung. Vielleicht sind es auch Farben eines Fotos, die euch inspirieren, sie auf eurer Jimdo-Seite zu nutzen? Oder habt ihr eine andere Webseite bespitzelt... äh... bewundert, bei der ihr eine Farbe gefunden habt, die perfekt für eure Überschriften wäre?

 

Es gibt eine Menge kostenloser Tools, die euch dabei helfen können. Hier sind zwei gute Optionen:

 

  • ColorZilla. Diese Browser-Erweiterung für Google Chrome und Firefox ist ein Farbauswahl-Werkzeug, das ihr auf jeder beliebigen Webseite anwenden könnt. Sobald ihr es installiert habt, klickt ihr auf "Pick Color From Page" und bewegt die Maus zu der Farbe, deren Code ihr herausfinden möchtet. In einem schwarzen Balken werden euch die Codes angezeigt und sogar direkt in eurer Zwischenablage gespeichert. So könnt ihr ihn später einfach einfügen.
  • Adobe Color CC. Mal so unter uns: Das ist mein Favorit. Ihr könnt selbst Farbkombinationen erfinden oder auf ein bestehendes Bild zurückgreifen. Wenn ihr ein Bild (zum Beispiel euer Logo oder Hintergrundbild) auf dieser Webseite hochladet, wird das Tool eine Palette herausziehen, die perfekt aufeinander abgestimmt ist. Bewegt die Kreise über die Stellen, die ihr analysieren möchtet, um die Farbwerte herauszufinden. Um euch zu zeigen, wie das funktioniert, habe ich ein Stockphoto von Unsplash auf die Adobe Webseite hochgeladen:

Hinweis: Wenn ihr aus der Welt von Papier, Tinte und Druck kommt, kennt ihr vielleicht nur eure Pantone/PMS-Farben. Sucht in dem Fall online nach Tools, die diese Farbangaben in RGB konvertieren.

Wenn ihr ein Logo oder eine Grafik hochgeladen habt, bekommt ihr eine präzise Farbangabe. Wenn ihr hingegen ein Foto hochgeladen habt, variieren die Farben eher aufgrund von unterschiedlichem Licht und schattigen Regionen. Schiebt die Farbregler also ein bisschen über das Bild, um schöne Farben zu entdecken und zu speichern.

 

Jedes der Programme ist ein bisschen anders, jedoch bekommt ihr in allen Programmen eure RGB oder Hex-Werte. Kopiert euch die Werte, da ihr sie später noch braucht.

Farbpaletten und Inspiration

Wenn ihr noch keine bestimmte Farbe im Kopf habt und nicht sicher seid, wo ihr beginnen sollt: Holt euch Inspiration! Es gibt eine Menge kostenloser Tools und Webseiten, wo ihr kreative Farbkombinationen entdecken könnt. Zum Beispiel:

 

  • COLOURlovers: Hier könnt ihr euch durch tausende Farbpaletten scrollen, um eurer Jimdo-Seite den perfekten Anstrich zu geben. Kopiert dann einfach die Farbcodes eurer Lieblingsfarben und setzt sie auf eurer Webseite ein.

  • ColorHunt: Hier gibt es jeden Tag eine neue Farbpalette zu entdecken.

  • Coolors: Hier könnt ihr Zufallspaletten generieren lassen und sie euren Bedürfnissen anpassen. Präsentiert eure Kombinationen den anderen Nutzern oder lasst euch von deren kreativen Ideen überzeugen.

  • Jimdo #MatchMonday: Jeden Freitag posten wir auf unseren sozialen Netzwerken ein Foto, auf dessen Basis wir eine Farbpalette für euch erstellt haben. Werdet Fan unserer Facebook-Seite und lasst euch von uns inspirieren!

 

Wieviele Farben braucht ihr eigentlich?

Viele der vorgestellten Webseiten geben euch fünf, sechs oder sogar mehr Farben pro Kombination zur Auswahl. Aber unter uns: So viele braucht ihr gar nicht – im Ernst! Es ist sogar so, dass zu viele Farben eure Webseite chaotisch und unübersichtlich wirken lassen. Mit je weniger Farben ihr jongliert, desto einfacher wird es für euch, mit ihnen umzugehen und sie perfekt zu balancieren.

 

Mein Tipp an euch: Beschränkt euch anfangs auf 1-2 Akzentfarben und kombiniert diese mit Weiß, Grau und Schwarz. Dadurch gebt ihr eurer Jimdo-Seite einen konsistenten und professionellen Look, ohne eurer Seite den Anstrich eines LSD-Traumes zu geben.

 

Als Beispiel habe ich euch hier ein paar Jimdo-Seiten zusammengesucht, die Farben gekonnt akzentuiert, aber sparsam einsetzen:

Passt die Farben eurer Jimdo-Seite an

Ihr habt eure Farben beisammen? Super! Ihr habt auch schon die RGB oder Hex-Codes? Noch besser! Jetzt seid ihr bereit, eurer Webseite mit den Style-Optionen einen neuen Anstrich zu verpassen.

 

Ich habe hier ein Beispiel vorbereitet. Auf meiner Testseite möchte ich gern die Farben dem Titelbild mit dem bunten Mädchen vom Holi-Festival anpassen.

 

Öffnet also die Style-Optionen im Bearbeitungsbereich eurer Jimdo-Seite und stellt sicher, dass die Option Detail-Styling angeschaltet ist. Nun erscheint eine Farbrolle, mit der ihr verschiedene Elemente eurer Webseite anklicken könnt – zum Beispiel den Text, die Überschriften oder Buttons.

 

In meinem Beispiel klicke ich jetzt als erstes das Überschriften-Element an, da ich mir schon einen Lila-Ton gespeichert habe, den ich gerne verwenden möchte.

Da ich mir vorher meinen gewünschten Farbcode schon aus dem Foto heraus kopiert habe, klicke ich auf das große Farbfeld in der Bearbeitungsleiste. Hier könnt ihr sehen, dass wir schon 64 Farben eingefügt haben, die ihr nutzen könnt. Ich hingegen brauche diese Vorschläge nicht – mein Lila-Ton wartet in der Zwischenablage auf mich. Ich konzentriere mich also auf das Textfeld unter dem großen Farbfeld, in dem schon RGB-Werte eingetragen sind. Hier kann ich nun entweder die RGB-Werte meiner vorher ausgesuchten Farbe eintippen, oder aber ich kopiere einfach den Hex-Code hinein – beides funktioniert! Wenn ich das getan habe, sehe ich, dass sich die Farbe geändert hat. Mit Enter bestätige ich diese Farbauswahl.

 

Damit ihr nicht jedes Mal den Hex- oder RGB-Code neu eingeben müsst, wenn ihr die Farbe an mehreren Orten eurer Jimdo-Seite verwenden möchtet, merkt sich der Editor eure Farbeinstellung. Ihr findet die Farbe nun in der Reihe unter unseren 64 Farbvorschlägen, sodass ihr sie an anderer Stelle wieder anklicken und auswählen könnt.

Ihr möchtet, dass das alles noch schneller geht?

Das Detail-Styling ermöglicht es euch, ganz genau auszuwählen, welches Element welchen Look bekommt.  Wenn ihr jedoch eine Akzentfarbe habt, die zum Beispiel mit eurem Logo zusammenhängt, möchtet ihr ja die ganze Webseite in dem Farbkonzept gestalten. Damit ihr nicht jedes Element einzeln anklicken müsst, haben wir hier eine kleine Hilfe für euch eingebaut – damit spart ihr eine Menge Zeit. Super, oder?

 

Öffnet also einfach noch einmal die Style-Optionen eurer Webseite und setzt das Detail-Styling auf Aus. Wenn ihr das getan habt, seht ihr die Option, ein Farbschema für eure gesamte Webseite zu definieren. Klickt auf die Farbbox und stellt eure eigene Farbe wie oben beschrieben ein. Wenn ihr auf Enter klickt seht ihr, dass diese Farbe nun auf eurer kompletten Webseite als Akzentfarbe auftaucht – zum Beispiel in der Navigation, in Überschriften, Trennstrichen und mehr.

 

Hinweis: Wenn ihr euch dazu entscheidet, eurer Webseite ein einheitliches Farbkonzept zu geben, macht dies als ersten Schritt. Hinterher könnt ihr das Detail-Styling wieder aktivieren und einzelne Elemente noch einmal ändern. Wenn ihr hingegen erst einzelne Elemente gestaltet und anschließend das Farbkonzept für eure ganze Webseite anwendet, wird eure vorherige Arbeit überschrieben. Mehr Informationen dazu findet ihr in unserem SupportCenter.

Bonus: Transparenz

Ich habe nun das Farbschema meiner Webseite geändert und möchte nun einige Bereiche der Jimdo-Seite mit einer kleinen Transparenz versehen – zum Beispiel die Seitenleiste. Dafür klicke ich mit der Farbrolle auf die Seitenleiste, in der sich auch meine Navigation befindet (Detail-Styling: An!). Dann nutze ich den Regler unter dem Farbfeld, um die Transparenz der Farbe – und damit des Elements – einzustellen. Je weiter ich ihn nach links verschiebe, umso durchsichtiger wird der Bereich.

Ein einheitliches Farbkonzept auf der Webseite zu erstellen ist gar nicht so schwer, oder? 

 

Wie kamt ihr auf das Farbkonzept eurer Jimdo-Seite? Hattet ihr schon vorher ein Logo oder habt ihr euch einfach während der Gestaltung etwas überlegt?

 

Ich bin gespannt auf eure Antworten! :)

 

Bis gleich in den Kommentaren,

Jasmin

Jasmin Schreiber

Web-Redakteurin bei Jimdo

Unsere Lieblings-Seiten im Design "Malaga"
>> mehr lesen

Pssst – unsere 3 Geheimtipps unter den Designvorlagen!
>> mehr lesen

Eure drei Design-Favoriten kurz vorgestellt: Zurich, Berlin und Rio De Janeiro
>> mehr lesen

Die ideale Designvorlage für eure Webseite!
>> mehr lesen

Kommentar schreiben

Kommentare: 31
  • #1

    Kaiserdamm Berlin (Donnerstag, 21 April 2016 12:54)

    Berlin ist bunt, nicht grau! Auch Dank der guten Tipps von Jimdo.

  • #2

    Petra Brunsch (Donnerstag, 21 April 2016 13:00)

    Kikoys sind ebenfalls bunt!
    Danke Jimdo für die Farbwelt und diese tollen Tipps!
    :-)

  • #3

    Matthias Woestmeyer (Donnerstag, 21 April 2016 15:37)

    Heute geht es ja bunt her! Danke für die Tipps!

  • #4

    Susanne Körösi (Donnerstag, 21 April 2016 19:07)

    Danke, wieder was Neues gelernt :)

  • #5

    Antje Seewald (Donnerstag, 21 April 2016 20:45)

    Als Malerin kann ich dazu nur sagen: Mut zur Farbe!
    Mein "Quietschgrün" habe ich gewählt, weil's frisch und fröhlich ist und das dazu gehörige Dunkelgrün ist eine Art Hausfarbe. Gelb und Ocker/Braun sind eher warme, ruhige Farben - als Gegenpol zum ansonsten naturgemäß recht bunten Seiteninhalt.

  • #6

    www.abraham-photography.com (Donnerstag, 21 April 2016 21:12)

    "DIE WELT IST BUNT"

    DANKE FÜR DIE TIPPS

    VIELE GRÜßE AUS FRÖMERN ( HOF SÜMMERMANN) NRW.

    MICHAEL

  • #7

    Sabine Diebold (Freitag, 22 April 2016 06:59)

    Super Tipps, vielen Dank - werde heute gleich mal die Farben anpassen.

  • #8

    Renate (Freitag, 22 April 2016 08:39)

    Vielen Dank für die Hinweise, werde mich damit mal auseinedersetzen. Mal sehen wie ich meine Seite optimiere!

  • #9

    Gerald (Freitag, 22 April 2016 12:16)

    Danke!
    www.der-edelstein.at

  • #10

    A-F-Immobilien (Freitag, 22 April 2016 12:47)

    Ich wage mal die These, dass es für die eigene Homepage nur eine richtige Farbwahl gibt: die des eigenen CI ;-)

  • #11

    Petra Eckerl Tierfotografie (Freitag, 22 April 2016 22:11)

    Tolle Tipps!! Wird gleich mal ausprobiert :)

  • #12

    Haarspray Test (Samstag, 23 April 2016 09:30)

    Sehr hilfreich! Vielen Dank!

  • #13

    Anette Seidler (Samstag, 23 April 2016 19:53)

    That's Magic ... ich liebe Farben ;-)
    Danke für die wunderbaren Tipps und sonnige Grüße aus Teneriffa sendet die Matrix-Queen

  • #14

    Herne (Samstag, 23 April 2016 23:54)

    Die richtigen Farben für die eigene Webseite zu finden ist nicht immer einfach, aber das wichtigste es darf nicht zu Dunkel sein.

  • #15

    Simone Brokmeier (Sonntag, 24 April 2016 22:05)

    Hallo Jasmin,
    genial! Ich habe meiner Seite ohnehin gerade ein facelift verpasst mit neuem Design und bei den Farben gerade "rum-gedoktert" damit es stimmig wird und dann kommt genau jetzt dein Farb-Style-Blog! Perfekt. Vielen Dank für die viele Hintergrundinfo und Tipps. Herzliche Grüße aus München, Simone

  • #16

    Gasthof - Pension Entenmühle im Fichtelgebirge (Montag, 25 April 2016 12:07)

    ✿˜"*°•ღڿڰۣڿ♥Vielen Dank für die Tippsڿڰۣڿღ•°*"˜✿

    ✿˜"*°•ღڿڰۣڿ♥Freundliche Grüßeڿڰۣڿღ•°*"˜✿

    ✿˜"*°•ღڿڰۣڿ♥Das Team vom Gasthof Entenmühleڿڰۣڿღ•°*"˜✿

  • #17

    Marijo (Montag, 25 April 2016 21:48)

    Hallo,

    ich finde die Tipps über die richtigen Farben sehr hilfreich. Habe auch gleich meine Hintergrundfarbe geändert.

    Vielen Lieben Dank nochmal!

  • #18

    Dominik Blaser (Montag, 25 April 2016 23:49)

    Vielen Dank!

    Ja - die Farben haben einen entscheidenden Einfluss...

    Windige Grüsse aus Bern

  • #19

    sulue (Dienstag, 26 April 2016 15:07)

    Ich stehe total auf schwarz und weiß im Layout und bringe die Farben lieber in meinen Produkten unter :)

  • #20

    Jasmin von Jimdo (Dienstag, 26 April 2016 21:52)

    Hey sulue!

    Ja, das kann man natürlich auch machen. Ich finde minimalistische Farbkonzepte auch toll – gern auch in s/w mit einer Akzentfarbe.

    Liebe Grüße :)
    Jasmin

  • #21

    Emrah Baskin (Mittwoch, 27 April 2016 03:49)

    Ich glaube es wird langsam mal wieder Zeit über die Farbauswahl meiner Homepage nachzudenken. Sehr inspirierender Artikel.

  • #22

    Bandmaschinen (Mittwoch, 27 April 2016 10:58)

    Farben sind immer gut, das Leben ist eh schon grau...

  • #23

    Ralf Kremer (Donnerstag, 28 April 2016 17:35)

    Hallo Jasmin, großes DANKESCHÖN. Reproduzierbarkeit von Farbtönen durch Verwendung von Farbcodes, genial einfach - e... g... Hatte ich hier noch nicht bewußt auf dem Schirm. Funktioniert ja auch bei Wolle ;)
    Auch die Tools werde ich mir mal ansehen!
    Feundliche Grüße aus Templin

  • #24

    Rosemarie Bach (Donnerstag, 28 April 2016 17:49)

    Vielen Dank! Wieder habt Ihr ein Thema aufgenommen, dass mich gerade umtreibt: die Farben nicht mehr dem Zufall überlassen. Das werde ich Sonntag gründlich studieren.

  • #25

    Birgit (Donnerstag, 28 April 2016 17:55)

    Ganz toll der Tipp zu den Farbauswahl-Werkzeugen. Eins habe ich sofort installiert und werde es bestimmt mal einsetzen. Danke!

  • #26

    Fritz (Donnerstag, 28 April 2016 19:16)

    Wie immer gute Tipps von Jimdo, besten Dank.

  • #27

    Hartmut Rausch (Donnerstag, 28 April 2016 19:28)

    Hallo,

    super Tips, doch ich strauchel noch etwas mit der mobilen Ansicht. Leider bekomme ich dort meine Anpassungen nicht rein. Wie muss ich vorgehen, dass es in beiden Ansichten gleich schön daher kommt?
    danke für Eure Unterstützung
    Hartmut

  • #28

    drsaeger (Donnerstag, 28 April 2016 22:15)

    durch verschiedene Manipulationen hat sich alles verschoben .es ist keine ursprüngliche Maske mehr herzustellen. am liebsten würde ich noch mal von vorne anfangen zu speichern. Also kein Feld mehr da wo ich was eintragen kann. Vielen Dank
    Email xsaeger@aol.com

  • #29

    Urlaub im Naturpark Fichtelgebirge (Samstag, 30 April 2016 11:50)

    Danke für die Tipps ☆ ☆ ☆ ☆ ☆

    Wünsche einen schönen sonnigen Tag nette Grüße

    Olaf ( ͡° ͜ʖ ͡° )

  • #30

    Tony (Samstag, 30 April 2016 19:06)

    Hallo, finde Eure Anregungen an und für sich vollkommen richtig und okay. Aber witzig demgegenüber finde ich dafür Eure mail, die man schlecht lesen konnte, weil weisse Schrift auf zarten hellblaugrauen Hintergrund gesetzt wurde. Ist schon etwas widersprüchlich...^^

  • #31

    Viktor Bohu (Donnerstag, 05 Mai 2016 11:50)

    Ich habe eine Webseite entwickelt, auf der man ebenfalls Farben finden kann: www.Colors.style
    Schaut es euch mal an!