Notion Dark Mode Colors: #191919
What is the Notion dark mode hex code?
Notion dark mode uses background #191919, sidebar #202020, hover #2F2F2F, text #E6E6E6, and blue accent #2383E2. Copy each hex below for a calm, document-focused dark UI.
- Background: #191919
- Sidebar: #202020
- Blue: #2383E2
Copy Notion dark mode hex codes—background #191919, sidebar #202020, text #E6E6E6, and blue accent #2383E2—for UI inspiration and dark theme tokens.
Notion Dark Mode — Quick Copy
Backgrounds, blue accent, and text tokens from Notion dark theme. Click Copy on any row.
What is the Hex Code for Notion Dark Mode?
The main Notion dark mode background is #191919—a soft near-black that reads gently for long writing sessions. The sidebar uses #202020; row hovers and menus use #2F2F2F. Body text is #E6E6E6 (white at roughly 90% opacity), with secondary text around #9B9B9B.
Notion Dark Mode Background Colors
Notion keeps its dark surfaces close in value so the interface stays calm and text-focused:
- #191919 — main page and editor canvas
- #202020 — sidebar navigation
- #2F2F2F — hover rows and menu items
- #252525 — cards, popovers, and callouts
Notion Blue & Callout Colors
Notion’s accent blue is #2383E2 for links and primary buttons. Colored text and tags use softer callout hues so they stay legible on dark backgrounds: blue #529CCA, green #4DAB9A, yellow #FFDC49, and red #FF7369.
Full Notion Dark Mode Color Palette
Complete Notion dark theme hex list—backgrounds, text, borders, blue accent, and callout colors.
| Swatch | Token | Hex |
|---|---|---|
| Main background | #191919 | |
| Sidebar background | #202020 | |
| Hover surface | #2F2F2F | |
| Elevated / card | #252525 | |
| Border / divider | #373737 | |
| Text primary | #E6E6E6 | |
| Text secondary | #9B9B9B | |
| Text muted | #6F6F6F | |
| Blue accent | #2383E2 | |
| Blue text callout | #529CCA | |
| Red callout | #FF7369 | |
| Yellow callout | #FFDC49 | |
| Green callout | #4DAB9A |
How to Use Notion Colors in Your Design
Map Notion’s roles to tokens: --color-canvas = #191919, --color-sidebar = #202020, --color-text = #E6E6E6. The tight value range is intentional—keep contrast for text high but surface separation subtle.
Verify body text with a WCAG contrast checker, and compare with Discord dark mode colors and the broader dark mode color palette guide.
Notion Color Palette for UI Inspiration
Three ways to adapt Notion dark mode colors for docs, notes, and knowledge-base products.
Notion-style docs / notes app
Mirror Notion layers: #191919 page canvas, #202020 sidebar, #2F2F2F hover rows, #E6E6E6 body text, #2383E2 links.
Notion + brand accent
Keep the warm-neutral near-blacks for a calm reading surface; swap Notion blue for your brand link color on primary actions only.
Notion-inspired knowledge base
Use #191919 canvas, #252525 cards, #373737 borders, and colored callouts (#4DAB9A, #FFDC49, #FF7369) for tags and status.
Why Notion Dark Mode Works
Notion optimizes for reading and writing: surfaces sit close in value so nothing competes with your content, text contrast stays high, and color is reserved for links and callout tags. Docs tools, wikis, and note apps borrow this restrained pattern because it reduces fatigue during long sessions.
For more dark UI theory and accessible token naming, see our dark mode color palette guide.
FAQ
- What is the Notion dark mode background color hex code?
- The Notion dark mode background hex code is #191919 for the main page, with the sidebar at #202020. Hover surfaces use #2F2F2F and body text is #E6E6E6 (white at about 90% opacity).
- What is the Notion blue accent hex code?
- Notion’s blue accent for links and primary buttons is #2383E2. Blue-colored text in callouts uses a lighter #529CCA for readability on dark backgrounds.
- What are all the Notion dark mode colors?
- Notion dark uses #191919 background, #202020 sidebar, #2F2F2F hover, #252525 cards, #373737 borders, #E6E6E6 text, #9B9B9B secondary text, and #2383E2 blue accent, plus colored callouts.
- Can I use Notion colors in my own app design?
- Notion hex values are widely referenced for calm, document-focused dark UI. For commercial products, treat them as a starting point—define your own tokens and verify WCAG contrast for body text.
Build your own dark palette
Start from Notion neutrals or generate a custom dark theme with harmonized accents.