• 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>

Colors - Swatch file

All colors presented and used throughout the mdsp-css framework can be downloaded in .ase swatch format.

Most major graphic programs are able to open and use this color library files.

Download mindsphere.ase color library

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

  • stateBlue500
    #354C80
    rgb(53,76,128)

    .has-color-stateBlue500

    .has-bgColor-stateBlue500

    .has-borderColor-stateBlue500

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