Colors

Color helpers allow you to modify the colors of HTML elements via CSS class.

Background colors

The following helpers, starting with .ms-bg-***, allow you to modify the background of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-bg-main">.ms-bg-main</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-light">.ms-bg-light</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-primary">.ms-bg-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-secondary">.ms-bg-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-action">.ms-bg-action</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-action2">.ms-bg-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-white">.ms-bg-white</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-black ms-text-white">.ms-bg-black</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-yellow">.ms-bg-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-green">.ms-bg-green</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-red">.ms-bg-red</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-purple">.ms-bg-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-orange">.ms-bg-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-brown">.ms-bg-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-navy ms-text-white">.ms-bg-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-bluesky">.ms-bg-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-main">.ms-bg-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-light">.ms-bg-light</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-primary">.ms-bg-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-secondary">.ms-bg-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-action">.ms-bg-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-action2">.ms-bg-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-white">.ms-bg-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-black ms-text-white">.ms-bg-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-yellow">.ms-bg-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-green">.ms-bg-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-red">.ms-bg-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-purple">.ms-bg-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-orange">.ms-bg-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-brown">.ms-bg-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-navy ms-text-white">.ms-bg-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-bluesky">.ms-bg-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-pink">.ms-bg-pink</div>
</div>

Result

.ms-bg-main

.ms-bg-light

.ms-bg-primary

.ms-bg-secondary

.ms-bg-action

.ms-bg-action2

.ms-bg-white

.ms-bg-black

.ms-bg-yellow

.ms-bg-green

.ms-bg-red

.ms-bg-purple

.ms-bg-orange

.ms-bg-brown

.ms-bg-navy

.ms-bg-bluesky

.ms-bg-pink

Text colors

The following helpers, starting with .ms-text-***, allow you to modify the text color of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-text-main">.ms-text-main</div> <div class="ms-alert ms-border ms-fullwidth ms-text-light">.ms-text-light</div> <div class="ms-alert ms-border ms-fullwidth ms-text-primary">.ms-text-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-text-secondary">.ms-text-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-text-action">.ms-text-action</div> <div class="ms-alert ms-border ms-fullwidth ms-text-action2">.ms-text-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-text-white ms-bg-black">.ms-text-white</div> <div class="ms-alert ms-border ms-fullwidth ms-text-black ms-text-white">.ms-text-black</div> <div class="ms-alert ms-border ms-fullwidth ms-text-yellow">.ms-text-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-text-green">.ms-text-green</div> <div class="ms-alert ms-border ms-fullwidth ms-text-red">.ms-text-red</div> <div class="ms-alert ms-border ms-fullwidth ms-text-purple">.ms-text-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-text-orange">.ms-text-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-text-brown">.ms-text-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-text-navy ms-text-white">.ms-text-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-text-bluesky">.ms-text-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-text-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-main">.ms-text-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-light">.ms-text-light</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-primary">.ms-text-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-secondary">.ms-text-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-action">.ms-text-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-action2">.ms-text-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-white ms-bg-black">.ms-text-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-black ms-text-white">.ms-text-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-yellow">.ms-text-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-green">.ms-text-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-red">.ms-text-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-purple">.ms-text-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-orange">.ms-text-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-brown">.ms-text-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-navy ms-text-white">.ms-text-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-bluesky">.ms-text-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-pink">.ms-bg-pink</div>
</div>

Result

.ms-text-main

.ms-text-light

.ms-text-primary

.ms-text-secondary

.ms-text-action

.ms-text-action2

.ms-text-white

.ms-text-black

.ms-text-yellow

.ms-text-green

.ms-text-red

.ms-text-purple

.ms-text-orange

.ms-text-brown

.ms-text-navy

.ms-text-bluesky

.ms-bg-pink

Border colors

The following helpers, starting with .ms-border-***, allow you to modify the border color of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-border-main">.ms-border-main</div> <div class="ms-alert ms-border ms-fullwidth ms-border-primary">.ms-border-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-border-secondary">.ms-border-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-border-action">.ms-border-action</div> <div class="ms-alert ms-border ms-fullwidth ms-border-action2">.ms-border-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-border-white">.ms-border-white</div> <div class="ms-alert ms-border ms-fullwidth ms-border-black">.ms-border-black</div> <div class="ms-alert ms-border ms-fullwidth ms-border-yellow">.ms-border-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-border-green">.ms-border-green</div> <div class="ms-alert ms-border ms-fullwidth ms-border-red">.ms-border-red</div> <div class="ms-alert ms-border ms-fullwidth ms-border-purple">.ms-border-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-border-orange">.ms-border-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-border-brown">.ms-border-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-border-navy">.ms-border-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-border-bluesky">.ms-border-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-border-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-main">.ms-border-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-primary">.ms-border-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-secondary">.ms-border-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-action">.ms-border-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-action2">.ms-border-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-white">.ms-border-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-black">.ms-border-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-yellow">.ms-border-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-green">.ms-border-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-red">.ms-border-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-purple">.ms-border-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-orange">.ms-border-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-brown">.ms-border-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-navy">.ms-border-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-bluesky">.ms-border-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-pink">.ms-bg-pink</div>
</div>

Result

.ms-border-main

.ms-border-primary

.ms-border-secondary

.ms-border-action

.ms-border-action2

.ms-border-white

.ms-border-black

.ms-border-yellow

.ms-border-green

.ms-border-red

.ms-border-purple

.ms-border-orange

.ms-border-brown

.ms-border-navy

.ms-border-bluesky

.ms-bg-pink

Invert color

It is possible to reverse the colors with the .ms-invert-color class.

Live Editor

<div class="ms-alert ms-fullwidth ms-primary ms-invert-color">.ms-invert-color</div>

<div class="ms-alert ms-fullwidth ms-primary ms-invert-color">.ms-invert-color</div>

Result

.ms-invert-color