Color

Color is an essential component of an expressive user interface.

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

You can click any color identifier/name, color value and helper classes below to copy them into your clipboard.

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

Overview

Color communicates relevance and relations among different user interface elements. The following palettes display all existing colors of the MindSphere core components and lists exemplary patterns of their usage.

Neutral text, background and border colors

MindSphere uses subtle grays for most backgrounds, borders and text.

Color nameUsage examples
base000Shadows (in various grades of opacity)
base200Typography: Headline, paragraph – foreground, input elements: border color
base450Button groups: Active border and background color, empty state area: conditional graphics
base600User input: border
Primary button, disabled state: background
Secondary button, disabled state: border, foreground
Switch, off state: background
Typography, subheadline and caption: foreground
base750Container: border
Fieldset: border
base800Menu: active item background
base900Vertical tab: background, input elements: readonly background
base1000Main region: background

Primary color

Blue is used to highlight interactive elements.

Color nameUsage examples
primary-darkerToggle button, Active state: background
primary-darkPrimary button, Pressed state: background
primaryPrimary button: background
Secondary button: border, foreground
Switch, Active state: background
primary-lightPrimary button, Mouseover state: background
Focus state: border
primary-lighterSecondary button, Pressed state: background
primary-lightestSecondary button, Mouseover state: background

Functional colors

Bold colors are used to attract the user’s attention to specific components of the interface.

Color nameUsage examples
info-darkMessage, info: foreground
infoSeverity “info”
Data visualization
info-lightMessage, info: border
info-lighterMessage: info: background
error-darkMessage, error / alert: foreground
errorSeverity “error” / “alert”
Data visualization
error-lightMessage, error / alert: border
error-lighterMessage, error / alert: background
warning-darkMessage, warning: foreground
warningSeverity “warning”
Data visualization
warning-lightMessage, warning: border
warning-lighterMessage, warning: background
success-darkMessage, success: foreground
successSeverity “success”
Data visualization
success-lightMessage, success: border
success-lighterMessage, success: background

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>

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