Color combination

Bootstrap color combination

The Material Design color system can be used to create a color theme that reflects your brand or style.

The Material Design color system uses an organized approach to applying color to your UI. In this system, a primary and a secondary color are typically selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.



Primary color MDB Pro component

A primary color is the color displayed most frequently across your app’s screens and components.

If you don’t have a secondary color, your primary color can also be used to accent elements.

Dark and light primary variants

You can make a color theme for your app using your primary color, as well as dark and light primary variants.

Distinguish UI elements

To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.

Deep-purple accent-4

#6200ea

Deep-purple darken-4

#304ffe

Deep-purple accent-1

#b388ff

Alie Corporation

NYSE: AZHC • Oct 16, 1:45PM

887.32

887.02 (.03%)


        <template>
          <mdb-card>
            <mdb-card-header
              class="deep-purple darken-4 white-text text-right p-2"
            >
              <mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
              <mdb-icon fab class="px-2" icon="twitter" size="sm" />
              <mdb-icon fab class="px-2" icon="instagram" size="sm" />
            </mdb-card-header>
            <mdb-navbar dark color="deep-purple accent-4" hamburger expand="xl">
              <mdb-navbar-brand>
                Analytics
              </mdb-navbar-brand>
              <mdb-navbar-toggler> </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-card-body>
              <mdb-card-title>Alie Corporation</mdb-card-title>
              <mdb-card-text>NYSE: AZHC • Oct 16, 1:45PM</mdb-card-text>
              <div class="d-flex justify-content-between mb-2">
                <p class="display-4 align-self-end">887.32</p>
                <p class="align-self-end pb-2">887.02 (.03%)</p>
              </div>
              <mdb-bar-chart :data="data" :options="options" :height="200" />

              <mdb-btn
                tag="a"
                floating
                icon="plus"
                class="deep-purple accent-1 float-right"
                iconClass="black-text"
              />
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbIcon,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBarChart,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbNavbar,
            mdbNavbarToggler,
            mdbNavbarBrand
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbIcon,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBarChart,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbNavbar,
              mdbNavbarToggler,
              mdbNavbarBrand
            },
            data() {
              return {
                data: {
                  labels: [
                    "8 AM",
                    "10 AM",
                    "12 PM",
                    "2 PM",
                    "4 PM",
                    "6 PM",
                    "8 PM"
                  ],
                  datasets: [
                    {
                      fill: false,
                      borderColor: "#673ab7",
                      pointBackgroundColor: "#673ab7",
                      data: [881, 882, 883, 884, 887, 885, 0],
                      backgroundColor: "#311b92"
                    }
                  ]
                },
                options: {
                  responsive: true,
                  legend: {
                    display: false
                  },
                  elements: {
                    line: {
                      tension: 0.0
                    }
                  },
                  scales: {
                    xAxes: [
                      {
                        gridLines: {
                          display: false
                        },
                        ticks: {
                          padding: 15,
                          height: 30
                        }
                      }
                    ],
                    yAxes: [
                      {
                        gridLines: {
                          drawBorder: false
                        },
                        ticks: {
                          maxTicksLimit: 5,
                          padding: 15,
                          min: 880,
                          max: 890
                        }
                      }
                    ]
                  }
                }
              };
            }
          };
        </script>
      

Secondary color MDB Pro component

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Secondary colors are best for:

  • Floating action buttons
  • Selection controls, like sliders and switches
  • Highlighting selected text
  • Progress bars
  • Links and headlines

Dark and light secondary variants

Just like the primary color, your secondary color can have dark and light variants. You can make a color theme by using your primary color, secondary color, and dark and light variants of each color.

Deep-purple accent-4

#6200ea

Deep-purple darken-4

#304ffe

Teal accent-3

#1de9b6

Alie Corporation

NYSE: AZHC • Oct 16, 1:45PM

887.32

