Angular Bootstrap Color Combination

Angular Color Combination - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

98

Technology

Itaque soluta sed atum culpa dolor

165

Architecture

Quidem veniam qui aut dignissimos

74

Yellow darken-1

#fdd835

Indigo accent-4

#304ffe

MDB

Choose topics that interest you

Gaming

Music

Illustration

Photography

Architecture

Technology


Primary color

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


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 (.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

98

Technology

Itaque soluta sed atum culpa dolorum

165

Architecture

Quidem veniam qui aut dignissimos

74


Theme 3

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

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.

Dark theme

Pink darken-1

#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.


Light theme

Red lighten-5

#ffebee

Brown darken-4

#3e2723

red lighten-4

#ffcdd2

Skateboard

$43

Red Cap

$15

Fruit Porridge

$3

Orange Cocktail

$10