Material Design Color Palette by zavoloklom

Amber primary color

Choose material color from colors page and use class .mdc-text-{color name} for colored text or .mdc-bg-{color name} for colored background.

code
source

                                <!-- Colored text -->
                                <span class="mdc-text-amber">Amber primary color</span>

                                <!-- Colored background -->
                                <div class="mdc-bg-amber" style="height: 32px"></div>

                                <!-- Colored text -->
                                <span class="mdc-text-amber">Amber primary color</span>

                                <!-- Colored background -->
                                <div class="mdc-bg-amber" style="height: 32px"></div>

You can change prefixes by customizing less files

Blue-800 color

Choose material color and value from colors page and use class .mdc-text-{color name}-{color value} for colored text or .mdc-bg-{color name}-{color value} for colored background.

code
source

                                <!-- Colored text -->
                                <span class="mdc-text-blue-800">Blue-800 color</span>

                                <!-- Colored background -->
                                <div class="mdc-bg-blue-800" style="height: 32px"></div>

                                <!-- Colored text -->
                                <span class="mdc-text-blue-800">Blue-800 color</span>

                                <!-- Colored background -->
                                <div class="mdc-bg-blue-800" style="height: 32px"></div>

You can change prefixes by customizing less files

Green-400 color

When you use MD Color Palette classes on links you get one step darker color on hover state.

Example: for class mdc-text-green-400 or mdc-bg-green-400 main color is green-400 and in hover state color is green-500

code
source

                                <!-- Colored link -->
                                <a class="mdc-text-green-400">Green-400 color</a>

                                <!-- Link with colored background -->
                                <a class="mdc-bg-green-400" style="display: block; height: 32px"></a>

                                <!-- Colored link -->
                                <a class="mdc-text-green-400">Green-400 color</a>

                                <!-- Link with colored background -->
                                <a class="mdc-bg-green-400" style="display: block; height: 32px"></a>

You can change prefixes by customizing less files

You can use this classes with Material Design Iconic Font.

code
source

                                <!-- Colored icon -->
                                <i class="zmdi zmdi-settings md-spin zmdi-hc-2x mdc-text-green-400"></i>

                                <!-- Colored icon with colored background -->
                                <i class="zmdi zmdi-flower-alt zmdi-hc-2x mdc-text-yellow mdc-bg-green-400"></i>

                                <!-- Colored icon -->
                                <i class="zmdi zmdi-settings md-spin zmdi-hc-2x mdc-text-green-400"></i>

                                <!-- Colored icon with colored background -->
                                <i class="zmdi zmdi-flower-alt zmdi-hc-2x mdc-text-yellow mdc-bg-green-400"></i>

You can change prefixes by customizing less files

Primary colors

Other colors

Colored links

Material Design Icons