Approved colors for use in Nine Labs digital and printed products.
To make quick use of these colors in Sketch, you can download the Global Palette, which uses the Sketch Palettes Plugin.
All of these colors can be used with text and background color utility classes by adding the Sass variable name (e.g. $pink
) to the utility class name using the standard patterns.
Class name examples: text color (.text-pink
), background color (.bg-pink
)
Primary
Hex:#eb3b86
235, 59, 134
334, 81, 58
2039
$pink
Dark
Hex:#db036a
219, 3, 106
331, 97, 44
226
$pink-dark
Light
Hex:#f280b1
242, 128, 177
334, 81, 73
211
$pink-light
Primary
Hex:#2f2f8e
47, 47, 142
240, 50, 37
2370
$purple
Dark
Hex:#030387
3, 3, 135
240, 96, 27
2738
$purple-dark
Light
Hex:#7694cc
118, 148,204
219, 46, 63
2135
$purple-light
Primary
Hex:#3fc6c9
63, 198, 201
181, 56, 52
2226
$teal
Dark
Hex:#05aaaa
5, 170, 170
180, 94, 34
7467
$teal-dark
Light
Hex:#7ddbdb
125, 219, 219
180, 57, 67
7471
$teal-light
Primary
Hex:#fecd44
254, 205, 68
44, 99, 67
122
$yellow
Dark
Hex:#f9b303
254, 205, 68
43, 98, 49
122
$yellow-dark
Light
Hex:#f9d98a
249, 217, 138
43, 90, 76
1205
$yellow-light
Black
Hex:#000000
0, 0, 0
0, 0, 0
Black 6
$black
Gray 90%
Hex:#333333
51, 51, 51
0, 0, 20
447
$gray-90
Gray 80%
Hex:#4c4c4c
76, 76, 76
0, 0, 30
2336
$gray-80
Gray 70%
Hex:#666666
102, 102, 102
0, 0, 40
4195
$gray-70
Gray 60%
Hex:#7f7f7f
127, 127, 127
0, 0, 50
4278
$gray-60
Gray 50%
Hex:#999999
153, 153, 153
0, 0, 60
4289
$gray-50
Gray 40%
Hex:#b2b2b2
178, 178, 178
0, 0, 70
4281
$gray-40
Gray 30%
Hex:#cccccc
204, 204, 204
0, 0, 80
2330
$gray-30
Gray 20%
Hex:#e5e5e5
229, 229, 229
0, 0, 90
663
$gray-20
Gray 10%
Hex:#f0f0f0
240, 240, 240
0, 0, 94
n/a
$gray-10
Gray 5%
Hex:#fafafa
250, 250, 250
0, 0, 98
n/a
$gray-5
White
Hex:#ffffff
255, 255, 255
0, 0, 100
n/a
$white