887.02 (.03%)


        <template>
          <mdb-card>
            <mdb-card-header
              class="deep-purple darken-4 white-text text-right p-2"
            >
              <mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
              <mdb-icon fab class="px-2" icon="twitter" size="sm" />
              <mdb-icon fab class="px-2" icon="instagram" size="sm" />
            </mdb-card-header>
            <mdb-navbar dark color="deep-purple accent-4" hamburger expand="xl">
              <mdb-navbar-brand>
                Analytics
              </mdb-navbar-brand>
              <mdb-navbar-toggler> </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-card-body>
              <mdb-card-title>Alie Corporation</mdb-card-title>
              <mdb-card-text>NYSE: AZHC • Oct 16, 1:45PM</mdb-card-text>
              <div class="d-flex justify-content-between mb-2">
                <p class="display-4 align-self-end">887.32</p>
                <p class="align-self-end pb-2">887.02 (.03%)</p>
              </div>
              <mdb-bar-chart :data="data" :options="options" :height="200" />

              <mdb-btn
                tag="a"
                floating
                icon="plus"
                class="teal accent-3 float-right"
                iconClass="black-text"
              />
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbIcon,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBarChart,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbNavbar,
            mdbNavbarToggler,
            mdbNavbarBrand
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbIcon,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBarChart,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbNavbar,
              mdbNavbarToggler,
              mdbNavbarBrand
            },
            data() {
              return {
                data: {
                  labels: [
                    "8 AM",
                    "10 AM",
                    "12 PM",
                    "2 PM",
                    "4 PM",
                    "6 PM",
                    "8 PM"
                  ],
                  datasets: [
                    {
                      fill: false,
                      borderColor: "#673ab7",
                      pointBackgroundColor: "#673ab7",
                      data: [881, 882, 883, 884, 887, 885, 0],
                      backgroundColor: "#311b92"
                    }
                  ]
                },
                options: {
                  responsive: true,
                  legend: {
                    display: false
                  },
                  elements: {
                    line: {
                      tension: 0.0
                    }
                  },
                  scales: {
                    xAxes: [
                      {
                        gridLines: {
                          display: false
                        },
                        ticks: {
                          padding: 15,
                          height: 30
                        }
                      }
                    ],
                    yAxes: [
                      {
                        gridLines: {
                          drawBorder: false
                        },
                        ticks: {
                          maxTicksLimit: 5,
                          padding: 15,
                          min: 880,
                          max: 890
                        }
                      }
                    ]
                  }
                }
              };
            }
          };
        </script>
      

Alternative colors MDB Pro component

The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors to your theme). Apps can use alternative colors to establish themes that distinguish different sections.

Alternative colors are best for:

  • Apps with light and dark themes
  • Apps with different themes in different sections
  • Apps that exist as part of a suite of products

Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color themes.

Theme 1 MDB Pro component

Yellow is used as the primary color for areas such as onboarding and choosing areas of interest.

Yellow darken-1

#fdd835

Indigo accent-4

#304ffe

MDB

Choose topics which interest you

Gaming

Music

Illustration

Photography

Architecture

Technology


        <template>
          <mdb-card class="yellow darken-1">
            <mdb-card-body>
              <mdb-card-title
                tag="h2"
                transparent
                style="color: #304ffe"
                class="font-weight-bold p-2"
              >
                <mdb-icon icon="code" class="red-text mr-2" />MDB
              </mdb-card-title>
              <mdb-card-title class="text-center font-weight-bold p-4"
                >Choose topic which interests you</mdb-card-title
              >
              <mdb-container>
                <mdb-row class="mt-4">
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Gaming
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Music
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                </mdb-row>
                <mdb-row class="mt-4">
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Illustration
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Photography
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                </mdb-row>
                <mdb-row class="mt-4">
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Architecture
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                  <mdb-col lg="6">
                    <mdb-card class="flex-row">
                      <mdb-view
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg"
                        imageClass="card-img-64"
                      >
                        <mdb-mask overlay="pink-strong" />
                      </mdb-view>
                      <mdb-card-body class="font-weight-bold">
                        Technology
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                </mdb-row>
              </mdb-container>
              <mdb-btn
                class="indigo accent-4 float-right mt-4"
                icon="gem"
                far
                floating
                tag="a"
              />
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbRow,
            mdbIcon,
            mdbCol,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbView,
            mdbMask,
            mdbInput
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbCol,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbView,
              mdbMask,
              mdbInput
            }
          };
        </script>
      

