Colours
Colours are an essential part of visual language. When used correctly, they improve communication, re-enforce branding, and enhance the user experience. ICS uses a flexible colour palette in order to produce a clean interface and brand experience. This palette seeks to communicate reliability and dynamism, two of our most cherished values.
Table of contents
ICS and ICS-digital brand colours
ICS-blue (primary)
ICS-blue-30 (primary)
HEX - #0F4C8A
CMYK - 98, 72, 16, 3
CMYK - 98, 72, 16, 3
ICS-blue-20 (background)
HEX - #0A335C
CMYK - 100, 81, 37, 29
CMYK - 100, 81, 37, 29
ICS-red (primary)
ICS-red-60 (primary)
HEX - #FF333A
CMYK - 0, 87, 70, 0
CMYK - 0, 87, 70, 0
ICS-blue scale
ICS-blue-95
HEX - #E8F2FD
CMYK - 11, 2, 0, 0
CMYK - 11, 2, 0, 0
ICS-blue-90
HEX - #D1E5FA
CMYK - 21, 5, 0, 0
CMYK - 21, 5, 0, 0
ICS-blue-80
HEX - #A3CCF5
CMYK - 39, 11, 0, 0
CMYK - 39, 11, 0, 0
ICS-blue-70
HEX - #75B2F0
CMYK - 55, 20, 0, 0
CMYK - 55, 20, 0, 0
ICS-blue-60
HEX - #4798EB
CMYK - 69, 33, 0, 0
CMYK - 69, 33, 0, 0
ICS-blue-50
HEX - #197FE6
CMYK - 80, 48, 0, 0
CMYK - 80, 48, 0, 0
ICS-blue-40
HEX - #1465B8
CMYK - 88, 57, 0, 0
CMYK - 88, 57, 0, 0
ICS-blue-30 (primary)
HEX - #0F4C8A
CMYK - 98, 72, 16, 3
CMYK - 98, 72, 16, 3
ICS-blue-20 (background)
HEX - #0A335C
CMYK - 100, 81, 37, 29
CMYK - 100, 81, 37, 29
ICS-blue-10
HEX - #05192E
CMYK - 100, 85, 49, 67
CMYK - 100, 85, 49, 67
ICS-red scale
ICS-red-95
HEX - #FFE6E6
CMYK - 0, 14, 7, 0
CMYK - 0, 14, 7, 0
ICS-red-90
HEX - #FFCCCE
CMYK - 0, 28, 13, 0
CMYK - 0, 28, 13, 0
ICS-red-80
HEX - #FF999C
CMYK - 0, 52, 27, 0
CMYK - 0, 52, 27, 0
ICS-red-70
HEX - #FF666B
CMYK - 0, 73, 46, 0
CMYK - 0, 73, 46, 0
ICS-red-60 (primary)
HEX - #FF333A
CMYK - 0, 87, 70, 0
CMYK - 0, 87, 70, 0
ICS-red-50
HEX - #FF0009
CMYK - 0, 95, 90, 0
CMYK - 0, 95, 90, 0
ICS-red-40
HEX - #CC0007
CMYK - 12, 100, 100, 4
CMYK - 12, 100, 100, 4
ICS-red-30
HEX - #990005
CMYK - 24, 100, 100, 26
CMYK - 24, 100, 100, 26
ICS-red-20
HEX - #660003
CMYK - 34, 100, 93, 55
CMYK - 34, 100, 93, 55
ICS-red-10
HEX - #330002
CMYK - 58, 90, 67, 82
CMYK - 58, 90, 67, 82
ICS-translate brand colours
ICS-translate-blue (primary)
ICS-translate-blue-40 (primary)
HEX - #0F58BD
CMYK - 90, 65, 0, 0
CMYK - 90, 65, 0, 0
ICS-translate-blue-30 (background)
HEX - #0B428E
CMYK - 100, 79, 11, 1
CMYK - 100, 79, 11, 1
ICS-translate-cyan (primary)
ICS-translate-cyan-50 (primary)
HEX - #00BFFF
CMYK - 66, 4, 0, 0
CMYK - 66, 4, 0, 0
ICS-translate-blue scale
ICS-translate-blue-95
HEX - #E7F0FD
CMYK - 11, 4, 0, 0
CMYK - 11, 4, 0, 0
ICS-translate-blue-90
HEX - #D0E2FB
CMYK - 21, 7, 0, 0
CMYK - 21, 7, 0, 0
ICS-translate-blue-80
HEX - #A1C5F7
CMYK - 40, 16, 0, 0
CMYK - 40, 16, 0, 0
ICS-translate-blue-70
HEX - #71A8F4
CMYK - 57, 28, 0, 0
CMYK - 57, 28, 0, 0
ICS-translate-blue-60
HEX - #428BF0
CMYK - 71, 43, 0, 0
CMYK - 71, 43, 0, 0
ICS-translate-blue-50
HEX - #136DEC
CMYK - 84, 58, 0, 0
CMYK - 84, 58, 0, 0
ICS-translate-blue-40 (primary)
HEX - #0F58BD
CMYK - 90, 65, 0, 0
CMYK - 90, 65, 0, 0
ICS-translate-blue-30 (background)
HEX - #0B428E
CMYK - 100, 79, 11, 1
CMYK - 100, 79, 11, 1
ICS-translate-blue-20
HEX - #082C5E
CMYK - 100, 86, 37, 26
CMYK - 100, 86, 37, 26
ICS-translate-blue-10
HEX - #04162F
CMYK - 100, 88, 48, 66
CMYK - 100, 88, 48, 66
ICS-translate-cyan scale
ICS-translate-cyan-95
HEX - #E6F9FF
CMYK - 12, 0, 2, 0
CMYK - 12, 0, 2, 0
ICS-translate-cyan-90
HEX - #CCF2FF
CMYK - 23, 0, 2, 0
CMYK - 23, 0, 2, 0
ICS-translate-cyan-80
HEX - #99E6FF
CMYK - 40, 0, 3, 0
CMYK - 40, 0, 3, 0
ICS-translate-cyan-70
HEX - #66D9FF
CMYK - 54, 0, 2, 0
CMYK - 54, 0, 2, 0
ICS-translate-cyan-60
HEX - #33CCFF
CMYK - 63, 0, 0, 0
CMYK - 63, 0, 0, 0
ICS-translate-cyan-50 (primary)
HEX - #00BFFF
CMYK - 66, 4, 0, 0
CMYK - 66, 4, 0, 0
ICS-translate-cyan-40
HEX - #0099CC
CMYK - 78, 22, 8, 0
CMYK - 78, 22, 8, 0
ICS-translate-cyan-30
HEX - #007399
CMYK - 86, 41, 24, 8
CMYK - 86, 41, 24, 8
ICS-translate-cyan-20
HEX - #004D66
CMYK - 94, 57, 39, 29
CMYK - 94, 57, 39, 29
ICS-translate-cyan-10
HEX - #002633
CMYK - 100, 72, 53, 64
CMYK - 100, 72, 53, 64
Neutral colours
Neutral colours are mainly used in text, background, borders, dividing lines, and other similar cases. Grey-20 is used as the primary colour for text.
Grey scale
White
HEX - #FFFFFF
CMYK - 0, 0, 0, 0
CMYK - 0, 0, 0, 0
Grey-95
HEX - #F2F2F2
CMYK - 6, 4, 5, 0
CMYK - 6, 4, 5, 0
Grey-90
HEX - #E6E6E6
CMYK - 12, 8, 9, 0
CMYK - 12, 8, 9, 0
Grey-80
HEX - #CCCCCC
CMYK - 23, 17, 18, 1
CMYK - 23, 17, 18, 1
Grey-70
HEX - #B3B3B3
CMYK - 33, 24, 26, 4
CMYK - 33, 24, 26, 4
Grey-60
HEX - #999999
CMYK - 41, 32, 32, 11
CMYK - 41, 32, 32, 11
Grey-50
HEX - #808080
CMYK - 49, 39, 38, 20
CMYK - 49, 39, 38, 20
Grey-40
HEX - #666666
CMYK - 56, 45, 45, 33
CMYK - 56, 45, 45, 33
Grey-30
HEX - #4D4D4D
CMYK - 62, 52, 50, 48
CMYK - 62, 52, 50, 48
Grey-20 (text-primary)
HEX - #333333
CMYK - 69, 60, 56, 66
CMYK - 69, 60, 56, 66
Grey-10
HEX - #1A1A1A
CMYK - 76, 67, 61, 83
CMYK - 76, 67, 61, 83
Black
HEX - #000000
CMYK - 91, 79, 62, 97
CMYK - 91, 79, 62, 97
Secondary colours
The secondary colour palette contains a number of additional colours to keep materials fresh and interesting when the primary colour palette is not deemed varied enough.
Secondary red scale
Secondary-red-95
HEX - #FEE7EB
CMYK - 0, 14, 4, 0
CMYK - 0, 14, 4, 0
Secondary-red-90
HEX - #FCCFD6
CMYK - 0, 27, 9, 0
CMYK - 0, 27, 9, 0
Secondary-red-80
HEX - #FA9EAE
CMYK - 0, 50, 17, 0
CMYK - 0, 50, 17, 0
Secondary-red-70
HEX - #F76E85
CMYK - 0, 70, 29, 0
CMYK - 0, 70, 29, 0
Secondary-red-60
HEX - #F53D5C
CMYK - 0, 86, 48, 0
CMYK - 0, 86, 48, 0
Secondary-red-50
HEX - #F20D33
CMYK - 0, 96, 73, 0
CMYK - 0, 96, 73, 0
Secondary-red-40
HEX - #C20A29
CMYK - 16, 100, 83, 6
CMYK - 16, 100, 83, 6
Secondary-red-30
HEX - #91081F
CMYK - 27, 100, 83, 30
CMYK - 27, 100, 83, 30
Secondary-red-20
HEX - #610514
CMYK - 36, 100, 78, 57
CMYK - 36, 100, 78, 57
Secondary-red-10
HEX - #30030A
CMYK - 58, 89, 62, 83
CMYK - 58, 89, 62, 83
Secondary orange scale
Secondary-orange-95
HEX - #FFF2E6
CMYK - 0, 7, 11, 0
CMYK - 0, 7, 11, 0
Secondary-orange-90
HEX - #FFE6CC
CMYK - 0, 13, 22, 0
CMYK - 0, 13, 22, 0
Secondary-orange-80
HEX - #FFCC99
CMYK - 0, 25, 43, 0
CMYK - 0, 25, 43, 0
Secondary-orange-70
HEX - #FFB366
CMYK - 0, 37, 64, 0
CMYK - 0, 37, 64, 0
Secondary-orange-60
HEX - #FF9933
CMYK - 0, 49, 83, 0
CMYK - 0, 49, 83, 0
Secondary-orange-50
HEX - #FF8000
CMYK - 0, 59, 94, 0
CMYK - 0, 59, 94, 0
Secondary-orange-40
HEX - #CC6600
CMYK - 16, 67, 100, 5
CMYK - 16, 67, 100, 5
Secondary-orange-30
HEX - #994D00
CMYK - 28, 71, 100, 26
CMYK - 28, 71, 100, 26
Secondary-orange-20
HEX - #663300
CMYK - 38, 73, 100, 55
CMYK - 38, 73, 100, 55
Secondary-orange-10
HEX - #331A00
CMYK - 56, 71, 77, 81
CMYK - 56, 71, 77, 81
Secondary yellow scale
Secondary-yellow-95
HEX - #FFFBE6
CMYK - 1, 0, 13, 0
CMYK - 1, 0, 13, 0
Secondary-yellow-90
HEX - #FFF7CC
CMYK - 1, 1, 27, 0
CMYK - 1, 1, 27, 0
Secondary-yellow-80
HEX - #FFEE99
CMYK - 2, 4, 50, 0
CMYK - 2, 4, 50, 0
Secondary-yellow-70
HEX - #FFE666
CMYK - 2, 6, 69, 0
CMYK - 2, 6, 69, 0
Secondary-yellow-60
HEX - #FFDD33
CMYK - 2, 10, 84, 0
CMYK - 2, 10, 84, 0
Secondary-yellow-50
HEX - #FFD500
CMYK - 1, 15, 92, 0
CMYK - 1, 15, 92, 0
Secondary-yellow-40
HEX - #CCAA00
CMYK - 20, 27, 99, 6
CMYK - 20, 27, 99, 6
Secondary-yellow-30
HEX - #998000
CMYK - 35, 37, 100, 22
CMYK - 35, 37, 100, 22
Secondary-yellow-20
HEX - #665500
CMYK - 49, 48, 100, 45
CMYK - 49, 48, 100, 45
Secondary-yellow-10
HEX - #332B00
CMYK - 63, 59, 85, 73
CMYK - 63, 59, 85, 73
Secondary green scale
Secondary-green-95
HEX - #E9FBF2
CMYK - 11, 0, 8, 0
CMYK - 11, 0, 8, 0
Secondary-green-90
HEX - #D4F7E6
CMYK - 20, 0, 16, 0
CMYK - 20, 0, 16, 0
Secondary-green-80
HEX - #A9F0CC
CMYK - 37, 0, 30, 0
CMYK - 37, 0, 30, 0
Secondary-green-70
HEX - #7DE8B2
CMYK - 50, 0, 44, 0
CMYK - 50, 0, 44, 0
Secondary-green-60
HEX - #52E099
CMYK - 59, 0, 55, 0
CMYK - 59, 0, 55, 0
Secondary-green-50
HEX - #26D97F
CMYK - 67, 0, 67, 0
CMYK - 67, 0, 67, 0
Secondary-green-40
HEX - #1FAD66
CMYK - 76, 0, 75, 0
CMYK - 76, 0, 75, 0
Secondary-green-30
HEX - #17824C
CMYK - 84, 24, 84, 9
CMYK - 84, 24, 84, 9
Secondary-green-20
HEX - #0F5733
CMYK - 90, 38, 89, 38
CMYK - 90, 38, 89, 38
Secondary-green-10
HEX - #082B19
CMYK - 90, 54, 83, 73
CMYK - 90, 54, 83, 73
Secondary blue scale
Secondary-blue-95
HEX - #E7F4FE
CMYK - 11, 1, 0, 0
CMYK - 11, 1, 0, 0
Secondary-blue-90
HEX - #CFE9FC
CMYK - 22, 2, 0, 0
CMYK - 22, 2, 0, 0
Secondary-blue-80
HEX - #9ED4FA
CMYK - 41, 5, 0, 0
CMYK - 41, 5, 0, 0
Secondary-blue-70
HEX - #6EBEF7
CMYK - 55, 12, 0, 0
CMYK - 55, 12, 0, 0
Secondary-blue-60
HEX - #3DA8F5
CMYK - 67, 23, 0, 0
CMYK - 67, 23, 0, 0
Secondary-blue-50
HEX - #0D93F2
CMYK - 75, 36, 0, 0
CMYK - 75, 36, 0, 0
Secondary-blue-40
HEX - #0A75C2
CMYK - 85, 48, 0, 0
CMYK - 85, 48, 0, 0
Secondary-blue-30
HEX - #085891
CMYK - 95, 63, 17, 3
CMYK - 95, 63, 17, 3
Secondary-blue-20
HEX - #053B61
CMYK - 100, 75, 36, 27
CMYK - 100, 75, 36, 27
Secondary-blue-10
HEX - #031D30
CMYK - 100, 82, 50, 65
CMYK - 100, 82, 50, 65
Secondary purple scale
Secondary-purple-95
HEX - #EEE6FF
CMYK - 7, 12, 0, 0
CMYK - 7, 12, 0, 0
Secondary-purple-90
HEX - #DDCCFF
CMYK - 17, 23, 0, 0
CMYK - 17, 23, 0, 0
Secondary-purple-80
HEX - #BB99FF
CMYK - 39, 44, 0, 0
CMYK - 39, 44, 0, 0
Secondary-purple-70
HEX - #9966FF
CMYK - 63, 64, 0, 0
CMYK - 63, 64, 0, 0
Secondary-purple-60
HEX - #7733FF
CMYK - 79, 77, 0, 0
CMYK - 79, 77, 0, 0
Secondary-purple-50
HEX - #5500FF
CMYK - 86, 78, 0, 0
CMYK - 86, 78, 0, 0
Secondary-purple-40
HEX - #4400CC
CMYK - 90, 84, 0, 0
CMYK - 90, 84, 0, 0
Secondary-purple-30
HEX - #330099
CMYK - 99, 98, 0, 0
CMYK - 99, 98, 0, 0
Secondary-purple-20
HEX - #220066
CMYK - 100, 100, 28, 22
CMYK - 100, 100, 28, 22
Secondary-purple-10
HEX - #110033
CMYK - 100, 99, 42, 64
CMYK - 100, 99, 42, 64