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.
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
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.
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?
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.
MDB4 is a kit for the outdated Bootstrap v4.
We created a separate kit - MDB5, that works with Bootstrap v5 and will be continuously updated
to all Bootstrap versions that will rely on pure JS instead of jQuery.
MDB4 will no longer be Updated. Technical Support for MDB4 expires 12 months after the
latest license renewal.
We recommend upgrading to MDB5. What will you get with an upgrade?
No ads on documentation
Premium Technical Support - both for v5 and v4 Bootstrap versions
Fast documentation for MDB4 and MDB5, from anywhere in the world
5000+ components, templates and design blocks for Bootstrap 5
Access restricted
To view this section you must have an active PRO account
Log in to your account or
purchase an MDB5 PRO subscription if you don't have one.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)