Getting started
Creating a site
Site pages
How Super worksCustomize your site
Site options
Custom domain
Site design
SEO options
Manual Publishing
Additional Features
Super Analytics
Extensions
Code Snippets
Using a templateAdvanced
Custom code
Creating a template
Template Starter Kit
Template Guidelines
Cloudflare proxyReference
Compatible blocks
Notion colors
Super CSS Classes
Product RoadmapNotion 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
:rootselector - 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;
}.gif?w=1950)
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
Next →