Skip to main content

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.


Ähnliche Beiträge


Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

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

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel