Color

General CSS helper classes which can be used for colorizing HTML elements.

Background color

.has-bgColor-white
.has-bgColor-gray100
.has-bgColor-gray200
.has-bgColor-gray250
.has-bgColor-gray400
.has-bgColor-gray800
.has-bgColor-functionalRed
.has-bgColor-validationRed
.has-bgColor-functionalYellow
.has-bgColor-functionalGreen
.has-bgColor-coolBlue
.has-bgColor-stateBlue
.has-bgColor-stateBlue050
.has-bgColor-stateBlue100
.has-bgColor-stateBlue250
.has-bgColor-contextBlue050
.has-bgColor-contextBlue150
.has-bgColor-contextBlue600
.has-bgColor-contextGreen050
.has-bgColor-contextGreen200
.has-bgColor-contextGreen600
.has-bgColor-contextRed
.has-bgColor-contextRed200
.has-bgColor-contextRed500
.has-bgColor-contextYellow
.has-bgColor-contextYellow100
.has-bgColor-contextYellow600
.has-bgColor-firefly
.has-bgColor-aquaHaze
.has-bgColor-petrolDynamic
.has-bgColor-stoneDark
.has-bgColor-stoneLight
.has-bgColor-stoneLight35
.has-bgColor-sandDark
.has-bgColor-sandLight
.has-bgColor-sandLight35
.has-bgColor-accentTealDark
.has-bgColor-accentTealLight
.has-bgColor-accentBlueDark
.has-bgColor-accentBlueLight
.has-bgColor-accentYellowDark
.has-bgColor-accentYellowLight
.has-bgColor-accentRedDark
.has-bgColor-accentRedLight
.has-bgColor-accentGreenDark
.has-bgColor-accentGreenLight
<div class="has-bgColor-white">.has-bgColor-white</div>
<div class="has-bgColor-gray100">.has-bgColor-gray100</div>
<div class="has-bgColor-gray200">.has-bgColor-gray200</div>
<div class="has-bgColor-gray250">.has-bgColor-gray250</div>
<div class="has-bgColor-gray400">.has-bgColor-gray400</div>
<div class="has-bgColor-gray800">.has-bgColor-gray800</div>
<div class="has-bgColor-functionalRed">.has-bgColor-functionalRed</div>
<div class="has-bgColor-validationRed">.has-bgColor-validationRed</div>
<div class="has-bgColor-functionalYellow">.has-bgColor-functionalYellow</div>
<div class="has-bgColor-functionalGreen">.has-bgColor-functionalGreen</div>
<div class="has-bgColor-coolBlue">.has-bgColor-coolBlue</div>
<div class="has-bgColor-stateBlue">.has-bgColor-stateBlue</div>
<div class="has-bgColor-stateBlue050">.has-bgColor-stateBlue050</div>
<div class="has-bgColor-stateBlue100">.has-bgColor-stateBlue100</div>
<div class="has-bgColor-stateBlue250">.has-bgColor-stateBlue250</div>
<div class="has-bgColor-contextBlue050">.has-bgColor-contextBlue050</div>
<div class="has-bgColor-contextBlue150">.has-bgColor-contextBlue150</div>
<div class="has-bgColor-contextBlue600">.has-bgColor-contextBlue600</div>
<div class="has-bgColor-contextGreen050">.has-bgColor-contextGreen050</div>
<div class="has-bgColor-contextGreen200">.has-bgColor-contextGreen200</div>
<div class="has-bgColor-contextGreen600">.has-bgColor-contextGreen600</div>
<div class="has-bgColor-contextRed">.has-bgColor-contextRed</div>
<div class="has-bgColor-contextRed200">.has-bgColor-contextRed200</div>
<div class="has-bgColor-contextRed500">.has-bgColor-contextRed500</div>
<div class="has-bgColor-contextYellow">.has-bgColor-contextYellow</div>
<div class="has-bgColor-contextYellow100">.has-bgColor-contextYellow100</div>
<div class="has-bgColor-contextYellow600">.has-bgColor-contextYellow600</div>
<div class="has-bgColor-firefly">.has-bgColor-firefly</div>
<div class="has-bgColor-aquaHaze">.has-bgColor-aquaHaze</div>
<div class="has-bgColor-petrolDynamic">.has-bgColor-petrolDynamic</div>
<div class="has-bgColor-stoneDark">.has-bgColor-stoneDark</div>
<div class="has-bgColor-stoneLight">.has-bgColor-stoneLight</div>
<div class="has-bgColor-stoneLight35">.has-bgColor-stoneLight35</div>
<div class="has-bgColor-sandDark">.has-bgColor-sandDark</div>
<div class="has-bgColor-sandLight">.has-bgColor-sandLight</div>
<div class="has-bgColor-sandLight35">.has-bgColor-sandLight35</div>
<div class="has-bgColor-accentTealDark">.has-bgColor-accentTealDark</div>
<div class="has-bgColor-accentTealLight">.has-bgColor-accentTealLight</div>
<div class="has-bgColor-accentBlueDark">.has-bgColor-accentBlueDark</div>
<div class="has-bgColor-accentBlueLight">.has-bgColor-accentBlueLight</div>
<div class="has-bgColor-accentYellowDark">.has-bgColor-accentYellowDark</div>
<div class="has-bgColor-accentYellowLight">.has-bgColor-accentYellowLight</div>
<div class="has-bgColor-accentRedDark">.has-bgColor-accentRedDark</div>
<div class="has-bgColor-accentRedLight">.has-bgColor-accentRedLight</div>
<div class="has-bgColor-accentGreenDark">.has-bgColor-accentGreenDark</div>
<div class="has-bgColor-accentGreenLight">.has-bgColor-accentGreenLight</div>

Border color

.has-borderColor-white
.has-borderColor-gray100
.has-borderColor-gray200
.has-borderColor-gray250
.has-borderColor-gray400
.has-borderColor-gray800
.has-borderColor-functionalRed
.has-borderColor-validationRed
.has-borderColor-functionalYellow
.has-borderColor-functionalGreen
.has-borderColor-coolBlue
.has-borderColor-stateBlue
.has-borderColor-stateBlue050
.has-borderColor-stateBlue100
.has-borderColor-stateBlue250
.has-borderColor-contextBlue050
.has-borderColor-contextBlue150
.has-borderColor-contextBlue600
.has-borderColor-contextGreen050
.has-borderColor-contextGreen200
.has-borderColor-contextGreen600
.has-borderColor-contextRed
.has-borderColor-contextRed200
.has-borderColor-contextRed500
.has-borderColor-contextYellow
.has-borderColor-contextYellow100
.has-borderColor-contextYellow600
.has-borderColor-firefly
.has-borderColor-aquaHaze
.has-borderColor-stoneDark
.has-borderColor-stoneLight
.has-borderColor-stoneLight35
.has-borderColor-sandDark
.has-borderColor-sandLight
.has-borderColor-sandLight35
.has-borderColor-accentTealDark
.has-borderColor-accentTealLight
.has-borderColor-accentBlueDark
.has-borderColor-accentBlueLight
.has-borderColor-accentYellowDark
.has-borderColor-accentYellowLight
.has-borderColor-accentRedDark
.has-borderColor-accentRedLight
.has-borderColor-accentGreenDark
.has-borderColor-accentGreenLight
<div class="has-borderColor-white">.has-borderColor-white</div>
<div class="has-borderColor-gray100">.has-borderColor-gray100</div>
<div class="has-borderColor-gray200">.has-borderColor-gray200</div>
<div class="has-borderColor-gray250">.has-borderColor-gray250</div>
<div class="has-borderColor-gray400">.has-borderColor-gray400</div>
<div class="has-borderColor-gray800">.has-borderColor-gray800</div>
<div class="has-borderColor-functionalRed">.has-borderColor-functionalRed</div>
<div class="has-borderColor-validationRed">.has-borderColor-validationRed</div>
<div class="has-borderColor-functionalYellow">.has-borderColor-functionalYellow</div>
<div class="has-borderColor-functionalGreen">.has-borderColor-functionalGreen</div>
<div class="has-borderColor-coolBlue">.has-borderColor-coolBlue</div>
<div class="has-borderColor-stateBlue">.has-borderColor-stateBlue</div>
<div class="has-borderColor-stateBlue050">.has-borderColor-stateBlue050</div>
<div class="has-borderColor-stateBlue100">.has-borderColor-stateBlue100</div>
<div class="has-borderColor-stateBlue250">.has-borderColor-stateBlue250</div>
<div class="has-borderColor-contextBlue050">.has-borderColor-contextBlue050</div>
<div class="has-borderColor-contextBlue150">.has-borderColor-contextBlue150</div>
<div class="has-borderColor-contextBlue600">.has-borderColor-contextBlue600</div>
<div class="has-borderColor-contextGreen050">.has-borderColor-contextGreen050</div>
<div class="has-borderColor-contextGreen200">.has-borderColor-contextGreen200</div>
<div class="has-borderColor-contextGreen600">.has-borderColor-contextGreen600</div>
<div class="has-borderColor-contextRed">.has-borderColor-contextRed</div>
<div class="has-borderColor-contextRed200">.has-borderColor-contextRed200</div>
<div class="has-borderColor-contextRed500">.has-borderColor-contextRed500</div>
<div class="has-borderColor-contextYellow">.has-borderColor-contextYellow</div>
<div class="has-borderColor-contextYellow100">.has-borderColor-contextYellow100</div>
<div class="has-borderColor-contextYellow600">.has-borderColor-contextYellow600</div>
<div class="has-borderColor-firefly">.has-borderColor-firefly</div>
<div class="has-borderColor-aquaHaze">.has-borderColor-aquaHaze</div>
<div class="has-borderColor-stoneDark">.has-borderColor-stoneDark</div>
<div class="has-borderColor-stoneLight">.has-borderColor-stoneLight</div>
<div class="has-borderColor-stoneLight35">.has-borderColor-stoneLight35</div>
<div class="has-borderColor-sandDark">.has-borderColor-sandDark</div>
<div class="has-borderColor-sandLight">.has-borderColor-sandLight</div>
<div class="has-borderColor-sandLight35">.has-borderColor-sandLight35</div>
<div class="has-borderColor-accentTealDark">.has-borderColor-accentTealDark</div>
<div class="has-borderColor-accentTealLight">.has-borderColor-accentTealLight</div>
<div class="has-borderColor-accentBlueDark">.has-borderColor-accentBlueDark</div>
<div class="has-borderColor-accentBlueLight">.has-borderColor-accentBlueLight</div>
<div class="has-borderColor-accentYellowDark">.has-borderColor-accentYellowDark</div>
<div class="has-borderColor-accentYellowLight">.has-borderColor-accentYellowLight</div>
<div class="has-borderColor-accentRedDark">.has-borderColor-accentRedDark</div>
<div class="has-borderColor-accentRedLight">.has-borderColor-accentRedLight</div>
<div class="has-borderColor-accentGreenDark">.has-borderColor-accentGreenDark</div>
<div class="has-borderColor-accentGreenLight">.has-borderColor-accentGreenLight</div>

Foreground color

.has-color-white
.has-color-gray100
.has-color-gray200
.has-color-gray250
.has-color-gray400
.has-color-gray800
.has-color-functionalRed
.has-color-validationRed
.has-color-functionalYellow
.has-color-functionalGreen
.has-color-coolBlue
.has-color-stateBlue
.has-color-stateBlue050
.has-color-stateBlue100
.has-color-stateBlue250
.has-color-contextBlue050
.has-color-contextBlue150
.has-color-contextBlue600
.has-color-contextGreen050
.has-color-contextGreen200
.has-color-contextGreen600
.has-color-contextRed
.has-color-contextRed200
.has-color-contextRed500
.has-color-contextYellow
.has-color-contextYellow100
.has-color-contextYellow600
.has-color-firefly
.has-color-aquaHaze
.has-color-stoneDark
.has-color-stoneLight
.has-color-stoneLight35
.has-color-sandDark
.has-color-sandLight
.has-color-sandLight35
.has-color-accentTealDark
.has-color-accentTealLight
.has-color-accentBlueDark
.has-color-accentBlueLight
.has-color-accentYellowDark
.has-color-accentYellowLight
.has-color-accentRedDark
.has-color-accentRedLight
.has-color-accentGreenDark
.has-color-accentGreenLight
<div class="has-color-white">.has-color-white</div>
<div class="has-color-gray100">.has-color-gray100</div>
<div class="has-color-gray200">.has-color-gray200</div>
<div class="has-color-gray250">.has-color-gray250</div>
<div class="has-color-gray400">.has-color-gray400</div>
<div class="has-color-gray800">.has-color-gray800</div>
<div class="has-color-functionalRed">.has-color-functionalRed</div>
<div class="has-color-validationRed">.has-color-validationRed</div>
<div class="has-color-functionalYellow">.has-color-functionalYellow</div>
<div class="has-color-functionalGreen">.has-color-functionalGreen</div>
<div class="has-color-coolBlue">.has-color-coolBlue</div>
<div class="has-color-stateBlue">.has-color-stateBlue</div>
<div class="has-color-stateBlue050">.has-color-stateBlue050</div>
<div class="has-color-stateBlue100">.has-color-stateBlue100</div>
<div class="has-color-stateBlue250">.has-color-stateBlue250</div>
<div class="has-color-contextBlue050">.has-color-contextBlue050</div>
<div class="has-color-contextBlue150">.has-color-contextBlue150</div>
<div class="has-color-contextBlue600">.has-color-contextBlue600</div>
<div class="has-color-contextGreen050">.has-color-contextGreen050</div>
<div class="has-color-contextGreen200">.has-color-contextGreen200</div>
<div class="has-color-contextGreen600">.has-color-contextGreen600</div>
<div class="has-color-contextRed">.has-color-contextRed</div>
<div class="has-color-contextRed200">.has-color-contextRed200</div>
<div class="has-color-contextRed500">.has-color-contextRed500</div>
<div class="has-color-contextYellow">.has-color-contextYellow</div>
<div class="has-color-contextYellow100">.has-color-contextYellow100</div>
<div class="has-color-contextYellow600">.has-color-contextYellow600</div>
<div class="has-color-firefly">.has-color-firefly</div>
<div class="has-color-aquaHaze">.has-color-aquaHaze</div>
<div class="has-color-stoneDark">.has-color-stoneDark</div>
<div class="has-color-stoneLight">.has-color-stoneLight</div>
<div class="has-color-stoneLight35">.has-color-stoneLight35</div>
<div class="has-color-sandDark">.has-color-sandDark</div>
<div class="has-color-sandLight">.has-color-sandLight</div>
<div class="has-color-sandLight35">.has-color-sandLight35</div>
<div class="has-color-accentTealDark">.has-color-accentTealDark</div>
<div class="has-color-accentTealLight">.has-color-accentTealLight</div>
<div class="has-color-accentBlueDark">.has-color-accentBlueDark</div>
<div class="has-color-accentBlueLight">.has-color-accentBlueLight</div>
<div class="has-color-accentYellowDark">.has-color-accentYellowDark</div>
<div class="has-color-accentYellowLight">.has-color-accentYellowLight</div>
<div class="has-color-accentRedDark">.has-color-accentRedDark</div>
<div class="has-color-accentRedLight">.has-color-accentRedLight</div>
<div class="has-color-accentGreenDark">.has-color-accentGreenDark</div>
<div class="has-color-accentGreenLight">.has-color-accentGreenLight</div>

