Color
General overview of all available colors and the existing CSS helper classes.
To see a detailed explanation of all existing helper classes, please refer to the usage table below.
Color integration examples
<span class="has-color-stateBlue100">Foreground color</span>
<span class="has-bgColor-stateBlue100">Background color</span>
<span class="has-borderColor-stateBlue100">Border color</span>
MindSphere Design System colors
Basic colors
- white#FFFFFFrgb(255,255,255)
.has-color-white
.has-bgColor-white
.has-borderColor-white
- gray100#F0F0F0rgb(240,240,240)
.has-color-gray100
.has-bgColor-gray100
.has-borderColor-gray100
- gray200#D2D2D2rgb(210,210,210)
.has-color-gray200
.has-bgColor-gray200
.has-borderColor-gray200
- gray250#BEBEBErgb(190,190,190)
.has-color-gray250
.has-bgColor-gray250
.has-borderColor-gray250
- gray400#969696rgb(150,150,150)
.has-color-gray400
.has-bgColor-gray400
.has-borderColor-gray400
- gray650#595959rgb(89,89,89)
.has-color-gray650
.has-bgColor-gray650
.has-borderColor-gray650
- gray800#323232rgb(50,50,50)
.has-color-gray800
.has-bgColor-gray800
.has-borderColor-gray800
- black#000000rgb(0,0,0)
.has-color-black
.has-bgColor-black
.has-borderColor-black
Functional
- functionalRed#F62447rgb(246,36,71)
.has-color-functionalRed
.has-bgColor-functionalRed
.has-borderColor-functionalRed
- validationRed#D0021Brgb(208,2,27)
.has-color-validationRed
.has-bgColor-validationRed
.has-borderColor-validationRed
- functionalYellow#FFC800rgb(255,200,0)
.has-color-functionalYellow
.has-bgColor-functionalYellow
.has-borderColor-functionalYellow
- functionalGreen#65C728rgb(101,199,40)
.has-color-functionalGreen
.has-bgColor-functionalGreen
.has-borderColor-functionalGreen
State colors
- coolBlue#009EFFrgb(0,158,255)
.has-color-coolBlue
.has-bgColor-coolBlue
.has-borderColor-coolBlue
- stateBlue020#CCE2FArgb(204,226,250)
.has-color-stateBlue020
.has-bgColor-stateBlue020
.has-borderColor-stateBlue020
- stateBlue050#7FB7F2rgb(127,183,242)
.has-color-stateBlue050
.has-bgColor-stateBlue050
.has-borderColor-stateBlue050
- stateBlue100#006FE6rgb(0,111,230)
.has-color-stateBlue100
.has-bgColor-stateBlue100
.has-borderColor-stateBlue100
- stateBlue250#005CBFrgb(0,92,191)
.has-color-stateBlue250
.has-bgColor-stateBlue250
.has-borderColor-stateBlue250
Context related colors
- contextBlue050#D1E8F0rgb(209,232,240)
.has-color-contextBlue050
.has-bgColor-contextBlue050
.has-borderColor-contextBlue050
- contextBlue150#BBD0D7rgb(187,208,215)
.has-color-contextBlue150
.has-bgColor-contextBlue150
.has-borderColor-contextBlue150
- contextBlue600#235461rgb(35,84,97)
.has-color-contextBlue600
.has-bgColor-contextBlue600
.has-borderColor-contextBlue600
- contextGreen050#E6EED1rgb(230,238,209)
.has-color-contextGreen050
.has-bgColor-contextGreen050
.has-borderColor-contextGreen050
- contextGreen200#C8D1BArgb(200,209,186)
.has-color-contextGreen200
.has-bgColor-contextGreen200
.has-borderColor-contextGreen200
- contextGreen600#5E6919rgb(94,105,25)
.has-color-contextGreen600
.has-bgColor-contextGreen600
.has-borderColor-contextGreen600
- contextRed#FCD3D2rgb(252,211,210)
.has-color-contextRed
.has-bgColor-contextRed
.has-borderColor-contextRed
- contextRed200#D6B4B4rgb(214,180,180)
.has-color-contextRed200
.has-bgColor-contextRed200
.has-borderColor-contextRed200
- contextRed500#811211rgb(129,18,17)
.has-color-contextRed500
.has-bgColor-contextRed500
.has-borderColor-contextRed500
- contextYellow#FFEDB5rgb(255,237,181)
.has-color-contextYellow
.has-bgColor-contextYellow
.has-borderColor-contextYellow
- contextYellow100#D6DBB7rgb(214,219,183)
.has-color-contextYellow100
.has-bgColor-contextYellow100
.has-borderColor-contextYellow100
- contextYellow600#665E48rgb(102,94,72)
.has-color-contextYellow600
.has-bgColor-contextYellow600
.has-borderColor-contextYellow600
OS Bar / Launchpad colors
- firefly#1E2832rgb(30,40,50)
.has-color-firefly
.has-bgColor-firefly
.has-borderColor-firefly
- aquaHaze#DCE1E6rgb(220,225,230)
.has-color-aquaHaze
.has-bgColor-aquaHaze
.has-borderColor-aquaHaze
- accentTealLight#41AAAArgb(65,170,170)
.has-color-accentTealLight
.has-bgColor-accentTealLight
.has-borderColor-accentTealLight
Siemens Corporate colors
Primary colors
- stoneDark#3C464Brgb(60,70,75)
.has-color-stoneDark
.has-bgColor-stoneDark
.has-borderColor-stoneDark
- stoneLight#879BAArgb(135,155,170)
.has-color-stoneLight
.has-bgColor-stoneLight
.has-borderColor-stoneLight
- stoneLight35#BECDD7rgb(190,205,215)
.has-color-stoneLight35
.has-bgColor-stoneLight35
.has-borderColor-stoneLight35
- sandDark#73645Argb(115,100,90)
.has-color-sandDark
.has-bgColor-sandDark
.has-borderColor-sandDark
- sandLight#AAAA96rgb(170,170,150)
.has-color-sandLight
.has-bgColor-sandLight
.has-borderColor-sandLight
- sandLight35#D7D7CDrgb(215,215,205)
.has-color-sandLight35
.has-bgColor-sandLight35
.has-borderColor-sandLight35
- snow#FFFFFFrgb(255,255,255)
.has-color-snow
.has-bgColor-snow
.has-borderColor-snow
Accent colors
- accentTealDark#00646Ergb(0,100,110)
.has-color-accentTealDark
.has-bgColor-accentTealDark
.has-borderColor-accentTealDark
- accentTealLight#41AAAArgb(65,170,170)
.has-color-accentTealLight
.has-bgColor-accentTealLight
.has-borderColor-accentTealLight
- accentBlueDark#005F87rgb(0,95,135)
.has-color-accentBlueDark
.has-bgColor-accentBlueDark
.has-borderColor-accentBlueDark
- accentBlueLight#50BED7rgb(80,190,215)
.has-color-accentBlueLight
.has-bgColor-accentBlueLight
.has-borderColor-accentBlueLight
- accentYellowDark#EB780Argb(235,120,10)
.has-color-accentYellowDark
.has-bgColor-accentYellowDark
.has-borderColor-accentYellowDark
- accentYellowLight#FFB900rgb(255,185,0)
.has-color-accentYellowLight
.has-bgColor-accentYellowLight
.has-borderColor-accentYellowLight
- accentRedDark#641946rgb(100,25,70)
.has-color-accentRedDark
.has-bgColor-accentRedDark
.has-borderColor-accentRedDark
- accentRedLight#AF235Frgb(175,35,95)
.has-color-accentRedLight
.has-bgColor-accentRedLight
.has-borderColor-accentRedLight
- accentGreenDark#647D2Drgb(100,125,45)
.has-color-accentGreenDark
.has-bgColor-accentGreenDark
.has-borderColor-accentGreenDark
- accentGreenLight#AAB414rgb(170,180,20)
.has-color-accentGreenLight
.has-bgColor-accentGreenLight
.has-borderColor-accentGreenLight
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. |