Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Donate GitHub

The most used Brand & SocialMedia Colors for WebDevelopers

Getting Started

Download & Customize

You want to manage & host SocialColors yourself? You can download, customice and use the colors and default stylings manually. Both CSS and CSS Preprocessor (SCSS) formats are included.

Using CSS

  1. Copy the socialcolors.css in your CSS directory.
  2. In the <head> of your html, reference the location to your socialColors.css or socialColors.min.css <link rel="stylesheet" href"path/to/socialcolors.css">
  3. Check out the examples to start using socialColors

Using SCSS

  1. Copy the socialColors.scss or socialColors.css in your SCSS/CSS directory.
  2. Open your project and edit the things you want.
  3. Re-Complie your SCCS if using a static compiler. Otherwise, you should be good to go.
  4. Check out the examples

Using CDN

CSS - <link rel="stylesheet" href="">
Min-CSS - <link rel="stylesheet" href="">

Using NPM

npm install socialcolors - Add to your NPM-Project


Basic use


You can place the socialColors enywhere using the CSS Prefix sc and the Brand name.
<p class="sc sc-instagram sc-color>Test</p>"

You can also use it as an hover color using the CSS Prefix sc-hover
<div class="sc sc-instagram sc-hover"></div>


For a backgroundcolor you using the CSS Prefix sc, the brand name & sc-background <p class="sc sc-instagram sc-background>Test</p>"

You can also use it as an hover backgroundcolor using the CSS Prefix sc-background-hover
<div class="sc sc-instagram sc-background-hover"></div>

All Colors:

View the Colors here:


Copyright (c) 2017-2019 Julian Seidl Licensed under the MIT Licence