Official color palette.

blue-dark

  • #2a2859
  • $blue-dark
  • .ods-color-text-blue-dark
  • .ods-color-bg-blue-dark

blue

  • #6fe9ff
  • $blue
  • .ods-color-text-blue
  • .ods-color-bg-blue

blue-light

  • #b3f5ff
  • $blue-light
  • .ods-color-text-blue-light
  • .ods-color-bg-blue-light

green-dark

  • #034b45
  • $green-dark
  • .ods-color-text-green-dark
  • .ods-color-bg-green-dark

green

  • #43f8b6
  • $green
  • .ods-color-text-green
  • .ods-color-bg-green

green-light

  • #c7f6c9
  • $green-light
  • .ods-color-text-green-light
  • .ods-color-bg-green-light

beige-dark

  • #d0bfae
  • $beige-dark
  • .ods-color-text-beige-dark
  • .ods-color-bg-beige-dark

beige

  • #f8f0dd
  • $beige
  • .ods-color-text-beige
  • .ods-color-bg-beige

yellow

  • #f9c66b
  • $yellow
  • .ods-color-text-yellow
  • .ods-color-bg-yellow

red

  • #ff8274
  • $red
  • .ods-color-text-red
  • .ods-color-bg-red

white

  • #ffffff
  • $white
  • .ods-color-text-white
  • .ods-color-bg-white

black

  • #000000
  • $black
  • .ods-color-text-black
  • .ods-color-bg-black

gray-dark

  • #2c2c2c
  • $gray-dark
  • .ods-color-text-gray-dark
  • .ods-color-bg-gray-dark

gray

  • #f2f2f2
  • $gray
  • .ods-color-text-gray
  • .ods-color-bg-gray

gray-light

  • #f9f9f9
  • $gray-light
  • .ods-color-text-gray-light
  • .ods-color-bg-gray-light

Digital

Colors used only for digital purposes

purple

  • #8d50b1
  • $purple
  • .ods-color-text-purple
  • .ods-color-bg-purple

purple-light

  • #e0adff
  • $purple-light
  • .ods-color-text-purple-light
  • .ods-color-bg-purple-light

blue-state

  • #1f42aa
  • $blue-state
  • .ods-color-text-blue-state
  • .ods-color-bg-blue-state

red-light

  • #ffb4ac
  • $red-light
  • .ods-color-text-red-light
  • .ods-color-bg-red-light

red-30

  • #ffdfdc
  • $red-30
  • .ods-color-text-red-30
  • .ods-color-bg-red-30

green-30

  • #c7fde9
  • $green-30
  • .ods-color-text-green-30
  • .ods-color-bg-green-30

yellow-50

  • #ffe7bc
  • $yellow-50
  • .ods-color-text-yellow-50
  • .ods-color-bg-yellow-50

yellow-60

  • #f7d9a2
  • $yellow-60
  • .ods-color-text-yellow-60
  • .ods-color-bg-yellow-60

blue-60

  • #d1f9ff
  • $blue-60
  • .ods-color-text-blue-60
  • .ods-color-bg-blue-60

Gradients

Color gradients

grayscale-90

  • #181818
  • $grayscale-90
  • .ods-color-text-grayscale-90
  • .ods-color-bg-grayscale-90

grayscale-80

  • #303030
  • $grayscale-80
  • .ods-color-text-grayscale-80
  • .ods-color-bg-grayscale-80

grayscale-70

  • #494949
  • $grayscale-70
  • .ods-color-text-grayscale-70
  • .ods-color-bg-grayscale-70

grayscale-60

  • #616161
  • $grayscale-60
  • .ods-color-text-grayscale-60
  • .ods-color-bg-grayscale-60

grayscale-50

  • #797979
  • $grayscale-50
  • .ods-color-text-grayscale-50
  • .ods-color-bg-grayscale-50

grayscale-40

  • #919191
  • $grayscale-40
  • .ods-color-text-grayscale-40
  • .ods-color-bg-grayscale-40

grayscale-30

  • #a9a9a9
  • $grayscale-30
  • .ods-color-text-grayscale-30
  • .ods-color-bg-grayscale-30

grayscale-20

  • #c2c2c2
  • $grayscale-20
  • .ods-color-text-grayscale-20
  • .ods-color-bg-grayscale-20

