Colors

Color palette

This color palette comprises 22 base colors and respective dark & light shades providing plenty room to play around. They’ve been designed to work harmoniously with each other. All the colors can be used as backgrounds and base colors can be used as text colors.

red-light-5 #fff1f1
red-light-4 #fdc5c3
red-light-3 #fb9f9b
red-light-2 #fa7d77
red-light-1 #f95851
Danger color #f83f37
Red
red-dark-1 #ff2f26
red-dark-2 #ed1622
red-dark-3 #cf020d
red-dark-4 #b10911
red-dark-5 #8b0c12
pink-light-5 #feeff4
pink-light-4 #fabacf
pink-light-3 #f68daf
pink-light-2 #f36493
pink-light-1 #ef3975
#ed1b60
Pink
pink-dark-1 #df195f
pink-dark-2 #be1b54
pink-dark-3 #a7194b
pink-dark-4 #90143f
pink-dark-5 #6f1333
purple-light-5 #f9f0f9
purple-light-4 #e6bde5
purple-light-3 #d592d4
purple-light-2 #c66cc5
purple-light-1 #b642b5
#ab26aa
Purple
purple-dark-1 #9a3092
purple-dark-2 #882787
purple-dark-3 #7c2181
purple-dark-4 #701b76
purple-dark-5 #5d1864
violet-light-5 #f4f2fa
violet-light-4 #d1c5e8
violet-light-3 #b29fd8
violet-light-2 #977dcb
violet-light-1 #7a59bc
#6640b2
Violet
violet-dark-1 #603bab
violet-dark-2 #5935a3
violet-dark-3 #482e7e
violet-dark-4 #3a196c
violet-dark-5 #2d1453
indigo-light-5 #f1f3f9
indigo-light-4 #c4cce7
indigo-light-3 #9caad8
indigo-light-2 #798cca
indigo-light-1 #536bbb
#3a55b1
Indigo
indigo-dark-1 #3650ab
indigo-dark-2 #2f4595
indigo-dark-3 #273c87
indigo-dark-4 #002663
indigo-dark-5 #0a2042
blue-light-5 #edf7fe
blue-light-4 #b2defa
blue-light-3 #7fc8f6
blue-light-2 #52b5f3
blue-light-1 #21a0f0
#0092ee
Blue
blue-dark-1 #0089e0
blue-dark-2 #007fd0
blue-dark-3 #0768a5
blue-dark-4 #004f82
blue-dark-5 #044067
sky-light-5 #edf9fe
sky-light-4 #b2e6fa
sky-light-3 #7fd5f7
sky-light-2 #52c7f5
sky-light-1 #21b7f2
Primary color #00acf0
Sky
sky-dark-1 #00a0df
sky-dark-2 #0293c9
sky-dark-3 #0285b4
sky-dark-4 #02729a
sky-dark-5 #075875
cyan-light-5 #effafb
cyan-light-4 #bbebf0
cyan-light-3 #8edde6
cyan-light-2 #66d2dd
cyan-light-1 #3bc5d3
info color #1ebccd
Cyan
cyan-dark-1 #16a9b9
cyan-dark-2 #0e949f
cyan-dark-3 #0b858f
cyan-dark-4 #046b73
cyan-dark-5 #065459
teal-light-5 #edf8f6
teal-light-4 #b2e1da
teal-light-3 #7fcdc1
teal-light-2 #52bbac
teal-light-1 #21a894
#009b84
Teal
teal-dark-1 #018975
teal-dark-2 #028068
teal-dark-3 #026f58
teal-dark-4 #02624f
teal-dark-5 #044b3b
green-light-5 #eff9f2
green-light-4 #bce7c7
green-light-3 #90d7a3
green-light-2 #69c982
green-light-1 #3fb95f
Success color #22af47
Green
green-dark-1 #1aa23e
green-dark-2 #179237
green-dark-3 #138431
green-dark-4 #056b33
green-dark-5 #05592b
neon-light-5 #f3f9ec
neon-light-4 #dbedc6
neon-light-3 #c3e0a0
neon-light-2 #aed67e
neon-light-1 #97ca5a
#88c241
Neon
neon-dark-1 #79b62f
neon-dark-2 #67a41c
neon-dark-3 #59970e
neon-dark-4 #4c7f16
neon-dark-5 #3d680f
lime-light-5 #f9faeb
lime-light-4 #f1f4d0
lime-light-3 #e7ecb0
lime-light-2 #dfe594
lime-light-1 #d6de76
#d0d962
Lime
lime-dark-1 #c3cc34
lime-dark-2 #b7c11a
lime-dark-3 #9ea809
lime-dark-4 #878b09
lime-dark-5 #6f7208
sun-light-5 #fffbe5
sun-light-4 #fef7c2
sun-light-3 #fef19a
sun-light-2 #feec76
sun-light-1 #fde74f
#fde335
Sun
sun-dark-1 #ecd11e
sun-dark-2 #dfc414
sun-dark-3 #cdb308
sun-dark-4 #bca300
sun-dark-5 #a48f03
yellow-light-5 #fff8eb
yellow-light-4 #ffecc2
yellow-light-3 #ffdf9a
yellow-light-2 #ffd477
yellow-light-1 #ffc750
Warning color #ffbf36
Yellow
yellow-dark-1 #ffb71d
yellow-dark-2 #ffac19
yellow-dark-3 #faa000
yellow-dark-4 #eb9000
yellow-dark-5 #cb7e03
orange-light-5 #fff4e9
orange-light-4 #ffdfbe
orange-light-3 #ffca93
orange-light-2 #ffb76d
orange-light-1 #ffa344
#ff9528
Orange
orange-dark-1 #ff880e
orange-dark-2 #ff7800
orange-dark-3 #f16611
orange-dark-4 #e05602
orange-dark-5 #c74c00
pumpkin-light-5 #fff4f0
pumpkin-light-4 #ffcfbe
pumpkin-light-3 #ffaf93
pumpkin-light-2 #ff936d
pumpkin-light-1 #ff7544
#ff6028
Pumpkin
pumpkin-dark-1 #fb551c
pumpkin-dark-2 #e8470f
pumpkin-dark-3 #dd3f08
pumpkin-dark-4 #c63300
pumpkin-dark-5 #ac2c00
brown-light-5 #f6f3f2
brown-light-4 #d7cbc8
brown-light-3 #bca9a4
brown-light-2 #a58b84
brown-light-1 #8b6a61
#7a5449
Brown
brown-dark-1 #6f483d
brown-dark-2 #633d32
brown-dark-3 #502f25
brown-dark-4 #44241b
brown-dark-5 #301811
gold-light-5 #fbf8f1
gold-light-4 #ece0c5
gold-light-3 #e0cc9f
gold-light-2 #d5ba7d
gold-light-1 #c9a658
#c1993f
Gold
gold-dark-1 #b48c32
gold-dark-2 #a27b25
gold-dark-3 #98731e
gold-dark-4 #85600d
gold-dark-5 #6d4d05
grey-light-5 #f5f5f5
grey-light-4 #e2e2e2
grey-light-3 #cecece
grey-light-2 #bdbdbd
grey-light-1 #ababab
Secondary #9e9e9e
Grey
grey-dark-1 #919191
grey-dark-2 #858484
grey-dark-3 #777474
grey-dark-4 #666161
grey-dark-5 #524c4c
smoke-light-5 #f4f6f7
smoke-light-4 #ced8dc
smoke-light-3 #aebec4
smoke-light-2 #92a7b0
smoke-light-1 #738e99
#5e7d8a
Smoke
smoke-dark-1 #4a6b78
smoke-dark-2 #40606d
smoke-dark-3 #304e5a
smoke-dark-4 #233c46
smoke-dark-5 #172a32
#f5f5f6
Light
light-10 #eaecec
light-15 #e0e3e4
light-20 #d6d9da
light-30 #c1c6c8
light-40 #adb3b6
light-50 #98a0a3
light-60 #848d91
light-70 #6f7a7f
light-80 #5b676d
light-90 #46545a
#324148
Dark
dark-20 #2b383e
dark-40 #273238
dark-60 #212a2f
dark-80 #1a2225
dark-100 #0d1113