Usage

ElementClassDescription
.has-bgColor
-<color name>
Sets the background color of an element to the chosen color. All available color names can be found in the html examples above.
Example: has-bgColor-coolBlue
.has-bgColor-forced-<color name> Using the keyword -forced adds the chosen background color with !important to the element.
Example: has-bgColor-forced-coolBlue

This helps to override other potential classes which might have a higher specificity as the 'normal' color helper classes. Be careful since the usage of !important can quickly create a mess in your stylesheets.
.has-borderColor-<color name> Sets the border color of an element to the chosen color. All available color names can be found in the html examples above.
Example: has-borderColor-coolBlue
.has-borderColor-forced-<color name> Using the keyword -forced adds the chosen border color with !important to the element.
Example: has-bgColor-forced-coolBlue

This helps to override other potential classes which might have a higher specificity as the 'normal' color helper classes. Be careful since the usage of !important can quickly create a mess in your stylesheets.
.has-color-<color name> Sets the text color of an element to the chosen color. All available color names can be found in the html examples above.
Example: has-color-coolBlue
.has-color-forced-<color name> Using the keyword -forced adds the text color with !important to the element.
Example: has-color-forced-coolBlue

This helps to override other potential classes which might have a higher specificity as the 'normal' color helper classes. Be careful since the usage of !important can quickly create a mess in your stylesheets.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top