grayscale-10

  • #dadada
  • $grayscale-10
  • .ods-color-text-grayscale-10
  • .ods-color-bg-grayscale-10

blue-dark-90

  • #3f3e6a
  • $blue-dark-90
  • .ods-color-text-blue-dark-90
  • .ods-color-bg-blue-dark-90

blue-dark-80

  • #55537a
  • $blue-dark-80
  • .ods-color-text-blue-dark-80
  • .ods-color-bg-blue-dark-80

blue-dark-70

  • #6a698b
  • $blue-dark-70
  • .ods-color-text-blue-dark-70
  • .ods-color-bg-blue-dark-70

blue-dark-60

  • #7f7e9b
  • $blue-dark-60
  • .ods-color-text-blue-dark-60
  • .ods-color-bg-blue-dark-60

blue-dark-50

  • #9493ac
  • $blue-dark-50
  • .ods-color-text-blue-dark-50
  • .ods-color-bg-blue-dark-50

blue-dark-40

  • #aaa9bd
  • $blue-dark-40
  • .ods-color-text-blue-dark-40
  • .ods-color-bg-blue-dark-40

blue-dark-30

  • #bfbfcd
  • $blue-dark-30
  • .ods-color-text-blue-dark-30
  • .ods-color-bg-blue-dark-30

blue-dark-20

  • #d4d4de
  • $blue-dark-20
  • .ods-color-text-blue-dark-20
  • .ods-color-bg-blue-dark-20

blue-dark-10

  • #eaeaee
  • $blue-dark-10
  • .ods-color-text-blue-dark-10
  • .ods-color-bg-blue-dark-10

blue-90

  • #b3f5ff
  • $blue-90
  • .ods-color-text-blue-90
  • .ods-color-bg-blue-90

blue-80

  • #c2f7ff
  • $blue-80
  • .ods-color-text-blue-80
  • .ods-color-bg-blue-80

blue-70

  • #caf8ff
  • $blue-70
  • .ods-color-text-blue-70
  • .ods-color-bg-blue-70

blue-60

  • #d1f9ff
  • $blue-60
  • .ods-color-text-blue-60
  • .ods-color-bg-blue-60

blue-50

  • #d9faff
  • $blue-50
  • .ods-color-text-blue-50
  • .ods-color-bg-blue-50

blue-40

  • #e1fbff
  • $blue-40
  • .ods-color-text-blue-40
  • .ods-color-bg-blue-40

blue-30

  • #e8fcff
  • $blue-30
  • .ods-color-text-blue-30
  • .ods-color-bg-blue-30

blue-20

  • #f0fdff
  • $blue-20
  • .ods-color-text-blue-20
  • .ods-color-bg-blue-20

blue-10

  • #f7feff
  • $blue-10
  • .ods-color-text-blue-10
  • .ods-color-bg-blue-10

blue-light-90

  • #7debff
  • $blue-light-90
  • .ods-color-text-blue-light-90
  • .ods-color-bg-blue-light-90

blue-light-80

  • #8cedff
  • $blue-light-80
  • .ods-color-text-blue-light-80
  • .ods-color-bg-blue-light-80

blue-light-70

  • #9af0ff
  • $blue-light-70
  • .ods-color-text-blue-light-70
  • .ods-color-bg-blue-light-70

blue-light-60

  • #a9f2ff
  • $blue-light-60
  • .ods-color-text-blue-light-60
  • .ods-color-bg-blue-light-60

blue-light-50

  • #b7f4ff
  • $blue-light-50
  • .ods-color-text-blue-light-50
  • .ods-color-bg-blue-light-50

blue-light-40

  • #c5f6ff
  • $blue-light-40
  • .ods-color-text-blue-light-40
  • .ods-color-bg-blue-light-40

blue-light-30

  • #d4f8ff
  • $blue-light-30
  • .ods-color-text-blue-light-30
  • .ods-color-bg-blue-light-30

blue-light-20

  • #e2fbff
  • $blue-light-20
  • .ods-color-text-blue-light-20
  • .ods-color-bg-blue-light-20

blue-light-10

  • #f1fdff
  • $blue-light-10
  • .ods-color-text-blue-light-10
  • .ods-color-bg-blue-light-10

beige-dark-90

  • #d5c5b6
  • $beige-dark-90
  • .ods-color-text-beige-dark-90
  • .ods-color-bg-beige-dark-90

