Colors

The colors package introduces unexpected and vibrant colors, based on Google's Material Design Guideline, inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture & many more.


Requirements

Less

From src/less/themes/$THEME_NAME/app.less:

// Color Mixins
@import "colors/less/mixins/mixins";

// Colors
@import "colors/less/ui/ui";

Which will load the following into our main application style bundle:

Or, instead of loading the entire colors/less/ui package, you can just pick your requirements one by one:

// Colors
@import "colors/less/ui/_helpers"; // required
@import "colors/less/ui/_background";
@import "colors/less/ui/_text";
@import "colors/less/ui/_buttons";
@import "colors/less/ui/_progress-bars";
@import "colors/less/ui/_calendar";
@import "colors/less/ui/_alerts";
@import "colors/less/ui/_ribbons";

Alternative

If working with Less is not your favorite thing, you can alternatively load the pre-built static assets we have included:

<!-- In the head of the HTML document -->
<link rel="stylesheet" href="css/app/colors-background.css" />
<link rel="stylesheet" href="css/app/colors-text.css" />
<link rel="stylesheet" href="css/app/colors-buttons.css" />
<link rel="stylesheet" href="css/app/colors-progress-bars.css" />
<link rel="stylesheet" href="css/app/colors-calendar.css" />
<link rel="stylesheet" href="css/app/colors-alerts.css" />
<link rel="stylesheet" href="css/app/colors-ribbons.css" />

The color palettes

19 color palettes designed to work harmoniously with each other. Each color palette starts with primary colors and fills in the spectrum to create a complete and usable palette. Google suggests using the *-500 colors as the primary colors in your app and the other colors as accents colors.


Red color palette

Red color palette

Use any of the following Less variables to apply a red color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Pink color palette

Pink color palette

Use any of the following Less variables to apply a pink color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Purple color palette

Purple color palette

Use any of the following Less variables to apply a purple color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Deep Purple color palette

Deep Purple color palette

Use any of the following Less variables to apply a deep purple color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Indigo color palette

Indigo color palette

Use any of the following Less variables to apply an indigo color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Blue color palette

Blue color palette

Use any of the following Less variables to apply a blue color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Light Blue color palette

Light Blue color palette

Use any of the following Less variables to apply a light blue color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Cyan color palette

Cyan color palette

Use any of the following Less variables to apply a cyan color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Teal color palette

Teal color palette

Use any of the following Less variables to apply a teal color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Green color palette

Green color palette

Use any of the following Less variables to apply a green color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Light Green color palette

Light Green color palette

Use any of the following Less variables to apply a light green color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Lime color palette

Lime color palette

Use any of the following Less variables to apply a lime color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Yellow color palette

Yellow color palette

Use any of the following Less variables to apply a yellow color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Amber color palette

Amber color palette

Use any of the following Less variables to apply an amber color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Orange color palette

Orange color palette

Use any of the following Less variables to apply an orange color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Deep Orange color palette

Deep Orange color palette

Use any of the following Less variables to apply a deep orange color to any CSS property.

Primary colors:

Accent colors:

CSS components:


Brown color palette

Brown color palette

Use any of the following Less variables to apply a brown color to any CSS property.

Primary colors:

CSS components:


Grey color palette

Grey color palette

Use any of the following Less variables to apply a grey color to any CSS property.

Primary colors:

CSS components:


Blue Grey color palette

Blue Grey color palette

Use any of the following Less variables to apply a blue grey color to any CSS property.

Primary colors:

CSS components:


Background color

Red background colors

Use any of the following CSS classes on any element to apply a red background color.

Primary colors:

Accent colors:

Example:

<div class="bg-red-500">
    <!-- Red background block -->
</div>

Less variables:


Pink background colors

Use any of the following CSS classes on any element to apply a pink background color.

Primary colors:

Accent colors:

Example:

<div class="bg-pink-500">
    <!-- Pink background block -->
</div>

Less variables:


Purple background colors

Use any of the following CSS classes on any element to apply a purple background color.

Primary colors:

Accent colors:

Example:

<div class="bg-purple-500">
    <!-- Purple background block -->
</div>

Less variables:


Deep Purple background colors

Use any of the following CSS classes on any element to apply a deep purple background color.

Primary colors:

Accent colors:

Example:

<div class="bg-deep-purple-500">
    <!-- Deep Purple background block -->
</div>

Less variables:


Indigo background colors

Use any of the following CSS classes on any element to apply an indigo background color.

Primary colors:

Accent colors:

