• Home
  • MindSphere CSS
  • Basics
  • Color

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>

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

Base colors

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

    .has-color-base000

    .has-bgColor-base000

    .has-borderColor-base000

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

    .has-color-base200

    .has-bgColor-base200

    .has-borderColor-base200

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

    .has-color-base450

    .has-bgColor-base450

    .has-borderColor-base450

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

    .has-color-base600

    .has-bgColor-base600

    .has-borderColor-base600

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

    .has-color-base750

    .has-bgColor-base750

    .has-borderColor-base750

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

    .has-color-base800

    .has-bgColor-base800

    .has-borderColor-base800

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

    .has-color-base900

    .has-bgColor-base900

    .has-borderColor-base900

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

    .has-color-base1000

    .has-bgColor-base1000

    .has-borderColor-base1000

Primary color

  • primary-darker
    #354C80
    rgb(53,76,128)

    .has-color-primary-darker

    .has-bgColor-primary-darker

    .has-borderColor-primary-darker

  • primary-dark
    #005CBF
    rgb(0,92,191)

    .has-color-primary-dark

    .has-bgColor-primary-dark

    .has-borderColor-primary-dark

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

    .has-color-primary

    .has-bgColor-primary

    .has-borderColor-primary

  • primary-light
    #009EFF
    rgb(0,158,255)

    .has-color-primary-light

    .has-bgColor-primary-light

    .has-borderColor-primary-light

  • primary-lighter
    #7FB7F2
    rgb(127,183,242)

    .has-color-primary-lighter

    .has-bgColor-primary-lighter

    .has-borderColor-primary-lighter

  • primary-lightest
    #CCE2FA
    rgb(204,226,250)

    .has-color-primary-lightest

    .has-bgColor-primary-lightest

    .has-borderColor-primary-lightest

Functional colors

  • info-dark
    #235461
    rgb(35,84,97)

    .has-color-info-dark

    .has-bgColor-info-dark

    .has-borderColor-info-dark

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

    .has-color-info

    .has-bgColor-info

    .has-borderColor-info

  • info-light
    #BBD0D7
    rgb(187,208,215)

    .has-color-info-light

    .has-bgColor-info-light

    .has-borderColor-info-light

  • info-lighter
    #D1E8F0
    rgb(209,232,240)

    .has-color-info-lighter

    .has-bgColor-info-lighter

    .has-borderColor-info-lighter

  • warning-dark
    #665E48
    rgb(102,94,72)

    .has-color-warning-dark

    .has-bgColor-warning-dark

    .has-borderColor-warning-dark

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

    .has-color-warning

    .has-bgColor-warning

    .has-borderColor-warning

  • warning-light
    #E6DBB7
    rgb(230,219,183)

    .has-color-warning-light

    .has-bgColor-warning-light

    .has-borderColor-warning-light

  • warning-lighter
    #FFEDB5
    rgb(255,237,181)

    .has-color-warning-lighter

    .has-bgColor-warning-lighter

    .has-borderColor-warning-lighter

  • error-dark
    #811211
    rgb(129,18,17)

    .has-color-error-dark

    .has-bgColor-error-dark

    .has-borderColor-error-dark

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

    .has-color-error

    .has-bgColor-error

    .has-borderColor-error

  • error-light
    #D6B4B4
    rgb(214,180,180)

    .has-color-error-light

    .has-bgColor-error-light

    .has-borderColor-error-light

  • error-lighter
    #FCD3D2
    rgb(252,211,210)

    .has-color-error-lighter

    .has-bgColor-error-lighter

    .has-borderColor-error-lighter

  • success-dark
    #5E6919
    rgb(94,105,25)

    .has-color-success-dark

    .has-bgColor-success-dark

    .has-borderColor-success-dark

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

    .has-color-success

    .has-bgColor-success

    .has-borderColor-success

  • success-light
    #C8D1BA
    rgb(200,209,186)

    .has-color-success-light

    .has-bgColor-success-light

    .has-borderColor-success-light

  • success-lighter
    #E6EED1
    rgb(230,238,209)

    .has-color-success-lighter

    .has-bgColor-success-lighter

    .has-borderColor-success-lighter

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

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-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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top