/
...
/
/
🎨
Compilation of ways to make your Notion page more vibrant.
Edit
Search
Try Notion
🎨

Compilation of ways to make your Notion page more vibrant.

tags
notion
authors
Khương Lữ Minh
description
More advanced ways to customize your Notion pages
featured
language
en
published
01/05/2023
slug
notion_color
status
Published
views
3

TEXT FORMAT

Decoration with colored fonts

Plain Text
Copy
$$\color{#ced2af}{Hello}$$
Hello\color{#ced2af}{Hello}
Formula: $$ \ color {Color code} {Word} $$
To create a space between 2 inserted sentences, use a backslash \
Plain Text
Copy
$$\color{#ced2af}{Good\ morning}$$
Good morning\color{#ced2af}{Good\ morning}

Textbox decoration

Plain Text
Copy
$$\colorbox{#ced2af}{Hello}$$
Hello\colorbox{#919f89}{Hello}
Formula: $$ \ colorbox {Color code} {Word} $$

Text decoration và texbox

Plain Text
Copy
$$\color{#ffffff}\colorbox{#ced2af}{Hello}$$
Hello\color{#ffffff}\colorbox{#ced2af}{Hello}
Formula: $$ \ color {Color code} \ colorbox {Color code} {Word} $$

Combine both decorations

Plain Text
Copy
$$\colorbox{f7c2d6}{\color{ffffff}{Good}}\color{c3bbec}\text{morning}$$
Goodmorning\colorbox{f7c2d6}{\color{ffffff}{Good}}\color{c3bbec}\text{morning}
Formula: $$ \ colorbox {Color code} {\ color {Color code} {Word} } \ color {Color code} \ text {Word} $$

FONT FORMAT

Machine style (Monospace) (textTT)

Plain Text
Copy
$$\color{000000}\texttt{hello}$$
hello\color{000000}\texttt{hello}
Formula: $$ \ color {Color code} \ texttt {Word} $$

Sans-serif style (textSF)

Plain Text
Copy
$$\color{000000}\textsf{hello}$$
hello\color{000000}\textsf{hello}
Công thức: $$ \ color {Mã màu} \ textsf {Chữ} $$

Serif font (roman) (textRM)

Plain Text
Copy
$$\color{000000}\textrm{hello}$$
hello\color{000000}\textrm{hello}
Formula: $$ \ color {Color code} \ textrm {Word} $$

Bold style (textBF)

Plain Text
Copy
$$\color{000000}\textbf{hello}$$
hello\color{000000}\textbf{hello}
Formula: $$ \ color {Color code} \ textbf {Word} $$

Medium style (textMD)

Plain Text
Copy
$$\color{000000}\textmd{hello}$$
hello\color{000000}\textmd{hello}
Formula: $$ \ color {Color code} \ textmd {Word} $$

Up style (textUP)

Plain Text
Copy
$$\color{000000}\textup{hello}$$
hello\color{000000}\textup{hello}
Formula: $$ \ color {Color code} \ textup {Word} $$

Italic style (textIT)

Plain Text
Copy
$$\color{000000}\textit{hello}$$
hello\color{000000}\textit{hello}
Formula: $$ \ color {Color code} \ textit {Word} $$

Combine with text box style (textRM)

Plain Text
Copy
$$\colorbox{c3bbec}{\color{ffffff}\texttt{hello}}$$
hello\colorbox{c3bbec}{\color{ffffff}\texttt{hello}}
Formula: $$ \ colorbox {Color code} {\ color {Code code} \ font code (VD:texttt) {Word} $$

TEXT SIZE

Formula: $$ \ color {Color code} \ Size \ text {Word} $$
Plain Text
Copy
$$\color{000000}\Size\text{hello}$$
Here is a list of font sizes. Some sizes may seem similar, but capitalizing the size names can make the text appear bigger (eg: the "Huge" size is bigger than the "huge" size), so please pay attention to capitalizing the size names as shown below
tiny\color{000000}\tiny\text{tiny}
scriptsize\color{000000}\scriptsize\text{scriptsize}
footnotesize\color{000000}\footnotesize\text{footnotesize}
small\color{000000}\small\text{small}
normalsize\color{000000}\normalsize\text{normalsize}
large\color{000000}\large\text{large}
Large\color{000000}\Large\text{Large}
LARGE\color{000000}\LARGE\text{LARGE}
huge\color{000000}\huge\text{huge}
Huge\color{000000}\Huge\text{Huge}

ADVANCE COMBINATION

Change the color of each letter

Plain Text
Copy
$$\Huge\text{\color{4231d6}h} {\color{3950d7}e} {\color{2c76cf}l} {\color{2291c9}l} {\color{1ba6c5}o} {\color{0ecbbc}o} {\color{66ecbb}o}$$
hellooo\huge\text{\color{4231d6}h} {\color{3950d7}e} {\color{2c76cf}l} {\color{2291c9}l} {\color{1ba6c5}o} {\color{0ecbbc}o} {\color{66ecbb}o}
Formula: $$ \ Size (can remove if not like) \ text { \ color {Color code} letter } \ text { \ color {Color code} letter } \ text { \ color {Color code} letter } $$ Shift + enter to break the line, simply copy the code and change the color code letters to match your own. To create spaces, add \ + space.
And create text in the middle of the page to use as a title: /block equation and then enter the desired text or any formatting code you wish to use.
hellooo\Huge\text{\color{4231d6}h}{\color{3950d7}e}{\color{2c76cf}l}{\color{2291c9}l}{\color{1ba6c5}o}{\color{0ecbbc}o}{\color{66ecbb}o}

To display a small square in front to the text

Plain Text
Copy
$$\colorbox{pink}\Huge\text{hello}$$
hello\colorbox{pink}\Huge\text{hello}
Formula: $$ \ colorbox {Color code} \ size \ style {word} $$

Huge headline

Plain Text
Copy
$$\colorbox{pink}{\Huge\texttt{hello}}$$
hello\colorbox{pink}{\Huge\texttt{hello}}
Formula: $$ \ colorbox {Color code} \ { size \ style {word} } $$

Huge headline (another version)

Plain Text
Copy
$$\colorbox{pink} {$\begin{matrix}\Huge\texttt{hello}\\\end{matrix}$}$$
hello\colorbox{pink} {$\begin{matrix}\Huge\texttt{hello}\\\end{matrix}$}
Formula: $$ \ colorbox {Color code} { $ \ begin {matrix} \ size \ style {word} \\\ end {matrix} $ } $$

Huge headline with line break within the color box

Plain Text
Copy
$$\colorbox{pink} {$\begin{matrix}\Huge\texttt{hello}\\\huge\texttt{hello}\\\Large\texttt{hello}\end{matrix}$}$$
hellohellohello\colorbox{pink} {$\begin{matrix}\Huge\texttt{hello}\\\huge\texttt{hello}\\\Large\texttt{hello}\end{matrix}$}
Formula: $$ \ colorbox {Color code} { $ \ begin {matrix} \ size \ style {word} \\ \ size \ style {word} \\ \ end {matrix} $ } $$ Just need to copy and paste the bold line in order to add many new lines as possible

Huge headline with line break within the color box and multiple colors

Plain Text
Copy
$$\colorbox{pink} {$\begin{matrix}\Huge\texttt{\color{ffffff}hello}\\\huge\texttt{\color{4231d6}hello}\\\Large\texttt{\color{red}hello}\end{matrix}$}$$
hellohellohello\colorbox{pink} {$\begin{matrix}\Huge\texttt{\color{ffffff}hello}\\\huge\texttt{\color{4231d6}hello}\\\Large\texttt{\color{red}hello}\end{matrix}$}
Formula: $$ \ colorbox {Color code} { $ \ begin {matrix} \ size \ style { \ color {Color code} word} \\ \ size \ style { \ color {Color code} word} \\ \ end {matrix} $ } $$ Just need to copy and paste the bold line in order to add many new lines