Example:

<div class="bg-indigo-500">
    <!-- Indigo background block -->
</div>

Less variables:


Blue background colors

Use any of the following CSS classes on any element to apply a blue background color.

Primary colors:

Accent colors:

Example:

<div class="bg-blue-500">
    <!-- Blue background block -->
</div>

Less variables:


Light Blue background colors

Use any of the following CSS classes on any element to apply a light blue background color.

Primary colors:

Accent colors:

Example:

<div class="bg-light-blue-500">
    <!-- Light Blue background block -->
</div>

Less variables:


Cyan background colors

Use any of the following CSS classes on any element to apply a cyan background color.

Primary colors:

Accent colors:

Example:

<div class="bg-cyan-500">
    <!-- Cyan background block -->
</div>

Less variables:


Teal background colors

Use any of the following CSS classes on any element to apply a teal background color.

Primary colors:

Accent colors:

Example:

<div class="bg-teal-500">
    <!-- Teal background block -->
</div>

Less variables:


Green background colors

Use any of the following CSS classes on any element to apply a green background color.

Primary colors:

Accent colors:

Example:

<div class="bg-green-500">
    <!-- Green background block -->
</div>

Less variables:


Light Green background colors

Use any of the following CSS classes on any element to apply a light green background color.

Primary colors:

Accent colors:

Example:

<div class="bg-light-green-500">
    <!-- Light Green background block -->
</div>

Less variables:


Lime background colors

Use any of the following CSS classes on any element to apply a lime background color.

Primary colors:

Accent colors:

Example:

<div class="bg-lime-500">
    <!-- Lime background block -->
</div>

Less variables:


Yellow background colors

Use any of the following CSS classes on any element to apply a yellow background color.

Primary colors:

Accent colors:

Example:

<div class="bg-yellow-500">
    <!-- Yellow background block -->
</div>

Less variables:


Amber background colors

Use any of the following CSS classes on any element to apply an amber background color.

Primary colors:

Accent colors:

Example:

<div class="bg-amber-500">
    <!-- Amber background block -->
</div>

Less variables:


Orange background colors

Use any of the following CSS classes on any element to apply an orange background color.

Primary colors:

Accent colors:

Example:

<div class="bg-orange-500">
    <!-- Orange background block -->
</div>

Less variables:


Deep Orange background colors

Use any of the following CSS classes on any element to apply a deep orange background color.

Primary colors:

Accent colors:

Example:

<div class="bg-deep-orange-500">
    <!-- Deep Orange background block -->
</div>

Less variables:


Brown background colors

Use any of the following CSS classes on any element to apply a brown background color.

Primary colors:

Example:

<div class="bg-brown-500">
    <!-- Brown background block -->
</div>

Less variables:


Grey background colors

Use any of the following CSS classes on any element to apply a grey background color.

Primary colors:

Example:

<div class="bg-grey-500">
    <!-- Grey background block -->
</div>

Less variables:


Blue Grey background colors

Use any of the following CSS classes on any element to apply a blue grey background color.

Primary colors:

Example:

<div class="bg-blue-grey-500">
    <!-- Blue Grey background block -->
</div>

Less variables:


Text color

Red text colors

Use any of the following CSS classes on any element to apply a red text color.

Primary colors:

Accent colors:

Example:

<p class="text-red-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Pink text colors

Use any of the following CSS classes on any element to apply a pink text color.

Primary colors:

Accent colors:

Example:

<p class="text-pink-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Purple text colors

Use any of the following CSS classes on any element to apply a purple text color.

Primary colors:

Accent colors:

Example:

<p class="text-purple-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Deep Purple text colors

Use any of the following CSS classes on any element to apply a deep purple text color.

Primary colors:

Accent colors:

Example:

<p class="text-deep-purple-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Indigo text colors

Use any of the following CSS classes on any element to apply an indigo text color.

Primary colors:

Accent colors:

Example:

<p class="text-indigo-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Blue text colors

Use any of the following CSS classes on any element to apply a blue text color.

Primary colors:

Accent colors:

Example:

<p class="text-blue-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Light Blue text colors

Use any of the following CSS classes on any element to apply a light blue text color.

Primary colors:

Accent colors:

Example:

<p class="text-light-blue-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Cyan text colors

Use any of the following CSS classes on any element to apply a cyan text color.

Primary colors:

Accent colors:

Example:

<p class="text-cyan-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Teal text colors

Use any of the following CSS classes on any element to apply a teal text color.

Primary colors:

Accent colors:

Example:

<p class="text-teal-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Green text colors

Use any of the following CSS classes on any element to apply a green text color.

Primary colors:

Accent colors:

Example:

<p class="text-green-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Light Green text colors

Use any of the following CSS classes on any element to apply a light green text color.

Primary colors:

Accent colors:

Example:

<p class="text-light-green-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Lime text colors

Use any of the following CSS classes on any element to apply a lime text color.

Primary colors:

Accent colors:

Example:

<p class="text-lime-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Yellow text colors

Use any of the following CSS classes on any element to apply a yellow text color.

Primary colors:

Accent colors:

Example:

<p class="text-yellow-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Amber text colors

Use any of the following CSS classes on any element to apply an amber text color.

Primary colors:

Accent colors:

Example:

<p class="text-amber-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Orange text colors

Use any of the following CSS classes on any element to apply an orange text color.

Primary colors:

Accent colors:

Example:

<p class="text-orange-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Deep Orange text colors

Use any of the following CSS classes on any element to apply a deep orange text color.

Primary colors:

Accent colors:

Example:

<p class="text-deep-orange-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Brown text colors

Use any of the following CSS classes on any element to apply a brown text color.

Primary colors:

Example:

<p class="text-brown-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Grey text colors

Use any of the following CSS classes on any element to apply a grey text color.

Primary colors:

Example:

<p class="text-grey-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Blue Grey text colors

Use any of the following CSS classes on any element to apply a blue grey text color.

Primary colors:

Example:

<p class="text-blue-grey-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ante porta, finibus neque id, commodo justo.</p>

Less variables:


Buttons

Red buttons

Use any of the following CSS classes on any standard Bootstrap button to get a red button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-red-500">Red</button>

<!-- Stroked, white background, red text and border and filled background on hover -->
<button class="btn btn-red-500 btn-stroke">Red</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-red-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Red
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Pink buttons

Use any of the following CSS classes on any standard Bootstrap button to get a pink button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-pink-500">Pink</button>

<!-- Stroked, white background, pink text and border and filled background on hover -->
<button class="btn btn-pink-500 btn-stroke">Pink</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-pink-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Pink
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Purple buttons

Use any of the following CSS classes on any standard Bootstrap button to get a purple button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-purple-500">Purple</button>

<!-- Stroked, white background, purple text and border and filled background on hover -->
<button class="btn btn-purple-500 btn-stroke">Purple</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-purple-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Purple
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Deep Purple buttons

Use any of the following CSS classes on any standard Bootstrap button to get a deep purple button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-deep-purple-500">Deep Purple</button>

<!-- Stroked, white background, deep purple text and border and filled background on hover -->
<button class="btn btn-deep-purple-500 btn-stroke">Deep Purple</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-deep-purple-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Deep Purple
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Indigo buttons

Use any of the following CSS classes on any standard Bootstrap button to get an indigo button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-indigo-500">Indigo</button>

<!-- Stroked, white background, indigo text and border and filled background on hover -->
<button class="btn btn-indigo-500 btn-stroke">Indigo</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-indigo-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Indigo
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Blue buttons

Use any of the following CSS classes on any standard Bootstrap button to get a blue button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-blue-500">Blue</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-blue-500 btn-stroke">Blue</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-blue-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Blue
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Light Blue buttons

Use any of the following CSS classes on any standard Bootstrap button to get a light blue button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-light-blue-500">Light Blue</button>

<!-- Stroked, white background, light blue text and border and filled background on hover -->
<button class="btn btn-light-blue-500 btn-stroke">Light Blue</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-light-blue-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Light Blue
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Cyan buttons

Use any of the following CSS classes on any standard Bootstrap button to get a cyan button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-cyan-500">Cyan</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-cyan-500 btn-stroke">Cyan</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-cyan-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Cyan
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Teal buttons

Use any of the following CSS classes on any standard Bootstrap button to get a teal button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-teal-500">Teal</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-teal-500 btn-stroke">Teal</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-teal-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Teal
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Green buttons

Use any of the following CSS classes on any standard Bootstrap button to get a green button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-green-500">Green</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-green-500 btn-stroke">Green</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-green-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Green
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Light Green buttons

Use any of the following CSS classes on any standard Bootstrap button to get a light green button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-light-green-500">Light Green</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-light-green-500 btn-stroke">Light Green</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-light-green-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Light Green
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Lime buttons

Use any of the following CSS classes on any standard Bootstrap button to get a lime button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-lime-500">Lime</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-lime-500 btn-stroke">Lime</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-lime-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Lime
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Yellow buttons

