Notion colors

Notion colors

Notion colors

In the tables below you can find a list of all the colors used in Notion along with their associated CSS variables

Customizing colors in your Super site

In order to change colors on your site, you will need to add some custom code to your Super site using the CSS variables from the tables below. To do that, head to your site settings, into the Code page and then into the CSS tab.

  1. In the Code area create a new CSS declaration using the :root selector
  2. Use CSS variables from the tables below to target the colors your want to change
  3. Apply your new HEX or RGB value

The example below would change the default text and background colors:

:root {
	--color-text-default: #ffffff!important;
	--color-bg-default: #f5c579!important;
}
Changing the default colors with CSS variables
Changing the default colors with CSS variables

Light mode colors

Light Mode

NameTextBGSelectText ColorBG ColorSelect ColorText CSS VariableBG CSS VariableSelect 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

Dark Mode

NameTextBGSelectText ColorBG ColorSelect ColorText CSS VariableBG CSS VariableSelect 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