Social Media Color Hex Codes

index.html

<div class="SocialMediaColors">
  <div class="facebook-color fa fa-facebook"><span><br>Facebook<br>Hex: #3b5998</span></div>
  
  <div class="twitter-color fa fa-twitter"><span><br>Twitter<br>Hex: #00aced</span></div>  
  
  <div class="GooglePlus-color fa fa-google-plus"><span><br>Google +<br>Hex: #dd4b39</span></div> 
 
  <div class="pinterest-color fa fa-pinterest"><span><br>Pinterest<br>Hex: #cb2027</span></div>    

  <div class="linkedin-color fa fa-linkedin"><span><br>Linkedin<br>Hex: #007bb6</span></div> 
  
  <div class="youtube-color fa fa-youtube"><span><br>Youtube<br>Hex: #bb0000</span></div> 
  
  <div class="vimeo-color fa fa-vimeo-square"><span><br>Vimeo<br>Hex: #aad450</span></div>
  
  <div class="tumblr-color fa fa-tumblr"><span><br>Tumblr<br>Hex: #32506d</span></div>
  
  <div class="instagram-color fa fa-instagram"><span><br>Instagram<br>Hex: #517fa4</span></div>
  
   <div class="flickr-color fa fa-flickr"><span><br>Flickr<br>Hex: #ff0084</span></div>
  
    <div class="dribbble-color fa fa-dribbble"><span><br>Dribbble<br>Hex: #ea4c89</span></div> 
  
    <div class="quora-color fa fa-quora"><span><br>Quora<br>Hex: #a82400</span></div>
  
    <div class="foursquare-color fa fa-foursquare"><span><br>Foursquare<br>Hex: #0072b1</span></div>  
  
    <div class="vk-color fa fa-vk"><span><br>VK<br>Hex: #45668e</span></div>
  
    <div class="wordpress-color fa fa-wordpress"><span><br>Wordpress<br>Hex: #21759b</span></div>  
  
    <div class="stumbleupon-color fa fa-stumbleupon"><span><br>StumbleUpon<br>Hex: #EB4823</span></div> 
  
     <div class="yahoo-color fa fa-yahoo"><span><br>Yahoo<br>Hex: #7B0099</span></div>
  
     <div class="blogger-color fa fa-blogger"><span><br>Blogger<br>Hex: #fb8f3d</span></div> 
  
     <div class="soundcloud-color fa fa-soundcloud"><span><br>SoundCloud<br>Hex: #ff3a00</span></div>
  
     <div class="lastfm-color fa fa-lastfm"><span><br>Last.fm<br>Hex: #d21309</span></div> 
  
     <div class="stackoverflow-color fa fa-stack-overflow"><span><br>Stack Overflow<br>Hex: #f58233</span></div>      
</div>

social-media-color-hex-codes.markdown

Social Media Color Hex Codes

Published by: Ibrahim Jabbari - http://ibrahimjabbari.com

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.css

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,300,400italic);
.SocialMediaColors {
  text-align:center;
  color:white;
  font-size:24px;
}
.SocialMediaColors span {
  font-size:18px;
  font-weight:300;
  font-family: 'lato', Tahoma;
}
.facebook-color {
  width:100%;  
  background-color:#3b5998;
  padding:0.5em 0;
  line-height:1.2em;  
}
.twitter-color {
  width:100%;  
  background-color:#00aced;
  padding:0.5em 0;
  line-height:1.2em;  
}
.GooglePlus-color {
  width:100%;  
  background-color:#dd4b39;
  padding:0.5em 0;
  line-height:1.2em;  
}
.pinterest-color {
  width:100%;  
  background-color:#cb2027;
  padding:0.5em 0;
  line-height:1.2em;  
}
.linkedin-color {
  width:100%;  
  background-color:#007bb6;
  padding:0.5em 0;
  line-height:1.2em;  
}
.youtube-color {
  width:100%;  
  background-color:#bb0000;
  padding:0.5em 0;
  line-height:1.2em;  
}
.vimeo-color {
  width:100%;  
  background-color:#aad450;
  padding:0.5em 0;
  line-height:1.2em;  
}
.tumblr-color {
  width:100%;  
  background-color:#32506d;
  padding:0.5em 0;
  line-height:1.2em;  
}
.instagram-color {
  width:100%;  
  background-color:#517fa4;
  padding:0.5em 0;
  line-height:1.2em;  
}
.flickr-color {
  width:100%;  
  background-color:#ff0084;
  padding:0.5em 0;
  line-height:1.2em;  
}
.dribbble-color {
  width:100%;  
  background-color:#ea4c89;
  padding:0.5em 0;
  line-height:1.2em;  
}
.quora-color {
  width:100%;  
  background-color:#a82400;
  padding:0.5em 0;
  line-height:1.2em;  
}
.foursquare-color {
  width:100%;  
  background-color:#0072b1;
  padding:0.5em 0;
  line-height:1.2em;  
}
.vk-color {
  width:100%;  
  background-color:#45668e;
  padding:0.5em 0;
  line-height:1.2em;  
}
.wordpress-color {
  width:100%;  
  background-color:#21759b;
  padding:0.5em 0;
  line-height:1.2em;  
}
.stumbleupon-color {
  width:100%;  
  background-color:#EB4823;
  padding:0.5em 0;
  line-height:1.2em;  
}
.yahoo-color {
  width:100%;  
  background-color:#7B0099;
  padding:0.5em 0;
  line-height:1.2em;  
}
.blogger-color {
  width:100%;  
  background-color:#fb8f3d;
  padding:0.5em 0;
  line-height:1.2em;  
}
.soundcloud-color {
  width:100%;  
  background-color:#ff3a00;
  padding:0.5em 0;
  line-height:1.2em;  
}
.lastfm-color {
  width:100%;  
  background-color:#d21309;
  padding:0.5em 0;
  line-height:1.2em;  
}
.stackoverflow-color {
  width:100%;  
  background-color:#f58233;
  padding:0.5em 0;
  line-height:1.2em;  
}