Colour Swatches

Main Colours

• Base

  hex: #153634
  hsla(243, 75%,  6%, 1)
  rgba(21, 54, 52)
   Vars | $base, --base-hsl, --color-base
  Alias | --color-default

• Orange

  hex: #DE6E26
  hsla(23, 74%, 51%, 1)
  rgba(222, 110, 38)
   Vars | $orange, --orange-hsl, --color-orange
  Alias | --color-primary

• Teal

  hex: #4DACB6
  hsla(186, 42%, 51%, 1)
  rgba(77, 172, 182)
   Vars | $teal, --teal-hsl, --color-teal
  Alias | --color-accent

• Yellow

  hex: #EFC329
  hsla(47, 86%, 55%, 1)
  rgba(239, 195, 41)
   Vars | $yellow, --yellow-hsl, --color-yellow

• Red

  hex: #BC2C26
  hsla(2, 66%, 44%, 1)
  rgba(188, 44, 38)
   Vars | $red, --red-hsl, --color-red

Text Colours

• Base

  Some Base text.

  hex: #153634
  hsla(243, 75%,  6%, 1)
  rgba(21, 54, 52)
   Vars | $base, --base-hsl, --color-base
  Alias | --color-default

• Orange

  Some Orange text.

  hex: #A7531D
  hsla(24, 70%, 38%, 1)
  rgba(166, 84, 29)
   Vars | $orange-dark, --orange-dark-hsl, --color-orange-dark

• Teal

  Some Teal text.

  hex: #2e666b
  hsla(185, 40%, 30%, 1)
  rgba(46, 102, 107)
   Vars | $teal-dark, --teal-dark-hsl, --color-teal-dark

• Yellow

  Some Yellow text.

  hex: #8f730c
  hsla(47, 85%, 30%, 1)
  rgba(143, 116, 12)
   Vars | $yellow-dark, --yellow-dark-hsl, --color-yellow-dark

• Red

  Some Red text.

  hex: #BC2C26
  hsla(2, 66%, 44%, 1)
  rgba(188, 44, 38)
   Vars | $red, --red-hsl, --color-red

• Colour Shades and Tints

  #050E0D

  #0B1B1A

  #102927

  #153634

  #506867

  #8A9B99

  #C5CDCC

  #381C0A

  #6F3713

  #A7531D

  #DE6E26

  #E6925C

  #EFB793

  #F7DBC9

  #132B2D

  #27565B

  #3a8088

  #4DACB6

  #7AC1C8

  #A6D6DA

  #D3EAED

  #3C310A

  #8e7419

  #B3921F

  #EFC329

  #F3D25E

  #F7E194

  #FBF0C9

  #2F0B0A

  #5E1613

  #8D211D

  #BC2C26

  #CD615C

  #DE9593

  #EECAC9

Secondary Colours

• Success Green

  hex: #00571d
  hsla(140, 100%, 17%, 1)
  rgba(0, 87, 29, 1)
   Vars | $success, --success-green-hsl, --color-success

• Error Red

  hex: #BC2C26
  hsla(2, 66%, 44%, 1)
  rgba(188, 44, 38)
   Vars | $error, --error-red-hsl, --color-error

• Warning Yellow

  hex: #EFC329
  hsla(47, 86%, 55%, 1)
  rgba(239, 195, 41)
   Vars | $warning, --warning-yellow-hsl, --color-warning