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.

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

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

:root {
	--color-text-default: #ffffff;
	--color-bg-default: #f5c579;
}

Changing the default colors with 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

← Previous

Compatible blocks

Super CSS Classes

On this page

Notion colors
Customizing colors in your Super site
Light mode colors
Dark mode colors