<aside>

This is not finished; for some background-colors, Notion applies an extremely subtle color to the text as well. But for most use cases, it’s pretty complete.

I use these colors to generate documentation for the database properties in my Notion templates – e.g.: https://thomasjfrank.com/docs/creators-companion/databases/content/#status

</aside>

Official colors, pulled from source code September 1, 2024:

• Light gray:
  • Light Mode BG: rgba(227, 226, 224, 0.5)
    • Text Color: rgb(50, 48, 44)
  • Dark Mode BG: rgb(55, 55, 55)
    • Color: rgba(255, 255, 255, 0.804)
  • Light Mode Text (Default block coloring):
  • Dark Mode Text: (Default block coloring)
• Gray:
  • Light Mode BG: rgb(227, 226, 224)
  • Dark Mode BG: rgb(90, 90, 90)
  • Light Mode text: rgba(120, 119, 116, 1)
  • Dark Mode text: rgba(155, 155, 155, 1)
  • Light Mode Text Highlight Background: rgba(241, 241, 239, 1)
  • Light Mode Block Highlight Background: rgb(241, 241, 239)
• Brown:
  • Light Mode BG: rgb(238, 224, 218)
  • Dark Mode BG: rgb(96, 59, 44)
  • Light Mode text: rgba(159, 107, 83, 1)
  • Dark Mode text: rgba(186, 133, 111, 1)
  • Light Mode Text Highlight Background: rgba(244, 238, 238, 1)
  • Light Mode Block Highlight Background: rgb(244, 238, 238)
• Orange:
  • Light Mode BG: rgb(250, 222, 201)
  • Dark Mode BG: rgb(133, 76, 29)
  • Light Mode text: rgba(217, 115, 13, 1)
  • Dark Mode text: rgba(199, 125, 72, 1)
• Yellow:
  • Light Mode BG: rgb(249, 228, 188)
  • Dark Mode BG: rgb(131, 94, 51)
  • Light Mode text: rgba(203, 145, 47, 1)
  • Dark Mode text: rgba(202, 152, 73, 1)
• Green:
  • Light Mode BG: rgb(219, 237, 219)
  • Dark Mode BG: rgb(43, 89, 63)
  • Light Mode text: rgba(68, 131, 97, 1)
  • Dark Mode text: rgba(82, 158, 114, 1)
• Blue:
  • Light Mode BG: rgb(211, 229, 239)
    • Text: rgb(24, 51, 71)
  • Dark Mode BG: rgb(40, 69, 108)
  • Light Mode text: rgba(51, 126, 169, 1)
  • Dark Mode text: rgba(94, 135, 201, 1)
• Purple:
  • Light Mode BG: rgb(232, 222, 238)
  • Dark Mode BG: rgb(73, 47, 100)
  • Light Mode text: rgba(144, 101, 176, 1)
  • Dark Mode text: rgba(157, 104, 211, 1)
  • Light Mode Block Highlight Background: rgba(244, 240, 247, 0.8)
• Pink:
  • Light Mode BG: rgb(245, 224, 233)
  • Dark Mode BG: rgb(105, 49, 76)
  • Light Mode text: rgba(193, 76, 138, 1)
  • Dark Mode text: rgba(209, 87, 150, 1)
• Red:
  • Light Mode BG: rgb(255, 226, 221)
  • Dark Mode BG: rgb(110, 54, 48)
  • Light Mode text: rgba(212, 76, 71, 1)
  • Dark Mode text: rgba(223, 84, 82, 1