Theme 2 MDB Pro component

Blue is used as the primary color for areas of the app that relate to the user’s personal account, such as selected classes.

Indigo accent-4

#304ffe

Yellow darken-1

#fdd835

MDB

Painting

Lorem ipsum dolor sit consectetur adipisicing elit

123

Design

Similique voluptas neque ab possimus nobis amet saepe

98

Technology

Itaque soluta sed atum culpa dolorum

165

Architecture

Quidem veniam qui aut dignissimos

74


        <template>
          <mdb-card class="indigo accent-4">
            <mdb-card-body>
              <mdb-card-title
                tag="h2"
                transparent
                class="font-weight-bold p-2 white-text"
              >
                <mdb-icon icon="code" class="red-text mr-2" />MDB<mdb-icon
                  icon="user"
                  class="float-right"
                />
              </mdb-card-title>
              <mdb-row class="justify-content-center">
                <mdb-col md="6" class="mt-4">
                  <mdb-card testimonial>
                    <mdb-card-up>
                      <img
                        src="https://mdbootstrap.com/img/Photos/Others/photo2.jpg"
                        class="img-fluid"
                      />
                    </mdb-card-up>
                    <mdb-card-avatar color="white" class="mx-auto"
                      ><img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"
                        class="rounded-circle"
                    /></mdb-card-avatar>
                    <mdb-card-body style="color: #304ffe">
                      <mdb-card-title>PAINTING</mdb-card-title>
                      <p class="black-text font-weight-bold">
                        Lorem ipsum dolor sit consectetur adipisicing elit
                      </p>
                      <mdb-icon fab icon="youtube" /> 123
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
                <mdb-col md="6" class="mt-4">
                  <mdb-card testimonial>
                    <mdb-card-up>
                      <img
                        src="https://mdbootstrap.com/img/Photos/Others/photo9.jpg"
                        class="img-fluid"
                      />
                    </mdb-card-up>
                    <mdb-card-avatar color="white" class="mx-auto"
                      ><img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"
                        class="rounded-circle"
                    /></mdb-card-avatar>
                    <mdb-card-body style="color: #304ffe">
                      <mdb-card-title>DESIGN</mdb-card-title>
                      <p class="black-text font-weight-bold">
                        Similique voluptas neque ab possimus nobis
                      </p>
                      <mdb-icon fab icon="youtube" /> 98
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
              </mdb-row>

              <mdb-row class="justify-content-center">
                <mdb-col md="6" class="mt-4">
                  <mdb-card testimonial>
                    <mdb-card-up>
                      <img
                        src="https://mdbootstrap.com/img/Photos/Others/img (45).jpg"
                        class="img-fluid"
                      />
                    </mdb-card-up>
                    <mdb-card-avatar color="white" class="mx-auto"
                      ><img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
                        class="rounded-circle"
                    /></mdb-card-avatar>
                    <mdb-card-body style="color: #304ffe">
                      <mdb-card-title>TECHNOLOGY</mdb-card-title>
                      <p class="black-text font-weight-bold">
                        Itaque soluta sed atum culpa dolorum
                      </p>
                      <mdb-icon fab icon="youtube" /> 165
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
                <mdb-col md="6" class="mt-4">
                  <mdb-card testimonial>
                    <mdb-card-up>
                      <img
                        src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg"
                        class="img-fluid"
                      />
                    </mdb-card-up>
                    <mdb-card-avatar color="white" class="mx-auto"
                      ><img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg"
                        class="rounded-circle"
                    /></mdb-card-avatar>
                    <mdb-card-body style="color: #304ffe">
                      <mdb-card-title>ARCHITECTURE</mdb-card-title>
                      <p class="black-text font-weight-bold">
                        Quidem veniam qui aut dignissimos
                      </p>
                      <mdb-icon fab icon="youtube" /> 74
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
              </mdb-row>

              <div class="white-text m-5 px-5 d-flex justify-content-between">
                <mdb-icon icon="cogs" size="2x" />
                <mdb-icon icon="heart" style="color: #fdd835" size="2x" />
                <mdb-icon icon="search" size="2x" />
              </div>
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbRow,
            mdbIcon,
            mdbCol,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbCardUp,
            mdbCardAvatar
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbCol,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbCardUp,
              mdbCardAvatar
            }
          };
        </script>
      

        <style></style>
      

Theme 3 MDB Pro component

Pink is used as the primary color for classes.

Pink

#e91e63

Image with a photo of clouds.
Sample avatar image.

Photography

Similique totam inventore numquam ipsa sed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati aut rem beatae quidem a reprehenderit accusamus maxime voluptatem. Quo, adipisci, eius dolorum atque necessitatibus cupiditate aliquam inventore eligendi quaerat odio praesentium.

Click here to rotate

About me


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?


Click here to rotate back

        <template>
          <mdb-flipping-card
            :flipped="flipped"
            style="max-width: 22rem; height: 500px;"
          >
            <mdb-card class="face front" style="height: 500px;" testimonial>
              <mdb-card-up>
                <img
                  src="https://mdbootstrap.com/img/Photos/Others/images/18.jpg"
                  class="img-fluid"
                />
              </mdb-card-up>
              <mdb-avatar circle class="mx-auto white"
                ><img
                  src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg"
                  class="rounded-circle"
              /></mdb-avatar>
              <mdb-card-body>
                <mdb-card-title tag="h6" class="pink-text"
                  >PHOTOGRAPHY</mdb-card-title
                >
                <mdb-card-title class="font-weight-bold"
                  >Similique totam inventore numquam ipsa sed</mdb-card-title
                >
                <mdb-card-text class="">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Obcaecati aut rem beatae quidem a reprehenderit accusamus
                  maxime voluptatem. Quo, adipisci, eius dolorum atque
                  necessitatibus cupiditate aliquam inventore eligendi quaerat
                  odio praesentium
                </mdb-card-text>
                <mdb-btn
                  icon="redo-alt"
                  tag="a"
                  floating
                  color="pink"
                  @click="flipped = true"
                />
              </mdb-card-body>
            </mdb-card>
            <mdb-card class="face back text-center" style="height: 500px;">
              <mdb-card-body>
                <h4 class="font-weight-bold">About me</h4>
                <hr />
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Maxime quae, dolores dicta. Blanditiis rem amet repellat,
                  dolores nihil quae in mollitia asperiores ut rerum
                  repellendus, voluptatum eum, officia laudantium quaerat?
                </p>
                <hr />
                <ul class="list-inline py-2">
                  <li class="list-inline-item">
                    <mdb-btn
                      size="sm"
                      tag="a"
                      floating
                      color="pink"
                      fab
                      icon="facebook-f"
                    />
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn
                      size="sm"
                      tag="a"
                      floating
                      color="pink"
                      fab
                      icon="twitter"
                    />
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn
                      size="sm"
                      tag="a"
                      floating
                      color="pink"
                      fab
                      icon="google-plus-g"
                    />
                  </li>
                  <li class="list-inline-item">
                    <mdb-btn
                      size="sm"
                      tag="a"
                      floating
                      color="pink"
                      fab
                      icon="linkedin-in"
                    />
                  </li>
                </ul>
                <a class="rotate-btn" @click="flipped = false">
                  <mdb-icon class="pr-2" icon="undo" />Click here to rotate back
                </a>
              </mdb-card-body>
            </mdb-card>
          </mdb-flipping-card>
        </template>
      

        <script>
          import {
            mdbIcon,
            mdbFlippingCard,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbCardUp,
            mdbAvatar
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbIcon,
              mdbFlippingCard,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbCardUp,
              mdbAvatar
            },
            data() {
              return {
                flipped: false
              };
            }
          };
        </script>
      

Meaning MDB Pro component

Color can communicate the meaning of different UI elements. For example, a weather app may display colors indicating current weather conditions, and a navigation app may display color showing traffic conditions, with roads colored red or green

Color should be used consistently in a product, so that certain colors always mean the same thing, even if the context changes. Attention should also be given to colors with local or cultural significance. For example, alerts may typically be colored red in some cultures, but not in others.

Dark theme

Pink darken-4

#880e4f

Pink accent-4

#c51162

Red darken-1

#e53935

Sign up

At least 8 characters and 1 digit

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.


        <template>
          <mdb-card class="pink darken-4 mdb-pink-darken-form">
            <mdb-card-body>
              <mdb-card-title
                class="white-text text-center p-2 font-weight-bold"
                >SIGN UP</mdb-card-title
              >
              <mdb-input
                icon="user"
                far
                iconClass="white-text pink darken-4"
                label="First name"
                labelClass="white-text pink darken-4"
              />
              <mdb-input
                icon="hand-point-right"
                far
                iconClass="white-text pink darken-4"
                label="Last name"
                labelClass="white-text pink darken-4"
              />
              <mdb-input
                type="email"
                icon="envelope"
                far
                iconClass="white-text pink darken-4"
                label="Email"
                labelClass="white-text pink darken-4"
              />
              <mdb-input
                type="password"
                icon="star"
                far
                iconClass="white-text pink darken-4"
                label="Password"
                labelClass="white-text pink darken-4"
                small="At least 8 characters and 1 digit"
              />
            </mdb-card-body>
            <div class="white rounded-top p-4 text-center">
              <mdb-btn outline="red" block rounded>Sign in</mdb-btn>
              <p class="small mt-3 mb-1">or sign up with:</p>
              <ul class="list-inline">
                <li class="list-inline-item">
                  <mdb-btn
                    class="p-0 mx-1"
                    size="lg"
                    flat
                    transparent
                    style="color: #c51162"
                    fab
                    icon="facebook-f"
                  />
                </li>
                <li class="list-inline-item">
                  <mdb-btn
                    class="p-0 mx-1"
                    size="lg"
                    flat
                    transparent
                    style="color: #c51162"
                    fab
                    icon="twitter"
                  />
                </li>
                <li class="list-inline-item">
                  <mdb-btn
                    class="p-0 mx-1"
                    size="lg"
                    flat
                    transparent
                    style="color: #c51162"
                    fab
                    icon="google-plus-g"
                  />
                </li>
                <li class="list-inline-item">
                  <mdb-btn
                    class="p-0 mx-1"
                    size="lg"
                    flat
                    transparent
                    style="color: #c51162"
                    fab
                    icon="linkedin-in"
                  />
                </li>
              </ul>
              <hr />

              <p class="small">
                By clicking <i>Sign up</i> you agree to our
                <a href="#" style="color: #c51162">terms of service</a>
              </p>
            </div>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbCard,
            mdbCardBody,
            mdbBtn,
            mdbCardTitle,
            mdbCardText,
            mdbInput
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbCard,
              mdbCardBody,
              mdbBtn,
              mdbCardTitle,
              mdbCardText,
              mdbInput
            }
          };
        </script>
      

        <style>
          .mdb-pink-darken-form input {
            color: white !important;
          }

          .mdb-pink-darken-form input:focus {
            border-color: white !important;
            box-shadow: 0 1px 0 0 white !important;
          }

          .mdb-pink-darken-form small {
            color: white !important;
          }
        </style>
      

Light theme MDB Pro component

Red lighten-5

#ffebee

Brown darken-4

#3e2723

red lighten-4

#ffcdd2

Skateboard

$43

Red Cap

$15

Fruit Porridge

