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-primary">Foreground color</span>
<span class="has-bgColor-primary">Background color</span>
<span class="has-borderColor-primary">Border color</span>
MindSphere Design System colors
Base colors
- base000#000000rgb(0,0,0)
.has-color-base000
.has-bgColor-base000
.has-borderColor-base000
- base200#323232rgb(50,50,50)
.has-color-base200
.has-bgColor-base200
.has-borderColor-base200
- base450#595959rgb(89,89,89)
.has-color-base450
.has-bgColor-base450
.has-borderColor-base450
- base600#969696rgb(150,150,150)
.has-color-base600
.has-bgColor-base600
.has-borderColor-base600
- base750#BEBEBErgb(190,190,190)
.has-color-base750
.has-bgColor-base750
.has-borderColor-base750
- base800#D2D2D2rgb(210,210,210)
.has-color-base800
.has-bgColor-base800
.has-borderColor-base800
- base900#F0F0F0rgb(240,240,240)
.has-color-base900
.has-bgColor-base900
.has-borderColor-base900
- base1000#FFFFFFrgb(255,255,255)
.has-color-base1000
.has-bgColor-base1000
.has-borderColor-base1000
Primary color
- primary-darker#354C80rgb(53,76,128)
.has-color-primary-darker
.has-bgColor-primary-darker
.has-borderColor-primary-darker
- primary-dark#005CBFrgb(0,92,191)
.has-color-primary-dark
.has-bgColor-primary-dark
.has-borderColor-primary-dark
- primary#006FE6rgb(0,111,230)
.has-color-primary
.has-bgColor-primary
.has-borderColor-primary
- primary-light#009EFFrgb(0,158,255)
.has-color-primary-light
.has-bgColor-primary-light
.has-borderColor-primary-light
- primary-lighter#7FB7F2rgb(127,183,242)
.has-color-primary-lighter
.has-bgColor-primary-lighter
.has-borderColor-primary-lighter
- primary-lightest#CCE2FArgb(204,226,250)
.has-color-primary-lightest
.has-bgColor-primary-lightest
.has-borderColor-primary-lightest
Functional colors
- info-dark#235461rgb(35,84,97)
.has-color-info-dark
.has-bgColor-info-dark
.has-borderColor-info-dark
- info#006FE6rgb(0,111,230)
.has-color-info
.has-bgColor-info
.has-borderColor-info
- info-light#BBD0D7rgb(187,208,215)
.has-color-info-light
.has-bgColor-info-light
.has-borderColor-info-light
- info-lighter#D1E8F0rgb(209,232,240)
.has-color-info-lighter
.has-bgColor-info-lighter
.has-borderColor-info-lighter
- warning-dark#665E48rgb(102,94,72)
.has-color-warning-dark
.has-bgColor-warning-dark
.has-borderColor-warning-dark
- warning#FFC800rgb(255,200,0)
.has-color-warning
.has-bgColor-warning
.has-borderColor-warning
- warning-light#E6DBB7rgb(230,219,183)
.has-color-warning-light
.has-bgColor-warning-light
.has-borderColor-warning-light
- warning-lighter#FFEDB5rgb(255,237,181)
.has-color-warning-lighter
.has-bgColor-warning-lighter
.has-borderColor-warning-lighter
- error-dark#811211rgb(129,18,17)
.has-color-error-dark
.has-bgColor-error-dark
.has-borderColor-error-dark
- error#F62447rgb(246,36,71)
.has-color-error
.has-bgColor-error
.has-borderColor-error
- error-light#D6B4B4rgb(214,180,180)
.has-color-error-light
.has-bgColor-error-light
.has-borderColor-error-light
- error-lighter#FCD3D2rgb(252,211,210)
.has-color-error-lighter
.has-bgColor-error-lighter
.has-borderColor-error-lighter
- success-dark#5E6919rgb(94,105,25)
.has-color-success-dark
.has-bgColor-success-dark
.has-borderColor-success-dark
- success#65C728rgb(101,199,40)
.has-color-success
.has-bgColor-success
.has-borderColor-success
- success-light#C8D1BArgb(200,209,186)
.has-color-success-light
.has-bgColor-success-light
.has-borderColor-success-light
- success-lighter#E6EED1rgb(230,238,209)
.has-color-success-lighter
.has-bgColor-success-lighter
.has-borderColor-success-lighter
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
Charting colors
- charting01#FFFFD9rgb(255,255,217)
.has-color-charting01
.has-bgColor-charting01
.has-borderColor-charting01
- charting02#EDF8B1rgb(237,248,177)
.has-color-charting02
.has-bgColor-charting02
.has-borderColor-charting02
- charting03#C7E9B4rgb(199,233,180)
.has-color-charting03
.has-bgColor-charting03
.has-borderColor-charting03
- charting04#7FCDBBrgb(127,205,187)
.has-color-charting04
.has-bgColor-charting04
.has-borderColor-charting04
- charting05#41B6C4rgb(65,182,196)
.has-color-charting05
.has-bgColor-charting05
.has-borderColor-charting05
- charting06#1D91C0rgb(29,145,192)
.has-color-charting06
.has-bgColor-charting06
.has-borderColor-charting06
- charting07#225EA8rgb(34,94,168)
.has-color-charting07
.has-bgColor-charting07
.has-borderColor-charting07
- charting08#253494rgb(37,52,148)
.has-color-charting08
.has-bgColor-charting08
.has-borderColor-charting08
- charting09#081D58rgb(8,29,88)
.has-color-charting09
.has-bgColor-charting09
.has-borderColor-charting09
- charting10#F7FCFDrgb(247,252,253)
.has-color-charting10
.has-bgColor-charting10
.has-borderColor-charting10
- charting11#E0ECF4rgb(224,236,244)
.has-color-charting11
.has-bgColor-charting11
.has-borderColor-charting11
- charting12#BFD3E6rgb(191,211,230)
.has-color-charting12
.has-bgColor-charting12
.has-borderColor-charting12
- charting13#9EBCDArgb(158,188,218)
.has-color-charting13
.has-bgColor-charting13
.has-borderColor-charting13
- charting14#8C96C6rgb(140,150,198)
.has-color-charting14
.has-bgColor-charting14
.has-borderColor-charting14
- charting15#8C6BB1rgb(140,107,177)
.has-color-charting15
.has-bgColor-charting15
.has-borderColor-charting15
- charting16#88419Drgb(136,65,157)
.has-color-charting16
.has-bgColor-charting16
.has-borderColor-charting16
- charting17#810F7Crgb(129,15,124)
.has-color-charting17
.has-bgColor-charting17
.has-borderColor-charting17
- charting18#4D004Brgb(77,0,75)
.has-color-charting18
.has-bgColor-charting18
.has-borderColor-charting18
- charting19#E31A1Crgb(227,26,28)
.has-color-charting19
.has-bgColor-charting19
.has-borderColor-charting19
- charting20#FE9929rgb(254,153,41)
.has-color-charting20
.has-bgColor-charting20
.has-borderColor-charting20
- charting21#238443rgb(35,132,67)
.has-color-charting21
.has-bgColor-charting21
.has-borderColor-charting21
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-primary | |
.has-bgColor-forced -<color name> | Using the keyword -forced adds the chosen background color with !important to the element.Example: has-bgColor-forced-primary 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-primary | |
.has-borderColor-forced -<color name> | Using the keyword -forced adds the chosen border color with !important to the element. Example: has-bgColor-forced-primary 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-primary | |
.has-color-forced -<color name> | Using the keyword -forced adds the text color with !important to the element. Example: has-color-forced-primary 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. |