loading...

My CSS Brand Colors Collection

felipperegazio profile image Felippe Regazio ・1 min read

When creating webpages you will need brand colors at some point. You will need to show social icons, share buttons, profiles, posts, social widgets, etc. So i made this simple CSS Snippet to avoid keep seeking brand colors hex on the internet:

If you dont know how to use CSS vars, you can know more about here:
https://developer.mozilla.org/en-US/docs/Web/CSS/var

:root {
    --color-amazon: #ff9700;
    --color-apple: #737373;
    --color-basecamp: #6bbd6d;
    --color-box: #1277bc;
    --color-dribbble: #ed4584;
    --color-dropbox: #0d84de;
    --color-ebay: #083790;
    --color-facebook: #365397;
    --color-flickr: #ea0066;
    --color-foursquare: #207dc5;
    --color-github: #2f2f2f;
    --color-google: #4285f4;
    --color-googleplus: #e0452c;
    --color-instagram: #fb3958;
    --color-linkedin: #006db3;
    --color-pinterest: #ce1a19;
    --color-skype: #00acf4;
    --color-tumblr: #304c68;
    --color-twitter: #00a9f1;
    --color-vimeo: #48b6ed;
    --color-yelp: #c30f00;
    --color-youtube: #ff3333;
    --color-vk: #4c75a3;
    --color-weibo: #df2029;
    --color-whatsapp: #25D366;
    --color-telegram: #0088cc;
    --color-reddit: #ff5700;
    --color-line: #00c300;
}

You can use it like that:

.fb-btn {
  /** ... **/
  background-color: var(--color-facebook);
}

🙃

Posted on by:

felipperegazio profile

Felippe Regazio

@felipperegazio

web developer - js, [s]css, node, php, python - intp, lifelong learner, father, skateboarder. a strange carbon-based lifeform.

Discussion

pic
Editor guide