In the tables below you can find a list of all the colors used in Notion along with their associated CSS variables.
Light mode colors
Name | Text | BG | Select | Text Color | BG Color | Select Color | Text CSS Variable | BG CSS Variable | Select CSS Variable |
|---|---|---|---|---|---|---|---|---|---|
Default | Default | Default | #37352F | #FFFFFF | 206,205,202,0.5 | --color-text-default | --color-bg-default | --color-pill-default | |
Gray | Gray |
| Gray | #9B9A97 | #EBECED | 155,154,151,0.4 | --color-text-gray | --color-bg-gray | --color-pill-gray |
Brown | Brown |
| Brown | #64473A | #E9E5E3 | 140,46,0,0.2 | --color-text-brown | --color-bg-brown | --color-pill-brown |
Orange | Orange |
| Orange | #D9730D | #FAEBDD | 245,93,0,0.2 | --color-text-orange | --color-bg-orange | --color-pill-orange |
Yellow | Yellow |
| Yellow | #DFAB01 | #FBF3DB | 233,168,0,0.2 | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
Green | Green |
| Green | #0F7B6C | #DDEDEA | 0,135,107,0.2 | --color-text-green | --color-bg-green | --color-pill-green |
Blue | Blue |
| Blue | #0B6E99 | #DDEBF1 | 0,120,223,0.2 | --color-text-blue | --color-bg-blue | --color-pill-blue |
Purple | Purple |
| Purple | #6940A5 | #EAE4F2 | 103,36,222,0.2 | --color-text-purple | --color-bg-purple | --color-pill-purple |
Pink | Pink |
| Pink | #AD1A72 | #F4DFEB | 221,0,129,0.2 | --color-text-pink | --color-bg-pink | --color-pill-pink |
Red | Red |
| Red | #E03E3E | #FBE4E4 | 255,0,26,0.2 | --color-text-red | --color-bg-red | --color-pill-red |
Dark mode colors
Name | Text | BG | Select | Text Color | BG Color | Select Color | Text CSS Variable | BG CSS Variable | Select CSS Variable |
|---|---|---|---|---|---|---|---|---|---|
Default | Default | Default | 255,255,255,0.9 | #2F3437 | 206,205,202,0.5 | --color-text-default | --color-bg-default | --color-pill-default | |
Gray | Gray |
| Gray | 151,154,155,0.95 | #454B4E | 151,154,155,0.5 | --color-text-gray | --color-bg-gray | --color-pill-gray |
Brown | Brown |
| Brown | #937264 | #434040 | 147,114,100,0.5 | --color-text-brown | --color-bg-brown | --color-pill-brown |
Orange | Orange |
| Orange | #FFA344 | #594A3A | 255,163,68,0.5 | --color-text-orange | --color-bg-orange | --color-pill-orange |
Yellow | Yellow |
| Yellow | #FFDC49 | #59563B | 255,220,73,0.5 | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
Green | Green |
| Green | #4DAB9A | #354C4B | 77,171,154,0.5 | --color-text-green | --color-bg-green | --color-pill-green |
Blue | Blue |
| Blue | #529CCA | #364954 | 82,156,202,0.5 | --color-text-blue | --color-bg-blue | --color-pill-blue |
Purple | Purple |
| Purple | #9A6DD7 | #443F57 | 154,109,215,0.5 | --color-text-purple | --color-bg-purple | --color-pill-purple |
Pink | Pink |
| Pink | #E255A1 | #533B4C | 226,85,161,0.5 | --color-text-pink | --color-bg-pink | --color-pill-pink |
Red | Red |
| Red | #FF7369 | #594141 | 255,115,105,0.5 | --color-text-red | --color-bg-red | --color-pill-red |