Posted on Feb 23, 2020

My CSS Brand Colors Collection

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); }

🙃

Top comments (1)

tombohub • Jan 3 '23

great, I have generated palette for Tailwindcss based on facebook color, using palettolithic.com/:

 gray: { 50: "#f2f2f3", 100: "#e4e5e7", 200: "#cacbce", 300: "#afb1b6", 400: "#95989d", 500: "#7a7e85", 600: "#62656a", 700: "#494b50", 800: "#313235", 900: "#18191b" }, blue: { 50: "#ecf0f8", 100: "#d9e1f2", 200: "#b4c2e4", 300: "#8ea4d7", 400: "#6986c9", 500: "#4367bc", 600: "#365396", 700: "#283e71", 800: "#1b294b", 900: "#0d1526" }, indigo: { 50: "#efecf8", 100: "#ded9f2", 200: "#bdb4e4", 300: "#9c8ed7", 400: "#7c69c9", 500: "#5b43bc", 600: "#493696", 700: "#362871", 800: "#241b4b", 900: "#120d26" }, violet: { 50: "#f5ecf8", 100: "#ead9f2", 200: "#d6b4e4", 300: "#c18ed7", 400: "#ac69c9", 500: "#9843bc", 600: "#793696", 700: "#5b2871", 800: "#3d1b4b", 900: "#1e0d26" }, purple: { 50: "#f8ecf6", 100: "#f2d9ed", 200: "#e4b4db", 300: "#d78ec9", 400: "#c969b6", 500: "#bc43a4", 600: "#963683", 700: "#712863", 800: "#4b1b42", 900: "#260d21" }, pink: { 50: "#f8ecf0", 100: "#f2d9e1", 200: "#e4b4c2", 300: "#d78ea4", 400: "#c96986", 500: "#bc4367", 600: "#963653", 700: "#71283e", 800: "#4b1b29", 900: "#260d15" }, red: { 50: "#f8efec", 100: "#f2ded9", 200: "#e4bdb4", 300: "#d79c8e", 400: "#c97c69", 500: "#bc5b43", 600: "#964936", 700: "#713628", 800: "#4b241b", 900: "#26120d" }, orange: { 50: "#f8f5ec", 100: "#f2ead9", 200: "#e4d6b4", 300: "#d7c18e", 400: "#c9ac69", 500: "#bc9843", 600: "#967936", 700: "#715b28", 800: "#4b3d1b", 900: "#261e0d" }, yellow: { 50: "#f6f8ec", 100: "#edf2d9", 200: "#dbe4b4", 300: "#c9d78e", 400: "#b6c969", 500: "#a4bc43", 600: "#839636", 700: "#637128", 800: "#424b1b", 900: "#21260d" }, lime: { 50: "#f0f8ec", 100: "#e1f2d9", 200: "#c2e4b4", 300: "#a4d78e", 400: "#86c969", 500: "#67bc43", 600: "#539636", 700: "#3e7128", 800: "#294b1b", 900: "#15260d" }, green: { 50: "#ecf8ef", 100: "#d9f2de", 200: "#b4e4bd", 300: "#8ed79c", 400: "#69c97c", 500: "#43bc5b", 600: "#369649", 700: "#287136", 800: "#1b4b24", 900: "#0d2612" }, teal: { 50: "#ecf8f5", 100: "#d9f2ea", 200: "#b4e4d6", 300: "#8ed7c1", 400: "#69c9ac", 500: "#43bc98", 600: "#369679", 700: "#28715b", 800: "#1b4b3d", 900: "#0d261e" }, cyan: { 50: "#ecf6f8", 100: "#d9edf2", 200: "#b4dbe4", 300: "#8ec9d7", 400: "#69b6c9", 500: "#43a4bc", 600: "#368396", 700: "#286371", 800: "#1b424b", 900: "#0d2126" }