Color

These are the colors that have been chosen to represent the brand. The colors are set as variables in Spark.

Primary

The core colors are used for text elements, backgrounds, and application UI.

  • Green

  • #13A48E
  • $sprk-green
  • rgb(19, 164, 142)
  • Red

  • #C8102E
  • $sprk-red
  • rgb(200,16,46)
  • Blue

  • #007DBA
  • $sprk-blue
  • rgb(0,125,186)
  • Yellow

  • #F5BE40
  • $sprk-yellow
  • rgb(245,190,64)
  • White

  • #FFFFFF
  • $sprk-white
  • rgb(255,255,255)
  • Gray

  • #F7F7F7
  • $sprk-gray
  • rgb(247,247,247)
  • Black

  • #333333
  • $sprk-black
  • rgb(51,51,51)

Secondary

The brand's color palette relies on a range of core colors that can be expanded with different tints and shades.

  • Dark Green

  • #01947E
  • $sprk-green-dark
  • rgb(1, 148, 126)
  • Green 75%

  • #40C6B2
  • $sprk-green-tint-75
  • rgb(64,198,178)
  • Green 50%

  • #80D9CB
  • $sprk-green-tint-50
  • rgb(128,217,203)
  • Green 25%

  • #BFECE5
  • $sprk-green-tint-25
  • rgb(191,236,229)
  • Red 75%

  • #D64C62
  • $sprk-red-tint-75
  • rgb(214,76,98)
  • Red 50%

  • #E38796
  • $sprk-red-tint-50
  • rgb(227,135,150)
  • Red 25%

  • #F1C3CB
  • $sprk-red-tint-25
  • rgb(241,195,203)
  • Blue 75%

  • #4990C3
  • $sprk-blue-tint-75
  • rgb(73,144,195)
  • Blue 50%

  • #76ACD2
  • $sprk-blue-tint-50
  • rgb(118,172,210)
  • Blue 25%

  • #A7C7E1
  • $sprk-blue-tint-25
  • rgb(164,199,225)
  • Yellow 75%

  • #EDA302
  • $sprk-yellow-tint-75
  • rgb(237,163,2)
  • Yellow 50%

  • #F4C766
  • $sprk-yellow-tint-50
  • rgb(244,199,102)
  • Yellow 25%

  • #F7DA9A
  • $sprk-yellow-tint-25
  • rgb(247,218,154)
  • Black 75%

  • #404040
  • $sprk-black-tint-75
  • rgb(64,64,64)
  • Black 50%

  • #808080
  • $sprk-black-tint-50
  • rgb(128,128,128)
  • Black 25%

  • #BEBEBE
  • $sprk-black-tint-25
  • rgb(190,190,190)
  • Dark Gray

  • #CFCFCF
  • $sprk-gray-dark
  • rgb(207,207,207)