beige-dark-80

  • #d9ccbe
  • $beige-dark-80
  • .ods-color-text-beige-dark-80
  • .ods-color-bg-beige-dark-80

beige-dark-70

  • #ded2c6
  • $beige-dark-70
  • .ods-color-text-beige-dark-70
  • .ods-color-bg-beige-dark-70

beige-dark-60

  • #e3d9ce
  • $beige-dark-60
  • .ods-color-text-beige-dark-60
  • .ods-color-bg-beige-dark-60

beige-dark-50

  • #e7dfd6
  • $beige-dark-50
  • .ods-color-text-beige-dark-50
  • .ods-color-bg-beige-dark-50

beige-dark-40

  • #ece5df
  • $beige-dark-40
  • .ods-color-text-beige-dark-40
  • .ods-color-bg-beige-dark-40

beige-dark-30

  • #f1ece7
  • $beige-dark-30
  • .ods-color-text-beige-dark-30
  • .ods-color-bg-beige-dark-30

beige-dark-20

  • #f6f2ef
  • $beige-dark-20
  • .ods-color-text-beige-dark-20
  • .ods-color-bg-beige-dark-20

beige-dark-10

  • #faf9f7
  • $beige-dark-10
  • .ods-color-text-beige-dark-10
  • .ods-color-bg-beige-dark-10

beige-90

  • #f9f1e0
  • $beige-90
  • .ods-color-text-beige-90
  • .ods-color-bg-beige-90

beige-80

  • #f9f3e4
  • $beige-80
  • .ods-color-text-beige-80
  • .ods-color-bg-beige-80

beige-70

  • #faf5e7
  • $beige-70
  • .ods-color-text-beige-70
  • .ods-color-bg-beige-70

beige-60

  • #fbf6eb
  • $beige-60
  • .ods-color-text-beige-60
  • .ods-color-bg-beige-60

beige-50

  • #fbf7ee
  • $beige-50
  • .ods-color-text-beige-50
  • .ods-color-bg-beige-50

beige-40

  • #fcf9f1
  • $beige-40
  • .ods-color-text-beige-40
  • .ods-color-bg-beige-40

beige-30

  • #fdfbf5
  • $beige-30
  • .ods-color-text-beige-30
  • .ods-color-bg-beige-30

beige-20

  • #fefcf8
  • $beige-20
  • .ods-color-text-beige-20
  • .ods-color-bg-beige-20

beige-10

  • #fefefc
  • $beige-10
  • .ods-color-text-beige-10
  • .ods-color-bg-beige-10

green-dark-90

  • #1c5d58
  • $green-dark-90
  • .ods-color-text-green-dark-90
  • .ods-color-bg-green-dark-90

green-dark-80

  • #356f6a
  • $green-dark-80
  • .ods-color-text-green-dark-80
  • .ods-color-bg-green-dark-80

green-dark-70

  • #4f817d
  • $green-dark-70
  • .ods-color-text-green-dark-70
  • .ods-color-bg-green-dark-70

green-dark-60

  • #68938f
  • $green-dark-60
  • .ods-color-text-green-dark-60
  • .ods-color-bg-green-dark-60

green-dark-50

  • #81a5a2
  • $green-dark-50
  • .ods-color-text-green-dark-50
  • .ods-color-bg-green-dark-50

green-dark-40

  • #9ab7b5
  • $green-dark-40
  • .ods-color-text-green-dark-40
  • .ods-color-bg-green-dark-40

green-dark-30

  • #b3c9c7
  • $green-dark-30
  • .ods-color-text-green-dark-30
  • .ods-color-bg-green-dark-30

green-dark-20

  • #cdddda
  • $green-dark-20
  • .ods-color-text-green-dark-20
  • .ods-color-bg-green-dark-20

green-dark-10

  • #e6edec
  • $green-dark-10
  • .ods-color-text-green-dark-10
  • .ods-color-bg-green-dark-10

green-90

  • #56f9bd
  • $green-90
  • .ods-color-text-green-90
  • .ods-color-bg-green-90

green-80

  • #69f9c5
  • $green-80
  • .ods-color-text-green-80
  • .ods-color-bg-green-80

green-70

  • #7bfacc
  • $green-70
  • .ods-color-text-green-70
  • .ods-color-bg-green-70

green-60

  • #8efbd3
  • $green-60
  • .ods-color-text-green-60
  • .ods-color-bg-green-60

