• Home
  • MindSphere CSS
  • Basics
  • Color

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
    #FFFFFF
    rgb(255,255,255)

    .has-color-white

    .has-bgColor-white

    .has-borderColor-white

  • gray100
    #F0F0F0
    rgb(240,240,240)

    .has-color-gray100

    .has-bgColor-gray100

    .has-borderColor-gray100

  • gray200
    #D2D2D2
    rgb(210,210,210)

    .has-color-gray200

    .has-bgColor-gray200

    .has-borderColor-gray200

  • gray250
    #BEBEBE
    rgb(190,190,190)

    .has-color-gray250

    .has-bgColor-gray250

    .has-borderColor-gray250

  • gray400
    #969696
    rgb(150,150,150)

    .has-color-gray400

    .has-bgColor-gray400

    .has-borderColor-gray400

  • gray650
    #595959
    rgb(89,89,89)

    .has-color-gray650

    .has-bgColor-gray650

    .has-borderColor-gray650

  • gray800
    #323232
    rgb(50,50,50)

    .has-color-gray800

    .has-bgColor-gray800

    .has-borderColor-gray800

  • black
    #000000
    rgb(0,0,0)

    .has-color-black

    .has-bgColor-black

    .has-borderColor-black

Functional

  • functionalRed
    #F62447
    rgb(246,36,71)

    .has-color-functionalRed

    .has-bgColor-functionalRed

    .has-borderColor-functionalRed

  • validationRed
    #D0021B
    rgb(208,2,27)

    .has-color-validationRed

    .has-bgColor-validationRed

    .has-borderColor-validationRed

  • functionalYellow
    #FFC800
    rgb(255,200,0)

    .has-color-functionalYellow

    .has-bgColor-functionalYellow

    .has-borderColor-functionalYellow

  • functionalGreen
    #65C728
    rgb(101,199,40)

    .has-color-functionalGreen

    .has-bgColor-functionalGreen

    .has-borderColor-functionalGreen

State colors

  • coolBlue
    #009EFF
    rgb(0,158,255)

    .has-color-coolBlue

    .has-bgColor-coolBlue

    .has-borderColor-coolBlue

  • stateBlue020
    #CCE2FA
    rgb(204,226,250)

    .has-color-stateBlue020

    .has-bgColor-stateBlue020

    .has-borderColor-stateBlue020

  • stateBlue050
    #7FB7F2
    rgb(127,183,242)

    .has-color-stateBlue050

    .has-bgColor-stateBlue050

    .has-borderColor-stateBlue050

  • stateBlue100
    #006FE6
    rgb(0,111,230)

    .has-color-stateBlue100

    .has-bgColor-stateBlue100

    .has-borderColor-stateBlue100

  • stateBlue250
    #005CBF
    rgb(0,92,191)

    .has-color-stateBlue250

    .has-bgColor-stateBlue250

    .has-borderColor-stateBlue250

Context related colors

  • contextBlue050
    #D1E8F0
    rgb(209,232,240)

    .has-color-contextBlue050

    .has-bgColor-contextBlue050

    .has-borderColor-contextBlue050

  • contextBlue150
    #BBD0D7
    rgb(187,208,215)

    .has-color-contextBlue150

    .has-bgColor-contextBlue150

    .has-borderColor-contextBlue150

  • contextBlue600
    #235461
    rgb(35,84,97)

    .has-color-contextBlue600

    .has-bgColor-contextBlue600

    .has-borderColor-contextBlue600

  • contextGreen050
    #E6EED1
    rgb(230,238,209)

    .has-color-contextGreen050

    .has-bgColor-contextGreen050

    .has-borderColor-contextGreen050

  • contextGreen200
    #C8D1BA
    rgb(200,209,186)

    .has-color-contextGreen200

    .has-bgColor-contextGreen200

    .has-borderColor-contextGreen200

  • contextGreen600
    #5E6919
    rgb(94,105,25)

    .has-color-contextGreen600

    .has-bgColor-contextGreen600

    .has-borderColor-contextGreen600

  • contextRed
    #FCD3D2
    rgb(252,211,210)

    .has-color-contextRed

    .has-bgColor-contextRed

    .has-borderColor-contextRed

  • contextRed200
    #D6B4B4
    rgb(214,180,180)

    .has-color-contextRed200

    .has-bgColor-contextRed200

    .has-borderColor-contextRed200

  • contextRed500
    #811211
    rgb(129,18,17)

    .has-color-contextRed500

    .has-bgColor-contextRed500

    .has-borderColor-contextRed500

  • contextYellow
    #FFEDB5
    rgb(255,237,181)

    .has-color-contextYellow

    .has-bgColor-contextYellow

    .has-borderColor-contextYellow

  • contextYellow100
    #D6DBB7
    rgb(214,219,183)

    .has-color-contextYellow100

    .has-bgColor-contextYellow100

    .has-borderColor-contextYellow100

  • contextYellow600
    #665E48
    rgb(102,94,72)

    .has-color-contextYellow600

    .has-bgColor-contextYellow600

    .has-borderColor-contextYellow600

