Colours
The YourTradebase colour palette is divided by brand and UI. Brand colours are used throughout product and communications. UI colours are reserved solely for app interfaces.
Brand — Primary
YTB Blue
$ytb-blue
#0056a4
0,86,164
YTB Pencil Red
$ytb-red
#f62d18
246,45,24
YTB Navy
$ytb-navy
#002d4f
0,45,79
White
$ytb-white
#fff
255,255,255
Brand — Secondary
YTB Green
$ytb-green
#14a538
20,165,56
YTB Cedar
$ytb-cedar
#f5d6ab
245,214,171
Cool Grey
$ytb-coolgrey
#f7f7f7
247,247,247
Graphite
$ytb-graphite
#333
51,51,51
Black
$ytb-black
#000
0,0,0
UI — Foundation
Our UI colour palette has multiple subtle shades of 'Metal' which can be used to create harmonious interfaces. Whilst the shades are subtle, however, we ensure a readable and accessible interface by using both ends of the tonal spectrum – especially for mobile UIs where high contrast is key to outdoor use.
Dark navy
$ytb-dark-navy
#3d4b59
61,75,89
$ytb-dark-metal
#636e78
99,110,120
$ytb-metal
#8f919d
143,145,157
$ytb-light-metal
#b7bfc9
183,191,201
$ytb-pale-metal
#d8dfe7
216,223,231
$ytb-faint-metal
#e9eff7
233,239,247
UI — Statuses
Green 0
$ytb-green-0
#00694d
0,105,77
Green 1
$ytb-green-1
#008c67
2,139,103
Green 2
$ytb-green-2
#33a385
52,163,133
Green 3
$ytb-green-3
#66baa4
101,186,164
Green 4
$ytb-green-4
#8ecebf
142,206,191
Green 5
$ytb-green-5
#d1ede2
209,237,225
Teal 0
$ytb-teal-0
#1c827f
28,130,127
Teal 1
$ytb-teal-1
#25ada9
37,173,169
Teal 2
$ytb-teal-2
#51bdba
81,188,186
Teal 3
$ytb-teal-3
#7ccecb
124,206,203
Teal 4
$ytb-teal-4
#96d8d5
149,216,213
Teal 5
$ytb-teal-5
#d5edeb
213,237,235
Purple 0
$ytb-purple-0
#452662
69,38,98
Purple 1
$ytb-purple-1
#5c3383
92,51,131
Purple 2
$ytb-purple-2
#7d5c9c
125,92,156
Purple 3
$ytb-purple-3
#a171d0
161,113,208
Purple 4
$ytb-purple-4
#c7aae3
199,170,227
Purple 5
$ytb-purple-5
#f3dff9
243,223,249
Red 0
$ytb-red-0
#730000
115,0,0
Red 1
$ytb-red-1
#990000
153,0,0
Red 2
$ytb-red-2
#ce1b1b
206,27,27
Red 3
$ytb-red-3
#d8494a
216,73,74
Red 4
$ytb-red-4
#eba4a4
235,164,164
Red 5
$ytb-red-5
#f4d1d1
244,209,209
Orange 0
$ytb-orange-0
#bc4d15
187,76,22
Orange 1
$ytb-orange-1
#dd5e00
221,94,0
Orange 2
$ytb-orange-2
#e47e33
228,125,50
Orange 3
$ytb-orange-3
#eb9e66
234,158,102
Orange 4
$ytb-orange-4
#efb185
239,177,132
Orange 5
$ytb-orange-5
#f4cca9
244,204,168
Yellow 0
$ytb-yellow-0
#d69900
213,153,0
Yellow 1
$ytb-yellow-1
#ffb402
254,180,4
Yellow 2
$ytb-yellow-2
#ffc335
255,195,53
Yellow 3
$ytb-yellow-3
#ffd267
255,210,103
Yellow 4
$ytb-yellow-4
#ffe19a
255,225,154
Yellow 5
$ytb-yellow-5
#fff0cc
255,240,204
Blue 0
$ytb-blue-0
#002d64
0,45,100
Blue 1
$ytb-blue-1
#0d478d
13,71,141
Blue 2
$ytb-blue-2
#2668be
38,104,190
Blue 3
$ytb-blue-3
#4f8bd1
79,139,209
Blue 4
$ytb-blue-4
#abc1e6
171,193,230
Blue 5
$ytb-blue-5
#d4f0ff
212,240,255
UI — Feedback
Orange
#ff9902
255,153,2
Light Yellow
#ffffcc
255,254,204
Colour picker palette
#92C233
#6B9472
#28772B
#8D3491
#A67AA6
#6447A4
#00AEF0
#3D89C9
#326694
#0072B1
#003792
#013571
#FBCE30
#EC6C19
#C74E00
#B12E19
#C10303
#8A1402
#9D9C8E
#736257
#4C422F
#808080
#666666
#212121