Use any of the following CSS classes on any standard Bootstrap button to get a yellow button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-yellow-500">Yellow</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-yellow-500 btn-stroke">Yellow</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-yellow-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Yellow
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Amber buttons

Use any of the following CSS classes on any standard Bootstrap button to get an amber button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-amber-500">Amber</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-amber-500 btn-stroke">Amber</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-amber-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Amber
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Orange buttons

Use any of the following CSS classes on any standard Bootstrap button to get an orange button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-orange-500">Orange</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-orange-500 btn-stroke">Orange</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-orange-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Orange
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Deep Orange buttons

Use any of the following CSS classes on any standard Bootstrap button to get a deep orange button variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-deep-orange-500">Deep Orange</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-deep-orange-500 btn-stroke">Deep Orange</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-deep-orange-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Deep Orange
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Brown buttons

Use any of the following CSS classes on any standard Bootstrap button to get a brown button variation.

Primary colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-brown-500">Brown</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-brown-500 btn-stroke">Brown</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-brown-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Brown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Grey buttons

Use any of the following CSS classes on any standard Bootstrap button to get a grey button variation.

Primary colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-grey-500">Grey</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-grey-500 btn-stroke">Grey</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-grey-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Grey
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Blue Grey buttons

Use any of the following CSS classes on any standard Bootstrap button to get a blue grey button variation.

Primary colors:

Examples:

<!-- Filled background color -->
<button class="btn btn-blue-grey-500">Blue Grey</button>

<!-- Stroked, white background, blue text and border and filled background on hover -->
<button class="btn btn-blue-grey-500 btn-stroke">Blue Grey</button>

<!-- Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-blue-grey-500 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Dropdown Blue Grey
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Less variables:


Progress bars

Red progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-red-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Pink progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-pink-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Purple progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-purple-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Deep Purple progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-deep-purple-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Indigo progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-indigo-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Blue progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-blue-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Light Blue progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-light-blue-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Cyan progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-cyan-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Teal progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-teal-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Green progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-green-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Light Green progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-light-green-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Lime progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-lime-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Yellow progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-yellow-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Amber progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-amber-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Orange progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-orange-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Deep Orange progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Accent colors:

Example:

<div class="progress-bar progress-bar-deep-orange-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Brown progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Example:

<div class="progress-bar progress-bar-brown-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Grey progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Example:

<div class="progress-bar progress-bar-grey-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Blue Grey progress bars

Use any of the following CSS classes on a standard Bootstrap progress bar.

Primary colors:

Example:

<div class="progress-bar progress-bar-blue-grey-500" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
</div>

Less variables:


Alerts

Red alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a red alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-red-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-red-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Pink alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a pink alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-pink-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-pink-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Purple alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a purple alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-purple-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-purple-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Deep Purple alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a deep purple alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-deep-purple-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-deep-purple-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Indigo alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a indigo alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-indigo-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-indigo-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Blue alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a blue alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-blue-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-blue-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Light Blue alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a light blue alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-light-blue-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-light-blue-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Cyan alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a cyan alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-cyan-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-cyan-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Teal alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a teal alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-teal-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-teal-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Green alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a green alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-green-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-green-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Light Green alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a light green alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-light-green-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-light-green-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Lime alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a lime alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-lime-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-lime-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Yellow alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a yellow alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-yellow-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-yellow-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Amber alerts

Use any of the following CSS classes on any standard Bootstrap alert to get an amber alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-amber-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-amber-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Orange alerts

Use any of the following CSS classes on any standard Bootstrap alert to get an orange alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-orange-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-orange-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Deep Orange alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a deep orange alert variation.

Primary colors:

Accent colors:

Examples:

<!-- Filled -->
<div class="alert alert-deep-orange-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-deep-orange-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Brown alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a brown alert variation.

Primary colors:

Examples:

<!-- Filled -->
<div class="alert alert-brown-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-brown-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Grey alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a grey alert variation.

Primary colors:

Examples:

<!-- Filled -->
<div class="alert alert-grey-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-grey-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables:


Blue Grey alerts

Use any of the following CSS classes on any standard Bootstrap alert to get a blue grey alert variation.

Primary colors:

Examples:

<!-- Filled -->
<div class="alert alert-blue-grey-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Stroked with colored text and lighter background color -->
<div class="alert alert-stroke alert-blue-grey-500" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

Less variables: