Shades & Tints

This color palette comprises primary and accent colors. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. The 100 colors are the primary colors and the other colors are accents colors.

  • Mid Grey BASE $mid-grey-100
  • 10 $mid-grey-10
  • 20 $mid-grey-20
  • 40 $mid-grey-40
  • 60 $mid-grey-60
  • 80 $mid-grey-80
  • 100 $mid-grey-100
  • 120 $mid-grey-120
  • 140 $mid-grey-140
  • 160 $mid-grey-160
  • 180 $mid-grey-180
  • Green BASE $green-100
  • 10 $green-10
  • 20 $green-20
  • 40 $green-40
  • 60 $green-60
  • 80 $green-80
  • 100 $green-100
  • 120 $green-120
  • 140 $green-140
  • 160 $green-160
  • 180 $green-180
  • Gold BASE $gold-100
  • 10 $gold-10
  • 20 $gold-20
  • 40 $gold-40
  • 60 $gold-60
  • 80 $gold-80
  • 100 $gold-100
  • 120 $gold-120
  • 140 $gold-140
  • 160 $gold-160
  • 180 $gold-180
  • Yellow BASE $yellow-100
  • 10 $yellow-10
  • 20 $yellow-20
  • 40 $yellow-40
  • 60 $yellow-60
  • 80 $yellow-80
  • 100 $yellow-100
  • 120 $yellow-120
  • 140 $yellow-140
  • 160 $yellow-160
  • 180 $yellow-180
  • Orange BASE $orange-100
  • 10 $orange-10
  • 20 $orange-20
  • 40 $orange-40
  • 60 $orange-60
  • 80 $orange-80
  • 100 $orange-100
  • 120 $orange-120
  • 140 $orange-140
  • 160 $orange-160
  • 180 $orange-180
  • Black $black
  • White $white