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

Element	Class	Description
	`.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.

Color (Patterns)