Color

Cumulocity uses a specific color palette to communicate meaning, convey visual differentiation, and provide a consistent look and feel.

Displayed contrast ratios are using #ffffff as background color and folow WCAG 2.0 level AA, which requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Primary Colors

Primary colors usually are Brand related and should be used sparingly across the interface: bright colors on primary action buttons and components, dark colors are meant be used on specific components background.

#1776bf
Primary
#5FAEEC
Primary-light
#14629F
Complementary
#e0007f
Accent
#08293f
gray-darker

Status Colors

Status colors are meant to be used for visual messaging. The following colors have inherent and well-defined meaning for most of western users. Given that cultural differences are plentiful, colors can be customized on specific internationalization occasions.

#008800
success
#E0000E
danger
#FF801F
warning
#E66400
dark-warning
#C25400
text-warning
#96CAF3
info
#0F4C7B
text-info

Neutrals

Cumulocity uses gray-toned colors to enable a clear but flexible separation of information hierarchy in the interface.

#0B385B
gray-darker
#394852
gray-dark
#58656D
gray-medium
#677680
gray
#CCD2D6
gray-light
#F6f7f8
gray-lighter
#fbfbfc
gray-white
#333333
gray-text

Full color pallete

Should you need more colors (e.g. for graphs, charts or to highlight certain content areas) please refer to the Color Palette below and make sure that the color contrast between text and its background is at least 4.5:1.

blue-98
#F6FAFE
blue-89
#CDE6F9
blue-77
#96CAF3
blue-65
#5FAEEC
blue-50
#1C8CE3
Primary blue
#1776BF
blue-35
<#14629F
blue-27
#0F4C7B
blue-20
#0B385B
blue-14
#08293F
purple-98
#F9F5FF
purple-92
#E8D6FF
purple-84
#D1ADFF
purple-75
#B780FF
purple-65
#9A4DFF
purple-56
#801FFF
purple-47
#6800F0
purple-34
#4B00AD
purple-22
#310070
purple-16
#230052
pink-98
#FFF5FB
pink-94
#FFE0F1
pink-87
#FFBDE2
pink-78
#FF8FCE
pink-69
#FF61BA
pink-56
#FF1F9E
Accent pink
#E0007F
pink-35
#B30065
pink-24
#7A0045
pink-17
#570030
red-97
#FFF0F0
red-90
#FFCCCF
red-78
#FF8F96
red-68
#FF5C66
red-56
#FF1F2D
red-44
#E0000E
red-37
#BD000C
red-28
#8F0009
red-21
#6B0006
red-16
#520005
orange-97
#FFF6F0
orange-92
#FFE8D6
orange-81
#FFC89E
orange-67
#FFA057
orange-56
#FF801F
orange-45
#E66400
orange-38
#C25400
orange-31
#9E4400
orange-23
#753200
orange-18
#5C2800
yellow-95
#FFFEE6
yellow-89
#FFFBC7
yellow-79
#FFF794
yellow-56
#FFF01F
yellow-47
#F0DF00
yellow-42
#D6C800
yellow-34
#ADA200
yellow-25
#807700
yellow-18
#5C5500
yellow-14
#474200
green-95
#FAFEE7
green-89
#F5FCCA
green-77
#EAFA8F
green-49
#CDEF0B
green-44
#BAD80A
green-38
#A0B909
green-31
#829707
green-24
#657506
green-18
#4C5705
green-14
#3B4503
teal-97
#F1FDFC
teal-92
#DBFAF9
teal-81
#A9F4F0
teal-66
#64EDE3
teal-46
#19D2C7
teal-39
#15B0A6
teal-31
#108E86
teal-23
#0C6A64
teal-16
#094845
teal-12
#063733
gray-95
#FBFBFC
gray-90
#f6f7f8
gray-80
#CCD2D6
gray-70
#B0B9BF
gray-60
#8A98A1
gray-50
#677680
gray-40
#58656D
gray-30
#394852
Almost black
#333333
black
#000000