green-50

  • #a1fbda
  • $green-50
  • .ods-color-text-green-50
  • .ods-color-bg-green-50

green-40

  • #b4fce2
  • $green-40
  • .ods-color-text-green-40
  • .ods-color-bg-green-40

green-30

  • #c7fde9
  • $green-30
  • .ods-color-text-green-30
  • .ods-color-bg-green-30

green-20

  • #d9fef0
  • $green-20
  • .ods-color-text-green-20
  • .ods-color-bg-green-20

green-10

  • #ecfef8
  • $green-10
  • .ods-color-text-green-10
  • .ods-color-bg-green-10

green-light-90

  • #cdf7ce
  • $green-light-90
  • .ods-color-text-green-light-90
  • .ods-color-bg-green-light-90

green-light-80

  • #d2f8d4
  • $green-light-80
  • .ods-color-text-green-light-80
  • .ods-color-bg-green-light-80

green-light-70

  • #d8f9d9
  • $green-light-70
  • .ods-color-text-green-light-70
  • .ods-color-bg-green-light-70

green-light-60

  • #ddfade
  • $green-light-60
  • .ods-color-text-green-light-60
  • .ods-color-bg-green-light-60

green-light-50

  • #e3fae4
  • $green-light-50
  • .ods-color-text-green-light-50
  • .ods-color-bg-green-light-50

green-light-40

  • #e9fbe9
  • $green-light-40
  • .ods-color-text-green-light-40
  • .ods-color-bg-green-light-40

green-light-30

  • #eefcef
  • $green-light-30
  • .ods-color-text-green-light-30
  • .ods-color-bg-green-light-30

green-light-20

  • #f4fdf4
  • $green-light-20
  • .ods-color-text-green-light-20
  • .ods-color-bg-green-light-20

green-light-10

  • #f9fefa
  • $green-light-10
  • .ods-color-text-green-light-10
  • .ods-color-bg-green-light-10

yellow-90

  • #facc7a
  • $yellow-90
  • .ods-color-text-yellow-90
  • .ods-color-bg-yellow-90

yellow-80

  • #fad189
  • $yellow-80
  • .ods-color-text-yellow-80
  • .ods-color-bg-yellow-80

yellow-70

  • #fbd797
  • $yellow-70
  • .ods-color-text-yellow-70
  • .ods-color-bg-yellow-70

yellow-60

  • #f7d9a2
  • $yellow-60
  • .ods-color-text-yellow-60
  • .ods-color-bg-yellow-60

yellow-50

  • #ffe7bc
  • $yellow-50
  • .ods-color-text-yellow-50
  • .ods-color-bg-yellow-50

yellow-40

  • #fde8c4
  • $yellow-40
  • .ods-color-text-yellow-40
  • .ods-color-bg-yellow-40

yellow-30

  • #fdeed3
  • $yellow-30
  • .ods-color-text-yellow-30
  • .ods-color-bg-yellow-30

yellow-20

  • #fef4e1
  • $yellow-20
  • .ods-color-text-yellow-20
  • .ods-color-bg-yellow-20

yellow-10

  • #fef9f0
  • $yellow-10
  • .ods-color-text-yellow-10
  • .ods-color-bg-yellow-10

red-90

  • #ff8f82
  • $red-90
  • .ods-color-text-red-90
  • .ods-color-bg-red-90

red-80

  • #ff9b90
  • $red-80
  • .ods-color-text-red-80
  • .ods-color-bg-red-80

red-70

  • #ffa89e
  • $red-70
  • .ods-color-text-red-70
  • .ods-color-bg-red-70

red-60

  • #ffb4ac
  • $red-60
  • .ods-color-text-red-60
  • .ods-color-bg-red-60

red-50

  • #ffc0b9
  • $red-50
  • .ods-color-text-red-50
  • .ods-color-bg-red-50

red-40

  • #ffcdc7
  • $red-40
  • .ods-color-text-red-40
  • .ods-color-bg-red-40

red-30

  • #ffdfdc
  • $red-30
  • .ods-color-text-red-30
  • .ods-color-bg-red-30

red-20

  • #ffeae8
  • $red-20
  • .ods-color-text-red-20
  • .ods-color-bg-red-20

red-10

  • #fff3f1
  • $red-10
  • .ods-color-text-red-10
  • .ods-color-bg-red-10