Optemization ⚡
Notion Colors

Notion Colors

Shared Jun 9, 2020

Ivan Zhao, Notion's CEO, is known to be highly selective of the colors available on the platform. 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.

Update Jun 10, 2020: This resource was improved by a fellow Notion community member, Ben Smith, who added dark mode variants and much more 👇

Notion Colours

NameTextBackgroundSelectText 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 LMText DMBG LMBG DMSelect LMSelect DM
iconDefaultDefaultDefault37352F55,53,47FFFFFF (90%)255,255,255,0.9FFFFFF255,255,2552F343747,52,55CECDCA (50%)206,205,202,0.550555880,85,88Default.svgDefault.svgDefault.svgDefault.svgDefault.svgDefault.svg
iconGrayGray Gray9B9A97155,154,151979A9B (95%)151,154,155,0.95EBECED235,236,237454B4E69,75,789B9A97 (40%)155,154,151,0.4979A9B (50%)151,154,155,0.5Gray.svgGray.svgGray.svgGray.svgGray.svgGray.svg
iconBrownBrown Brown64473A100,71,58937264147,114,100E9E5E3233,229,22743404067,64,648C2E00 (20%)140,46,0,0.2937264 (50%)147,114,100,0.5Brown.svgBrown.svgBrown.svgBrown.svgBrown.svgBrown.svg
iconOrangeOrange OrangeD9730D217,115,13FFA344255,163,68FAEBDD250,235,221594A3A89,74,58F55D00 (20%)245,93,0,0.2FFA344 (50%)255,163,68,0.5Orange.svgOrange.svgOrange.svgOrange.svgOrange.svgOrange.svg
iconYellowYellow YellowDFAB01223,171,1FFDC49255,220,73FBF3DB251,243,21959563B89,86,59E9A800 (20%)233,168,0,0.2FFDC49 (50%)255,220,73,0.5Yellow.svgYellow.svgYellow.svgYellow.svgYellow.svgYellow.svg
iconGreenGreen Green0F7B6C15,123,1084DAB9A77,171,154DDEDEA221,237,234354C4B53,76,7500876B (20%)0,135,107,0.24DAB9A (50%)77,171,154,0.5Green.svgGreen.svgGreen.svgGreen.svgGreen.svgGreen.svg
iconBlueBlue Blue0B6E9911,110,153529CCA82,156,202DDEBF1221,235,24136495454,73,840078DF (20%)0,120,223,0.2529CCA (50%)82,156,202,0.5Blue.svgBlue.svgBlue.svgBlue.svgBlue.svgBlue.svg
iconPurplePurple Purple6940A5105,64,1659A6DD7154,109,215EAE4F2234,228,242443F5768,63,876724DE (20%)103,36,222,0.29A6DD7 (50%)154,109,215,0.5Purple.svgPurple.svgPurple.svgPurple.svgPurple.svgPurple.svg
iconPinkPink PinkAD1A72173,26,114E255A1226,85,161F4DFEB244,223,235533B4C83,59,76DD0081 (20%)221,0,129,0.2E255A1 (50%)226,85,161,0.5Pink.svgPink.svgPink.svgPink.svgPink.svgPink.svg
iconRedRed RedE03E3E224,62,62FF7369255,115,105FBE4E4251,228,22859414189,65,65FF001A (20%)255,0,26,0.2FF7369 (50%)255,115,105,0.5Red.svgRed.svgRed.svgRed.svgRed.svgRed.svg

Need to copy this table to your workspace? Go here 🙌

icon

Back to Optemization.com