# Color

Vibrance Framework contains a collection of color classes from Google's Material Design.

## Usage

To apply a background color, add the ```.material-*-*``` class.
To apply a text color, add the ```.material-text-*-*``` class.

The first asterisk indicates the name of the colour and the second asterisk indicates the variant to be applied.

```html
<!-- Background Blue 600 -->
<div class="material-blue-600"></div>

<!-- Text Blue 600 -->
<div class="material-text-blue-600">Text Blue 600</div>
```

The ```.white``` and ```.text-white``` classes are available to apply a white background and white text color.
The ```.black``` and ```.text-black``` classes are available to apply a black background and black text color.

<div class="docs-demo docs-demo-colors text-center">
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-red-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-red-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-red-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-red-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-red-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-red-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-red text-black">
            <p>500</p>
        </div>
        <div class="column material-red-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-red-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-red-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-red-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-red-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-red-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-red-a400 text-black">
            <p>a400</p>
        </div>
        <div class="column material-red-a700 text-black">
            <p>a700</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-pink-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-pink-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-pink-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-pink-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-pink-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-pink-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-pink text-black">
            <p>500</p>
        </div>
        <div class="column material-pink-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-pink-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-pink-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-pink-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-pink-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-pink-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-pink-a400 text-black">
            <p>a400</p>
        </div>
        <div class="column material-pink-a700 text-black">
            <p>a700</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-purple-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-purple-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-purple-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-purple-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-purple-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-purple-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-purple text-black">
            <p>500</p>
        </div>
        <div class="column material-purple-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-purple-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-purple-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-purple-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-purple-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-purple-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-purple-a400 text-black">
            <p>a400</p>
        </div>
        <div class="column material-purple-a700 text-black">
            <p>a700</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-deep-purple-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-deep-purple-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-deep-purple-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-deep-purple-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-deep-purple-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-deep-purple-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-deep-purple text-black">
            <p>500</p>
        </div>
        <div class="column material-deep-purple-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-deep-purple-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-deep-purple-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-deep-purple-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-deep-purple-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-deep-purple-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-deep-purple-a400 text-black">
            <p>a400</p>
        </div>
        <div class="column material-deep-purple-a700 text-black">
            <p>a700</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-indigo-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-indigo-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-indigo-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-indigo-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-indigo-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-indigo-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-indigo text-black">
            <p>500</p>
        </div>
        <div class="column material-indigo-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-indigo-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-indigo-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-indigo-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-indigo-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-indigo-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-indigo-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-indigo-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-blue-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-blue-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-blue-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-blue-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-blue-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-blue-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-blue text-black">
            <p>500</p>
        </div>
        <div class="column material-blue-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-blue-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-blue-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-blue-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-blue-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-blue-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-blue-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-blue-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-light-blue-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-light-blue-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-light-blue-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-light-blue-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-light-blue-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-light-blue-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-light-blue text-black">
            <p>500</p>
        </div>
        <div class="column material-light-blue-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-light-blue-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-light-blue-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-light-blue-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-light-blue-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-light-blue-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-light-blue-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-light-blue-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-cyan-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-cyan-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-cyan-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-cyan-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-cyan-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-cyan-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-cyan text-black">
            <p>500</p>
        </div>
        <div class="column material-cyan-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-cyan-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-cyan-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-cyan-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-cyan-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-cyan-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-cyan-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-cyan-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-teal-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-teal-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-teal-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-teal-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-teal-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-teal-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-teal text-black">
            <p>500</p>
        </div>
        <div class="column material-teal-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-teal-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-teal-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-teal-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-teal-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-teal-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-teal-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-teal-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-green-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-green-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-green-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-green-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-green-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-green-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-green text-black">
            <p>500</p>
        </div>
        <div class="column material-green-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-green-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-green-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-green-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-green-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-green-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-green-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-green-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-light-green-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-light-green-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-light-green-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-light-green-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-light-green-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-light-green-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-light-green text-black">
            <p>500</p>
        </div>
        <div class="column material-light-green-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-light-green-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-light-green-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-light-green-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-light-green-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-light-green-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-light-green-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-light-green-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-lime-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-lime-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-lime-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-lime-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-lime-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-lime-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-lime text-black">
            <p>500</p>
        </div>
        <div class="column material-lime-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-lime-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-lime-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-lime-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-lime-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-lime-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-lime-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-lime-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-yellow-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-yellow-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-yellow-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-yellow-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-yellow-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-yellow-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-yellow text-black">
            <p>500</p>
        </div>
        <div class="column material-yellow-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-yellow-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-yellow-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-yellow-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-yellow-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-yellow-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-yellow-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-yellow-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-amber-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-amber-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-amber-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-amber-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-amber-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-amber-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-amber text-black">
            <p>500</p>
        </div>
        <div class="column material-amber-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-amber-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-amber-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-amber-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-amber-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-amber-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-amber-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-amber-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-orange-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-orange-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-orange-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-orange-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-orange-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-orange-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-orange text-black">
            <p>500</p>
        </div>
        <div class="column material-orange-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-orange-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-orange-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-orange-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-orange-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-orange-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-orange-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-orange-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-deep-orange-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-deep-orange-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-deep-orange-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-deep-orange-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-deep-orange-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-deep-orange-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-deep-orange text-black">
            <p>500</p>
        </div>
        <div class="column material-deep-orange-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-deep-orange-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-deep-orange-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-deep-orange-900 text-white">
            <p>900</p>
        </div>
        <div class="column material-deep-orange-a100 text-black">
            <p>a100</p>
        </div>
        <div class="column material-deep-orange-a200 text-black">
            <p>a200</p>
        </div>
        <div class="column material-deep-orange-a400 text-black">
            <p>a300</p>
        </div>
        <div class="column material-deep-orange-a700 text-black">
            <p>a400</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-grey-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-grey-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-grey-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-grey-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-grey-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-grey-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-grey text-black">
            <p>500</p>
        </div>
        <div class="column material-grey-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-grey-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-grey-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-grey-900 text-white">
            <p>900</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-blue-grey-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-blue-grey-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-blue-grey-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-blue-grey-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-blue-grey-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-blue-grey-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-blue-grey text-black">
            <p>500</p>
        </div>
        <div class="column material-blue-grey-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-blue-grey-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-blue-grey-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-blue-grey-900 text-white">
            <p>900</p>
        </div>
    </div>
    <div class="grid grid-spacing-off">
        <div class="column xs-12 text-left">
            <h5>.material-brown-*</h5>
        </div>
    </div>
    <div class="grid margin">
        <div class="column material-brown-50 text-black">
            <p>50</p>
        </div>
        <div class="column material-brown-100 text-black">
            <p>100</p>
        </div>
        <div class="column material-brown-200 text-black">
            <p>200</p>
        </div>
        <div class="column material-brown-300 text-black">
            <p>300</p>
        </div>
        <div class="column material-brown-400 text-black">
            <p>400</p>
        </div>
        <div class="column material-brown text-black">
            <p>500</p>
        </div>
        <div class="column material-brown-600 text-white">
            <p>600</p>
        </div>
        <div class="column material-brown-700 text-white">
            <p>700</p>
        </div>
        <div class="column material-brown-800 text-white">
            <p>800</p>
        </div>
        <div class="column material-brown-900 text-white">
            <p>900</p>
        </div>
    </div>
</div>

-----------