My CSS Brand Colors Collection
#css#frontend#design#webdev
Felippe Regazio

Felippe Regazio @felipperegazio

About: software engineer, frontend specialist, curious generalist, platform dx, open sourcerer, father. a strange carbon-based lifeform

Location:
Brazil
Joined:
Feb 27, 2018

My CSS Brand Colors Collection

Publish Date: Feb 23 '20
46 1

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;
}
Enter fullscreen mode Exit fullscreen mode

You can use it like that:

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

🙃

Comments 1 total

  • tombohub
    tombohubJan 3, 2023

    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"
      }
    Enter fullscreen mode Exit fullscreen mode
Add comment