Shared @June 9, 2020
There are strictly 10 colors available on Notion.
This is because Ivan Zhao, Notion's CEO, is anecdotally known to be extremely selective when it comes to the platform’s design and especially, the colors.
As with most things on Notion, I am constantly finding myself wanting to "borrow" that sense of taste. I got tired of going to Notion with a color picker tool, so I decided to compile a public database of the colors and codes in case any designers want that as well.
You can find that below and copy to your workspace here.
| Name | Text | Background | Select | Text LM (Hex) | Text LM (RGB) | Text DM (Hex) | Text DM (RGB) | BG LM (Hex) | BG LM (RGB) | BG DM (Hex) | BG DM (RGB) | Select LM (Hex) | Select LM (RGB) | Select DM (Hex) | Select DM (RGB) | Text LM | Text DM | BG LM | BG DM | Select LM | Select DM |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Default | Default | Default | 37352F | 55,53,47 | FFFFFF (90%) | 255,255,255,0.9 | FFFFFF | 255,255,255 | 2F3437 | 47,52,55 | CECDCA (50%) | 206,205,202,0.5 | 505558 | 80,85,88 | |||||||
Gray | Gray | | Gray | 9B9A97 | 155,154,151 | 979A9B (95%) | 151,154,155,0.95 | EBECED | 235,236,237 | 454B4E | 69,75,78 | 9B9A97 (40%) | 155,154,151,0.4 | 979A9B (50%) | 151,154,155,0.5 | ||||||
Brown | Brown | | Brown | 64473A | 100,71,58 | 937264 | 147,114,100 | E9E5E3 | 233,229,227 | 434040 | 67,64,64 | 8C2E00 (20%) | 140,46,0,0.2 | 937264 (50%) | 147,114,100,0.5 | ||||||
Orange | Orange | | Orange | D9730D | 217,115,13 | FFA344 | 255,163,68 | FAEBDD | 250,235,221 | 594A3A | 89,74,58 | F55D00 (20%) | 245,93,0,0.2 | FFA344 (50%) | 255,163,68,0.5 | ||||||
Yellow | Yellow | | Yellow | DFAB01 | 223,171,1 | FFDC49 | 255,220,73 | FBF3DB | 251,243,219 | 59563B | 89,86,59 | E9A800 (20%) | 233,168,0,0.2 | FFDC49 (50%) | 255,220,73,0.5 | ||||||
Green | Green | | Green | 0F7B6C | 15,123,108 | 4DAB9A | 77,171,154 | DDEDEA | 221,237,234 | 354C4B | 53,76,75 | 00876B (20%) | 0,135,107,0.2 | 4DAB9A (50%) | 77,171,154,0.5 | ||||||
Blue | Blue | | Blue | 0B6E99 | 11,110,153 | 529CCA | 82,156,202 | DDEBF1 | 221,235,241 | 364954 | 54,73,84 | 0078DF (20%) | 0,120,223,0.2 | 529CCA (50%) | 82,156,202,0.5 | ||||||
Purple | Purple | | Purple | 6940A5 | 105,64,165 | 9A6DD7 | 154,109,215 | EAE4F2 | 234,228,242 | 443F57 | 68,63,87 | 6724DE (20%) | 103,36,222,0.2 | 9A6DD7 (50%) | 154,109,215,0.5 | ||||||
Pink | Pink | | Pink | AD1A72 | 173,26,114 | E255A1 | 226,85,161 | F4DFEB | 244,223,235 | 533B4C | 83,59,76 | DD0081 (20%) | 221,0,129,0.2 | E255A1 (50%) | 226,85,161,0.5 | ||||||
Red | Red | | Red | E03E3E | 224,62,62 | FF7369 | 255,115,105 | FBE4E4 | 251,228,228 | 594141 | 89,65,65 | FF001A (20%) | 255,0,26,0.2 | FF7369 (50%) | 255,115,105,0.5 |
Want to get more Notion content like this? Join our newsletter below 👇
super-embed:<div class="elfsight-app-4524ae4d-912d-42f8-a230-503b55ed840e"></div>