Notion Colors include a total of 10 different options with a few shade variations. Here are all the hex codes for Notion Colors — including text colors, background colors, and icon colors — plus a few advanced tips and tricks on how to get custom colors in Notion and how to color elements that don’t seem to have a custom color option.
Notion Colors Hex Codes
Notion uses slightly different color values depending on where the color is applied. Text colors, background colors, and icon colors each have their own set of hex codes. Below you’ll find the complete reference for all three.
Notion Text & Background Colors in Light Mode
If you have set your Notion to Light Mode, these are the hex codes for your Notion text and background colors:
| Name | Text | Background |
|---|---|---|
| Default | #373530 | #FFFFFF |
| Gray | #787774 | #F1F1EF |
| Brown | #976D57 | #F3EEEE |
| Orange | #CC782F | #F8ECDF |
| Yellow | #C29343 | #FAF3DD |
| Green | #548164 | #EEF3ED |
| Blue | #487CA5 | #E9F3F7 |
| Purple | #8A67AB | #F6F3F8 |
| Pink | #B35488 | #F9F2F5 |
| Red | #C4554D | #FAECEC |
Notion Text & Background Colors in Dark Mode
If you have your Notion in Dark Mode, the colors change slightly. Here are the hex codes you should use:
| Name | Text | Background |
|---|---|---|
| Default | #D4D4D4 | #191919 |
| Gray | #9B9B9B | #252525 |
| Brown | #A27763 | #2E2724 |
| Orange | #CB7B37 | #36291F |
| Yellow | #C19138 | #372E20 |
| Green | #4F9768 | #242B26 |
| Blue | #447ACB | #1F282D |
| Purple | #865DBB | #2A2430 |
| Pink | #BA4A78 | #2E2328 |
| Red | #BE524B | #332523 |
Notion Icon Colors in Light Mode
When you change the color of a page icon, database icon, or callout icon in Notion, the hex codes differ from the text and background colors listed above. These icon-specific values are slightly more saturated and vibrant.
Here are the Notion icon color hex codes for Light Mode:
| Name | Icon Hex |
|---|---|
| Default | #55534E |
| Gray | #A6A299 |
| Brown | #9F6B53 |
| Orange | #D87620 |
| Yellow | #CB912F |
| Green | #448361 |
| Blue | #337EA9 |
| Purple | #9065B0 |
| Pink | #C14C8A |
| Red | #D44C47 |
Notion Icon Colors in Dark Mode
In Dark Mode, Notion adjusts icon colors as well. Here are the dark mode hex codes for icon colors:
| Name | Icon Hex |
|---|---|
| Default | #D3D3D3 |
| Gray | #7F7F7F |
| Brown | #AA755F |
| Orange | #D9730D |
| Yellow | #CA8E1B |
| Green | #2D9964 |
| Blue | #2E7CD1 |
| Purple | #8D5BC1 |
| Pink | #C94079 |
| Red | #CD4945 |
All Notion Colors Compared (Light Mode)
If you’re trying to match Notion’s colors in an external tool like Figma, Canva, or your own website, it helps to see all three color types side by side. Here is the full comparison for Light Mode:
| Name | Text | Background | Icon |
|---|---|---|---|
| Default | #373530 | #FFFFFF | #55534E |
| Gray | #787774 | #F1F1EF | #A6A299 |
| Brown | #976D57 | #F3EEEE | #9F6B53 |
| Orange | #CC782F | #F8ECDF | #D87620 |
| Yellow | #C29343 | #FAF3DD | #CB912F |
| Green | #548164 | #EEF3ED | #448361 |
| Blue | #487CA5 | #E9F3F7 | #337EA9 |
| Purple | #8A67AB | #F6F3F8 | #9065B0 |
| Pink | #B35488 | #F9F2F5 | #C14C8A |
| Red | #C4554D | #FAECEC | #D44C47 |
All Notion Colors Compared (Dark Mode)
And here is the same comparison for Dark Mode:
| Name | Text | Background | Icon |
|---|---|---|---|
| Default | #D4D4D4 | #191919 | #D3D3D3 |
| Gray | #9B9B9B | #252525 | #7F7F7F |
| Brown | #A27763 | #2E2724 | #AA755F |
| Orange | #CB7B37 | #36291F | #D9730D |
| Yellow | #C19138 | #372E20 | #CA8E1B |
| Green | #4F9768 | #242B26 | #2D9964 |
| Blue | #447ACB | #1F282D | #2E7CD1 |
| Purple | #865DBB | #2A2430 | #8D5BC1 |
| Pink | #BA4A78 | #2E2328 | #C94079 |
| Red | #BE524B | #332523 | #CD4945 |
How To Get Custom Colors in Notion
Notion is fairly strict when it comes to design. Besides having only three different font types, the system colors are generally limited to the 10 Notion Colors mentioned above.
But there are two tricks you can use to get custom colors in Notion:
Use KaTex and Inline Formulas For Rich Formatting in Notion
KaTeX is a fast math typesetting library that allows you to add beautifully formatted mathematical expressions and custom text styling to your documents.
In Notion, you can use KaTeX to create custom-colored text and other rich formatting that goes beyond Notion’s standard color options.
Here’s how to use KaTeX for custom colors in Notion:
- Type the formula \color{yourColor}{your text} where you want the custom-colored text to appear
- Highlight the entire formula
- On the formatting toolbar, select Mark as equation (or press cmd + shift + e)
- Select this option to render your custom-colored text
Alternatively, you can also use the slash command to look for inline equation.
For example, if you want to create red text, you would type:
\\color{red}{This text will appear in red}
You can use any valid CSS color name (like blue, green, purple) or hex code (like #FF0000) in place of the color name.
Pro tip: This trick works especially well for creating attention-grabbing headers or highlighting important information in your Notion pages when the standard color options don’t quite fit your needs. Just be careful to balance this with the rest of the design on your page
Beyond just colors, KaTeX can also be used for other rich formatting like:
- Text size adjustments using \huge or \tiny
- Mathematical symbols and equations
- Custom spacing and alignment
Keep in mind that while KaTeX is powerful, it’s best used sparingly to make sure your page is readable and well designed.
Here are some additional powerful KaTeX formatting tricks you can use in Notion:
- Text styling combinations: You can combine multiple styles like \textbf{\color{blue}{Bold blue text}}
- Custom font sizes: Use \small, \large, \Large, or specific sizes like \fontSize{15px}{Custom size text}
- Decorative elements: Use \boxed{text} to create boxed content or \underline{text} for underlined content
- Special characters: Add symbols like ★ (\star), ♥ (\heartsuit), or → (\rightarrow)
Here’s an example combining multiple formatting options:
\Large\color{purple}{\boxed{\text{Important Note!}}}
Since KaTex can be a bit weird to write, use Notion AI or another AI tool to write the syntax for you.
In order to centre-align text in Notion, you can add a Block Equation as a block type to your Notion page and add any KaTex expression of your choice. Everything inside the block will be formatted accordingly.
Use Custom Embeds For Alternative Colors in Notion
Since Notion allows you to embed images in your pages, you can also use this to add more color and design options to your Notion Page.
You can do so with any tool that allows you to create images with custom dimensions, for example Canva, Photoshop or even Midjourney for AI Assets.
Here are a few tips to make this work:
- Use a canvas size of 2000px wide by 20-40px high
- Create simple lines, dots, or decorative patterns
- Try gradient lines or custom shapes for more visual interest
- Keep the design minimal to avoid overwhelming your content
Design can be hard (which is probably why Notion locks down so many options), but you could start with these ideas and explore how they look on your Notion Pages:
- Minimalist dividers: Simple lines with rounded edges in your brand colors
- Geometric banners: Abstract patterns using shapes and your brand’s color palette
- Texture-based designs: Subtle paper textures or noise effects for depth
- Icon strips: A row of related icons spaced evenly for section breaks
Use A Custom Emoji Library in Notion
In a recent update, Notion added the option to save custom emojis to your emoji library.
This makes it a lot easier to use your own emojis or icons across the workspace in whatever color you want.
Just keep in mind that it’s currently not possible to add your own custom emojis as database property icons.
Here, we are still limited to the default icon library.
How To Color A Table in Notion
You can color the columns and rows of simple tables in Notion by highlighting the complete row or column and then clicking on the Color option.
How To Color A Database in Notion
Notion Databases don’t have color options per se, but you can still color them by placing them inside a toggle or a callout with a background or color.
This will enforce the same formatting on the background or the text of the database.
How To Color A Button in Notion
Notion Buttons have recently gotten a little update and can now be colored. Simply click on the six dots next to a button and then select the Color option.
Frequently Asked Questions About Notion Colors
How many colors does Notion have?
Notion has 10 color options: Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, and Red. Each color has separate hex values for text, backgrounds, and icons — and those values also change between Light Mode and Dark Mode. That means there are over 60 unique color values in total across all Notion color applications.
Why do my Notion icon colors look different from the text colors?
Notion uses different hex codes for icons than it does for text and backgrounds. Icon colors are generally more saturated and vibrant than the corresponding text colors. For example, Notion’s blue text color in Light Mode is #487CA5, while the blue icon color is #337EA9. If you’re trying to match colors exactly in a design tool, make sure you use the correct set of hex codes for the element you’re working with.
Can I use custom colors for Notion icons?
Notion currently limits icon colors to its 10 built-in options. You cannot apply a custom hex code directly to a Notion icon. However, you can upload a custom emoji or image as your page icon, which gives you full control over the colors used.
Do Notion colors change between Light Mode and Dark Mode?
Yes. Notion adjusts all color values — text, backgrounds, and icons — when you switch between Light Mode and Dark Mode. Dark Mode text colors are lighter to maintain readability against dark backgrounds, and background colors become much darker. If you’re referencing Notion colors in an external project, check which mode your users will be viewing in.
How do I match Notion colors in Figma or Canva?
Use the hex codes from the reference tables above and enter them directly into Figma’s or Canva’s color picker. Make sure to select the right color type (text, background, or icon) and the right mode (Light or Dark) so your designs match Notion’s actual appearance.
