The BenchPrep primary color pallete consists of five base colors. Blue is the primary and secondary color,
and should be used for overall application styling. Green is used to denote high confidence, and correct
answers. Yellow is used for medium cofidence and notices. Red is used for low confidence, incorrect
answers, error or warning. Gray is used for content and containers or background. Each base color includes
a series of color tones. These tones are determined by mixing the base color with increasing amounts of
either black or white. Color tones are used in conjunction with the base color as secondary colors.
Primary Colors
Blue
#0E788F
SCSS: $primary-90
HEX: #073C48
SCSS: $primary-80
HEX: #094A59
SCSS: $primary-70
HEX: #0B5A6B
SCSS: $primary-60
HEX: #0C6882
SCSS: $primary-50, $primary
HEX: #0E788F
SCSS: $primary-40
HEX: #3E93A5
SCSS: $primary-30
HEX: #6BAEBA
SCSS: $primary-20
HEX: #9FC9D2
SCSS: $primary-10
HEX: #CFE4E9
Colors
Green
#008153
SCSS: $green-90
HEX: #00412A
SCSS: $green-80
HEX: #005033
SCSS: $green-70
HEX: #00613E
SCSS: $green-60
HEX: #007048
SCSS: $green-50
HEX: #008153
SCSS: $green-40
HEX: #339A75
SCSS: $green-30
HEX: #66B398
SCSS: $green-20
HEX: #99CDBA
SCSS: $green-10
HEX: #CCE6DD
Yellow
#EDC21C
SCSS: $yellow-90
HEX: #77610F
SCSS: $yellow-80
HEX: #937811
SCSS: $yellow-70
HEX: #B29215
SCSS: $yellow-60
HEX: #CEA918
SCSS: $yellow-50
HEX: #EDC21C
SCSS: $yellow-40
HEX: #F1CE49
SCSS: $yellow-30
HEX: #F4DA77
SCSS: $yellow-20
HEX: #F8E7A4
SCSS: $yellow-10
HEX: #FBF3D2
Red
#DC3235
SCSS: $red-90
HEX: #6E191B
SCSS: $red-80
HEX: #881F21
SCSS: $red-70
HEX: #A52628
SCSS: $red-60
HEX: #BF2C2E
SCSS: $red-50
HEX: #DC3235
SCSS: $red-40
HEX: #E35B5D
SCSS: $red-30
HEX: #EA8486
SCSS: $red-20
HEX: #F1ADAE
SCSS: $red-10
HEX: #F8D6D7
Grayscale
Gray
#D2D2D2
SCSS: $gray-90
HEX: #353535
SCSS: $gray-80
HEX: #696969
SCSS: $gray-70
HEX: #828282
SCSS: $gray-60
HEX: #9E9E9E
SCSS: $gray-50
HEX: #D2D2D2
SCSS: $gray-40
HEX: #DBDBDB
SCSS: $gray-30
HEX: #E4E4E4
SCSS: $gray-20
HEX: #EDEDED
SCSS: $gray-10
HEX: #F6F6F6