OS Bar / Launchpad colors

  • firefly
    #1E2832
    rgb(30,40,50)

    .has-color-firefly

    .has-bgColor-firefly

    .has-borderColor-firefly

  • aquaHaze
    #DCE1E6
    rgb(220,225,230)

    .has-color-aquaHaze

    .has-bgColor-aquaHaze

    .has-borderColor-aquaHaze

  • accentTealLight
    #41AAAA
    rgb(65,170,170)

    .has-color-accentTealLight

    .has-bgColor-accentTealLight

    .has-borderColor-accentTealLight

Siemens Corporate colors

Primary colors

  • stoneDark
    #3C464B
    rgb(60,70,75)

    .has-color-stoneDark

    .has-bgColor-stoneDark

    .has-borderColor-stoneDark

  • stoneLight
    #879BAA
    rgb(135,155,170)

    .has-color-stoneLight

    .has-bgColor-stoneLight

    .has-borderColor-stoneLight

  • stoneLight35
    #BECDD7
    rgb(190,205,215)

    .has-color-stoneLight35

    .has-bgColor-stoneLight35

    .has-borderColor-stoneLight35

  • sandDark
    #73645A
    rgb(115,100,90)

    .has-color-sandDark

    .has-bgColor-sandDark

    .has-borderColor-sandDark

  • sandLight
    #AAAA96
    rgb(170,170,150)

    .has-color-sandLight

    .has-bgColor-sandLight

    .has-borderColor-sandLight

  • sandLight35
    #D7D7CD
    rgb(215,215,205)

    .has-color-sandLight35

    .has-bgColor-sandLight35

    .has-borderColor-sandLight35

  • snow
    #FFFFFF
    rgb(255,255,255)

    .has-color-snow

    .has-bgColor-snow

    .has-borderColor-snow

Accent colors

  • accentTealDark
    #00646E
    rgb(0,100,110)

    .has-color-accentTealDark

    .has-bgColor-accentTealDark

    .has-borderColor-accentTealDark

  • accentTealLight
    #41AAAA
    rgb(65,170,170)

    .has-color-accentTealLight

    .has-bgColor-accentTealLight

    .has-borderColor-accentTealLight

  • accentBlueDark
    #005F87
    rgb(0,95,135)

    .has-color-accentBlueDark

    .has-bgColor-accentBlueDark

    .has-borderColor-accentBlueDark

  • accentBlueLight
    #50BED7
    rgb(80,190,215)

    .has-color-accentBlueLight

    .has-bgColor-accentBlueLight

    .has-borderColor-accentBlueLight

  • accentYellowDark
    #EB780A
    rgb(235,120,10)

    .has-color-accentYellowDark

    .has-bgColor-accentYellowDark

    .has-borderColor-accentYellowDark

  • accentYellowLight
    #FFB900
    rgb(255,185,0)

    .has-color-accentYellowLight

    .has-bgColor-accentYellowLight

    .has-borderColor-accentYellowLight

  • accentRedDark
    #641946
    rgb(100,25,70)

    .has-color-accentRedDark

    .has-bgColor-accentRedDark

    .has-borderColor-accentRedDark

  • accentRedLight
    #AF235F
    rgb(175,35,95)

    .has-color-accentRedLight

    .has-bgColor-accentRedLight

    .has-borderColor-accentRedLight

  • accentGreenDark
    #647D2D
    rgb(100,125,45)

    .has-color-accentGreenDark

    .has-bgColor-accentGreenDark

    .has-borderColor-accentGreenDark

  • accentGreenLight
    #AAB414
    rgb(170,180,20)

    .has-color-accentGreenLight

    .has-bgColor-accentGreenLight

    .has-borderColor-accentGreenLight

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