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

Charting colors

  • charting01
    #FFFFD9
    rgb(255,255,217)

    .has-color-charting01

    .has-bgColor-charting01

    .has-borderColor-charting01

  • charting02
    #EDF8B1
    rgb(237,248,177)

    .has-color-charting02

    .has-bgColor-charting02

    .has-borderColor-charting02

  • charting03
    #C7E9B4
    rgb(199,233,180)

    .has-color-charting03

    .has-bgColor-charting03

    .has-borderColor-charting03

  • charting04
    #7FCDBB
    rgb(127,205,187)

    .has-color-charting04

    .has-bgColor-charting04

    .has-borderColor-charting04

  • charting05
    #41B6C4
    rgb(65,182,196)

    .has-color-charting05

    .has-bgColor-charting05

    .has-borderColor-charting05

  • charting06
    #1D91C0
    rgb(29,145,192)

    .has-color-charting06

    .has-bgColor-charting06

    .has-borderColor-charting06

  • charting07
    #225EA8
    rgb(34,94,168)

    .has-color-charting07

    .has-bgColor-charting07

    .has-borderColor-charting07

  • charting08
    #253494
    rgb(37,52,148)

    .has-color-charting08

    .has-bgColor-charting08

    .has-borderColor-charting08

  • charting09
    #081D58
    rgb(8,29,88)

    .has-color-charting09

    .has-bgColor-charting09

    .has-borderColor-charting09

  • charting10
    #F7FCFD
    rgb(247,252,253)

    .has-color-charting10

    .has-bgColor-charting10

    .has-borderColor-charting10

  • charting11
    #E0ECF4
    rgb(224,236,244)

    .has-color-charting11

    .has-bgColor-charting11

    .has-borderColor-charting11

  • charting12
    #BFD3E6
    rgb(191,211,230)

    .has-color-charting12

    .has-bgColor-charting12

    .has-borderColor-charting12

  • charting13
    #9EBCDA
    rgb(158,188,218)

    .has-color-charting13

    .has-bgColor-charting13

    .has-borderColor-charting13

  • charting14
    #8C96C6
    rgb(140,150,198)

    .has-color-charting14

    .has-bgColor-charting14

    .has-borderColor-charting14

  • charting15
    #8C6BB1
    rgb(140,107,177)

    .has-color-charting15

    .has-bgColor-charting15

    .has-borderColor-charting15

  • charting16
    #88419D
    rgb(136,65,157)

    .has-color-charting16

    .has-bgColor-charting16

    .has-borderColor-charting16

  • charting17
    #810F7C
    rgb(129,15,124)

    .has-color-charting17

    .has-bgColor-charting17

    .has-borderColor-charting17

  • charting18
    #4D004B
    rgb(77,0,75)

    .has-color-charting18

    .has-bgColor-charting18

    .has-borderColor-charting18

  • charting19
    #E31A1C
    rgb(227,26,28)

    .has-color-charting19

    .has-bgColor-charting19

    .has-borderColor-charting19

  • charting20
    #FE9929
    rgb(254,153,41)

    .has-color-charting20

    .has-bgColor-charting20

    .has-borderColor-charting20

  • charting21
    #238443
    rgb(35,132,67)

    .has-color-charting21

    .has-bgColor-charting21

    .has-borderColor-charting21

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