Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

HTML Farben von großen Brands herausfinden

Bei meiner täglichen Arbeit als Webdesigner kommt ich immer wieder an den Punkt, wo ich bei einem Kundenprojekt zum Beispiel Social Media Icons integrieren muss. Damit der Besucher nun nicht nur das „“ für Facebook sieht, sollten diese Icons auch noch die Farbe des entsprechenden Netzwerks beinhalten, sodass eine bessere Assoziation beim Besucher stattfindet. Bisher war das Finden des richtigen Farbcodes (speziell bei mehreren Buttons / Icons) immer ein immenser Aufwand.

Denn entweder geht man auf die jeweilige Webseite und pickt sich dort die Farbe aus Überschriften, aus dem Logo oder großen Farbflächen raus, was bei mehreren Buttons jedoch super nervig werden kann.

Auch gibt es einige Blog Artikel die die wichtigsten Social Media Farben in einer Übersicht auflistet. Das sieht dann in etwa so aus:

Social Media Farben

  • Skype Blau
    #00aff0
  • Xing Grün
    #026466
  • Linkedin Blau
    #0976b4
  • WordPress Blau
    #21759b
  • Whats App Grün
    #34af23
  • Facebook Blau
    #3b5998
  • Instagram Blau
    #3f729b
  • Twitter Blau
    #55acee
  • Envato Grün
    #82b541
  • Spotify Grün
    #7ab800
  • Pinterest Rot
    #cc2127
  • Google+ Rot
    #dd4b39
  • YouTube Rot
    #e52d27
  • Blogger Orange
    #f57d00
  • RSS Orange
    #f26522
  • Flickr Pink
    #ff0084

 

Seit einiger Zeit ist es aber ein Leichtes an diese Social Media Colors bzw. Brand Colors ranzukommen. Eine Webseite namens brandcolors.net hat es sich zur Aufgabe gemacht, die wichtigsten Farbpaletten verschiedener sozialer Netzwerke und große Brands aufzulisten. Die aktuelle Kollektion beträgt bereits über 250 Farben von verschiedenen Unternehmen.

Die Funktion ist relativ einfach. Um einzelne Farben zu bekommen kann man die Suche benutzen um die Liste zu filtern und klickt man nun auf ein Farbkästchen, erscheint direkt der HEX-Wert zu dieser Farbe. Zeitgleich lassen sich einzelne Farben markieren (klick auf den Namen) und über das Dropdown-Menü oben rechts als komplette Kollektion herunterladen. Hierbei stehen zur Verfügung

… eine CSS Datei

.bc-color-facebook { color: #3b5998; }
.bc-background-facebook { background-color: #3b5998; }
.bc-color-twitter { color: #55acee; }
.bc-background-twitter { background-color: #55acee; }
.bc-color-google { color: #dd4b39; }
.bc-background-google { background-color: #dd4b39; }

… eine SASS Datei

$bc-facebook: #3b5998;
$bc-twitter: #55acee;
$bc-google: #dd4b39;

… eine LESS Datei

@bc-facebook: #3b5998;
@bc-twitter: #55acee;
@bc-google: #dd4b39;

… und eine ASE Datei zum Importieren in Photoshop o.Ä.. Zudem gibt es noch eine Share-URL um seinen aktuellen Filter zu teilen (befindet sich hinter dem kleinen Icon neben dem Dropdown rechts). Beispiel: http://brandcolors.net/?filter=d60f1a74,6347298d,416f3100

Über Github kann man sich an der Weiterentwicklung beteiligen und Farben vorschlagen, die in der Sammlung von Brandcolors noch fehlen. Wenn du also eine Farbe in der Kollektion von Brandcolors vermisst, dann eröffne doch ein neues Issue unter https://github.com/brandcolors/feedback/issues.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

4 Kommentare

Avatar von Leo

Leo 16. Oktober 2014 um 14:54

Perfekt!

Wer erfolgreich werben will, kommt um die Erkenntnisse der Farbpsychologie nicht herum. Ohne die Sinne mit Farbtöne zu berühren, gelingt es nicht, Emotionen auszulösen.

Lg
Leo

Antworten
Avatar von André

André 16. Oktober 2014 um 15:00

So ein Artikel steht auch noch auf meiner Liste, aber vorab gibt es erstmal noch ein paar Farbtools, bis ich mal richtig Zeit hab, denn das wird ein richtiger Broken. :D

Antworten
Avatar von Leo

Leo 16. Oktober 2014 um 15:27

Finde das auf alle Fälle ein sehr Spannendes Thema – Farben!

Avatar von André

André 16. Oktober 2014 um 18:45

Ja definitiv! Wenn man überlegt, was das Ändern der Farbe eines Buttons bei manchem Shop schon bewirkt hat… Und allgemein, wie der Mensch in bestimmten Situationen von Farben beinflusst werden kann.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*