In Metro 4 you can easily convey information through color. Presence of predefined colors and classes for working with them makes the process of color transfer very simple.

Accent colors

For some elements (such as buttons, inputs, panes, ...) of Metro 4, special accentuating color classes are also defined.

Color Button Input

Predefined colors

Metro 4 contains many predefined colors. These colors can be used through special color classes. Example: to define background color - .bg-* and to define text color .fg-*.

This is a test color

                    <div class="bg-red fg-white">
                        This is a test color

Color tables

In tables below presents colors defined in Metro 4.

Simple colors

Color Normal

Additional colors

Color Light Normal Dark

Additional colors

In metro-colors.css are defined additional classes to set colors for: border, outline, active, hover, focus, opacity, before and after.

Target Class
background bg-*
text color fg-*
border bd-*
outline ol-*
active bg-active-*, fg-active-*, bd-active-*, ol-active-*
hover bg-hover-*, fg-hover-*, bd-hover-*, ol-hover-*
focus bg-focus-*, fg-focus-*, bd-focus-*, ol-focus-*
ribbed ribbed-*
opacity op-*
before before-bg-*, before-fg-*
after after-bg-*, after-fg-*

                    <button class="button ribbed-red fg-white border bd-amber">...</button>
                    <button class="button bg-cyan bg-lightGreen-hover bg-darkRed-active fg-white">...</button>


You can use classes .inherit-colors, .inherit-background, .inherit-color to inherit colors form parent.