Color combination

Bootstrap color combination

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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.

Examples MDB Pro component

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

Technology

Itaque soluta sed atum culpa dolor

165

Architecture

Quidem veniam qui aut dignissimos

Yellow darken-1

#fdd835

Indigo accent-4

#304ffe

MDB

Choose topics that interest you

Gaming

Music

Illustration

Photography

Architecture

Technology

Primary color

The primary color is the color that is 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 a 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 element. You can also use variants to distinguish elements within a component, such the 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 (0.03%)

Secondary color

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 (0.03%)

Alternative colors

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

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 that interest you

Gaming

Music

Illustration

Photography

Architecture

Technology

Theme 2

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

Technology

Itaque soluta sed atum culpa dolorum

165

Architecture

Quidem veniam qui aut dignissimos

Theme 3

Pink is used as the primary color for classes.

Pink

#e91e63

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

Meaning

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.