Notion Colors 🎨 Generator
Type your Text and pick a Color to get your Code!
Generate Custom Colors for your Notion Workspace in Seconds
Preview
100+ Satifised Users generating Notion Colors Daily
Discover the Magic of Notion Custom Colors
Your Notion workspace is more than just a collection of pages—it’s a reflection of your creativity, organization, and personality. With Notion Custom Colors, you can break free from the standard palette and design a workspace that’s as unique as your ideas.
Whether you’re highlighting key points in bold, vibrant hues or creating a calming, minimalist backdrop for deep work, custom colors can transform your Notion experience.
Simple, Intuitive, and Unlimited
With our easy-to-use tools, you can generate HEX based text and background colors in seconds. Just pick your color, copy the code, and paste it into your Notion page. It’s that easy!
Ready to elevate your Notion game? Start exploring the endless possibilities of Notion Custom Colors today and bring your ideas to life with style and impact.
How to Use the Notion Color Tool
Text Input & Color Pickers
Users enter the desired text.
Select a foreground (text) color and a background color using modern color picker input.
Preview & Generate the Code
Preview the selected text color and background. So that you can get the output live.
Then just click the Generate Color Code button to get your desired code.
Copy Code & Reset Button
After generating the code just simply click the “copy code” button to copy the code.
And after getting the color you can reset the previous selected text and colors just click on “reset colors” button. If still you need more guidance then explore this tool guide blog
Light and Dark Mode Notion Colors Table
In the tables below, you’ll find a comprehensive list of all the colors used in Notion, complete with their associated CSS variables. These tables are divided into Light Mode Colors and Dark Mode Colors to reflect the different themes used in Notion. Each entry includes the name of the color, its text and background colors, as well as the corresponding CSS variables for easy reference and customization.
Light mode colors
| Name | Text Color | Background Color | Select Color | Text CSS Variable | Background CSS Variable | Select CSS Variable |
|---|---|---|---|---|---|---|
| Default | #37352F | #FFFFFF | Default | --color-text-default | --color-bg-default | --color-pill-default |
| Gray | #9B9A97 | #EBECED | Gray | --color-text-gray | --color-bg-gray | --color-pill-gray |
| Brown | #64473A | #E9E5E3 | Brown | --color-text-brown | --color-bg-brown | --color-pill-brown |
| Orange | #D9730D | #FAEBDD | Orange | --color-text-orange | --color-bg-orange | --color-pill-orange |
| Yellow | #DFAB01 | #FBF3DB | Yellow | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
| Green | #0F7B6C | #DDEDEA | Green | --color-text-green | --color-bg-green | --color-pill-green |
| Blue | #0B6E99 | #DDEBF1 | Blue | --color-text-blue | --color-bg-blue | --color-pill-blue |
| Purple | #6940A5 | #EAE4F2 | Purple | --color-text-purple | --color-bg-purple | --color-pill-purple |
| Pink | #AD1A72 | #F4DFEB | Pink | --color-text-pink | --color-bg-pink | --color-pill-pink |
| Red | #E03E3E | #FBE4E4 | Red | --color-text-red | --color-bg-red | --color-pill-red |
Dark mode colors
| Name | Text Color | Background Color | Select Color | Text CSS Variable | Background CSS Variable | Select CSS Variable |
|---|---|---|---|---|---|---|
| Default | 255, 255, 255 | #2F3437 | Default | --color-text-default | --color-bg-default | --color-pill-default |
| Gray | 151, 154, 155 | #454B4E | Gray | --color-text-gray | --color-bg-gray | --color-pill-gray |
| Brown | 193, 183, 176 | #3F3A36 | Brown | --color-text-brown | --color-bg-brown | --color-pill-brown |
| Orange | 223, 148, 61 | #4F3B2E | Orange | --color-text-orange | --color-bg-orange | --color-pill-orange |
| Yellow | 223, 171, 1 | #4A4528 | Yellow | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
| Green | 15, 123, 108 | #20332F | Green | --color-text-green | --color-bg-green | --color-pill-green |
| Blue | 11, 110, 153 | #1F343E | Blue | --color-text-blue | --color-bg-blue | --color-pill-blue |
| Purple | 105, 64, 165 | #2B2538 | Purple | --color-text-purple | --color-bg-purple | --color-pill-purple |
| Pink | 173, 26, 114 | #3E2A38 | Pink | --color-text-pink | --color-bg-pink | --color-pill-pink |
| Red | 224, 62, 62 | #3C2222 | Red | --color-text-red | --color-bg-red | --color-pill-red |
Notion Colors Light mode:
Default Color
Text: #37352F - Background: #FFFFFF
Gray Color
Text: #9B9A97 - Background: #EBECED
Red Color
Text: #E03E3E - Background: #FBE4E4
Pink Color
Text: #AD1A72 - Background: #F4DFEB
Purple Color
Text: #6940A5 - Background: #EAE4F2
Blue Color
Text: #0B6E99 - Background: #DDEBF1
Green Color
Text: #0F7B6C - Background: #DDEDEA
Yellow Color
Text: #DFAB01 - Background: #FBF3DB
Orange Color
Text: #D9730D - Background: #FAEBDD
Brown Color
Text: #64473A - Background: #E9E5E3
Notion Colors Dark mode:
Default Color
Text: #37352F - Background: #FFFFFF
Gray Color
Text: #979A9B - Background: #454B4E
Red Color
Text: #FF7369 - Background: #594141
Pink Color
Text: #E255A1 - Background: #533B4C
Purple Color
Text: #9A6DD7 - Background: #443F57
Blue Color
Text: #529CCA - Background: #364954
Green Color
Text: #4DAB9A - Background: #354C4B
Yellow Color
Text: #FFDC49 - Background: #59563B
Orange Color
Text: #FFA344 - Background: #594A3A
Brown Color
Text: #937264 - Background: #434040
Notion Colors Tool FAQ
What is the Notion Colors Tool?
This tool allows users to customize text and background colors in Notion by generating specific color codes, providing more control over visual styling within their Notion workspace.
How can I use this tool to change text color in Notion?
With the Notion Colors Tool, you can generate a custom color code, then copy the code and paste the code into Notion to enhance your text color customization beyond default options.
Can I set custom background colors in Notion using the Notion Colors Tool?
Yes, the Notion Colors Tool allows you to generate custom background colors. After generating the color code, you can apply it in Notion for a unique background color.
Does the Tool allow me to preview colors before applying them in Notion?
Yes, the Notion Colors Tool provides a live preview of the selected text and background colors, allowing you to see how your customized colors will look before applying them in Notion.
Can I generate a hex code for colors using the Notion Colors Tool?
Absolutely! The Notion Colors Tool generates hex codes for both text and background colors, making it easy to copy and use those codes directly in Notion.
How to get more colors on Notion?
In Notion Colors Tool you can customize your text color and background color. Notion has limited color option but in this tool you will get unlimited colors option. Just type your text then select your desired color and click on generate button. Great you just get your code. Now copy this code in your Notion Design. Enjoy your designing…
How to change the color of a Notion?
How to Change Color in Notion:
Text Color:
> Select the text.
> Right-click or click the text color option in the toolbar.
> Choose your desired color.
Background Color:
> Select the text or block.
> Right-click or click the background color option.
> Choose your desired background color.
If you want to add custom color on text and background then try Notion Colors Free Tool.
How can I apply custom color formulas in Notion for text and backgrounds?
You can apply custom colors in Notion by using HTML-style color codes through external tools or custom code. Unfortunately, Notion doesn’t natively support entering custom color codes directly. However, you can use tools like custom Notion colors tool to generate specific text and background colors. Here’s how:
> Go to the tool and input your desired custom hex color code.
> Copy the generated text or background styling code.
> Paste the code into Notion to apply the custom color.
This allows more flexibility beyond Notion’s default color palette!
Can I Use Hex Codes to Change Colors in Notion?
No, Notion doesn’t natively support hex codes for text or background color customization. You can only choose from the predefined color options in the editor. However, you can use external tools or custom scripts to generate and apply custom color codes for advanced styling.
Here is a free tool available. You can check this Notion Colors Tool.
How can I use a shortcut to change text color in Notion?
To quickly change text color in Notion, type text color: <color-name> after selecting your text. You can also use the /color command to open a menu with color options.
Simply can use Notion Colors Tool to generate code for your text color and background.