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

base950

#F6F6F6

rgb(246,246,246)

.has-color-base950

.has-bgColor-base950

.has-borderColor-base950

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

#08889E

rgb(8,136,158)

.has-color-charting01

.has-bgColor-charting01

.has-borderColor-charting01

charting02

#FFB900

rgb(255,185,0)

.has-color-charting02

.has-bgColor-charting02

.has-borderColor-charting02

charting03

#AAB414

rgb(170,180,20)

.has-color-charting03

.has-bgColor-charting03

.has-borderColor-charting03

charting04

#8068E7

rgb(128,104,231)

.has-color-charting04

.has-bgColor-charting04

.has-borderColor-charting04

charting05

#AF235F

rgb(175,35,95)

.has-color-charting05

.has-bgColor-charting05

.has-borderColor-charting05

charting06

#794934

rgb(121,73,52)

.has-color-charting06

.has-bgColor-charting06

.has-borderColor-charting06

charting07

#006FE6

rgb(0,111,230)

.has-color-charting07

.has-bgColor-charting07

.has-borderColor-charting07

charting08

#879BAA

rgb(135,155,170)

.has-color-charting08

.has-bgColor-charting08

.has-borderColor-charting08

charting09

#EB780A

rgb(235,120,10)

.has-color-charting09

.has-bgColor-charting09

.has-borderColor-charting09

charting10

#554A50

rgb(85,74,80)

.has-color-charting10

.has-bgColor-charting10

.has-borderColor-charting10

charting11

#647D2D

rgb(100,125,45)

.has-color-charting11

.has-bgColor-charting11

.has-borderColor-charting11

charting12

#50BED7

rgb(80,190,215)

.has-color-charting12

.has-bgColor-charting12

.has-borderColor-charting12

charting13

#B98F72

rgb(185,143,114)

.has-color-charting13

.has-bgColor-charting13

.has-borderColor-charting13

charting14

#C8C8B7

rgb(200,200,183)

.has-color-charting14

.has-bgColor-charting14

.has-borderColor-charting14

charting15

#A985A8

rgb(169,133,168)

.has-color-charting15

.has-bgColor-charting15

.has-borderColor-charting15

charting16

#FF9EBC

rgb(255,158,188)

.has-color-charting16

.has-bgColor-charting16

.has-borderColor-charting16

charting17

#530E00

rgb(83,14,0)

.has-color-charting17

.has-bgColor-charting17

.has-borderColor-charting17

charting18

#789CFF

rgb(120,156,255)

.has-color-charting18

.has-bgColor-charting18

.has-borderColor-charting18

charting19

#F62447

rgb(246,36,71)

.has-color-charting19

.has-bgColor-charting19

.has-borderColor-charting19

charting20

#FFC800

rgb(255,200,0)

.has-color-charting20

.has-bgColor-charting20

.has-borderColor-charting20

charting21

#65C728

rgb(101,199,40)

.has-color-charting21

.has-bgColor-charting21

.has-borderColor-charting21

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 name	Usage examples
base000	Shadows (in various grades of opacity)
base200	Typography: Headline, paragraph – foreground, input elements: border color
base450	Button groups: Active border and background color, empty state area: conditional graphics
base600	User input: border Primary button, disabled state: background Secondary button, disabled state: border, foreground Switch, off state: background Typography, subheadline and caption: foreground
base750	Container: border Fieldset: border
base800	Menu: active item background
base900	Vertical tab: background, input elements: readonly background
base1000	Main region: background

Primary color

Blue is used to highlight interactive elements.

Color name	Usage examples
primary-darker	Toggle button, Active state: background
primary-dark	Primary button, Pressed state: background
primary	Primary button: background Secondary button: border, foreground Switch, Active state: background
primary-light	Primary button, Mouseover state: background Focus state: border
primary-lighter	Secondary button, Pressed state: background
primary-lightest	Secondary button, Mouseover state: background

Functional colors

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

Color name	Usage examples
info-dark	Message, info: foreground
info	Severity “info” Data visualization
info-light	Message, info: border
info-lighter	Message: info: background
error-dark	Message, error / alert: foreground
error	Severity “error” / “alert” Data visualization
error-light	Message, error / alert: border
error-lighter	Message, error / alert: background
warning-dark	Message, warning: foreground
warning	Severity “warning” Data visualization
warning-light	Message, warning: border
warning-lighter	Message, warning: background
success-dark	Message, success: foreground
success	Severity “success” Data visualization
success-light	Message, success: border
success-lighter	Message, 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

Element	Class	Description
`.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.

Theming