$3

Orange Cocktail

$10


        <template>
          <mdb-card style="color: #3e2723">
            <mdb-card-header class="red lighten-4 text-right p-2">
              <mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
              <mdb-icon fab class="px-2" icon="twitter" size="sm" />
              <mdb-icon fab class="px-2" icon="instagram" size="sm" />
            </mdb-card-header>
            <mdb-navbar color="red lighten-5">
              <mdb-navbar-brand>
                <h6 class="h6 mb-0">
                  <mdb-icon icon="gem" far class="mr-1" /> SHOP
                </h6>
              </mdb-navbar-brand>
              <mdb-navbar-nav right>
                <mdb-nav-item>
                  <mdb-icon icon="search" />
                </mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <mdb-card-body>
              <mdb-container class="text-center">
                <mdb-row>
                  <mdb-col>
                    <mdb-view
                      src="https://mdbootstrap.com/img/Photos/Others/img (31).jpg"
                      rounded
                      class="z-depth-1"
                    >
                      <mdb-mask overlay="white-slight" />
                    </mdb-view>
                    <h6 class="font-weight-bold mt-4">Skateboard</h6>
                    <p>$64</p>
                  </mdb-col>
                  <mdb-col>
                    <mdb-view
                      src="https://mdbootstrap.com/img/Photos/Others/img (30).jpg"
                      rounded
                      class="z-depth-1"
                    >
                      <mdb-mask overlay="white-slight" />
                    </mdb-view>
                    <h6 class="font-weight-bold mt-4">Red Cap</h6>
                    <p>$15</p>
                  </mdb-col>
                </mdb-row>
                <mdb-row>
                  <mdb-col>
                    <mdb-view
                      src="https://mdbootstrap.com/img/Photos/Others/food3.jpg"
                      rounded
                      class="z-depth-1"
                    >
                      <mdb-mask overlay="white-slight" />
                    </mdb-view>
                    <h6 class="font-weight-bold mt-4">Fruit Porridge</h6>
                    <p>$3</p>
                  </mdb-col>
                  <mdb-col>
                    <mdb-view
                      src="https://mdbootstrap.com/img/Photos/Others/img (29).jpg"
                      rounded
                      class="z-depth-1"
                    >
                      <mdb-mask overlay="white-slight" />
                    </mdb-view>
                    <h6 class="font-weight-bold mt-4">Orange Cocktail</h6>
                    <p>$10</p>
                  </mdb-col>
                </mdb-row>
              </mdb-container>
              <div class="d-flex justify-content-between align-items-end">
                <div>
                  <mdb-btn
                    icon="share-alt"
                    transparent
                    flat
                    class="p-0"
                    iconClass="fa-lg"
                  />
                  <mdb-btn
                    icon="question-circle"
                    far
                    transparent
                    flat
                    class="p-0"
                    iconClass="fa-lg"
                  />
                </div>
                <mdb-btn
                  tag="a"
                  floating
                  icon="shopping-basket"
                  class="red lighten-4"
                  iconClass="brown-darken-text"
                />
              </div>
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbRow,
            mdbIcon,
            mdbCol,
            mdbCard,
            mdbCardBody,
            mdbCardHeader,
            mdbBtn,
            mdbNavbar,
            mdbNavbarToggler,
            mdbNavbarBrand,
            mdbNavbarNav,
            mdbNavItem,
            mdbView,
            mdbMask
          } from "mdbvue";

          export default {
            name: "ColorCombination",
            components: {
              mdbContainer,
              mdbRow,
              mdbIcon,
              mdbCol,
              mdbCard,
              mdbCardBody,
              mdbCardHeader,
              mdbBtn,
              mdbNavbar,
              mdbNavbarToggler,
              mdbNavbarBrand,
              mdbNavbarNav,
              mdbNavItem,
              mdbView,
              mdbMask
            }
          };
        </script>
      

        <style>
          .brown-darken-text {
            color: #3e2723 !important;
          }
        </style>