Felippe RegazioWhen 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);
}
đ
