DEV Community

loading...

My CSS Brand Colors Collection

Felippe Regazio
web developer - js, [s]css, node, php, python - intp, lifelong learner, father, skateboarder. a strange carbon-based lifeform.
・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);
}

🙃

Discussion (0)