Notion Color Palette

Select any value to copy it.

• Notion Black

  Primary

  #000000rgb(0, 0, 0)hsl(0, 0%, 0%)

  Closest in ArchiveTrue Gray Ink
  Closest in Archive: True Gray Ink

• Notion White

  Neutral

  #FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)

  Closest in ArchiveWarm Gray Veil
  Closest in Archive: Warm Gray Veil

• Notion Gray

  Neutral

  #787774rgb(120, 119, 116)hsl(45, 2%, 46%)

  Body text and secondary UI.

  Closest in ArchiveTrue Gray Core
  Closest in Archive: True Gray Core

• Default Brown

  Accent

  #9F6B53rgb(159, 107, 83)hsl(19, 31%, 47%)

  From the in-app color picker.

  Closest in ArchiveEmber Core Soft
  Closest in Archive: Ember Core Soft

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Notion BlackAaon white21.00:1AANotion Black: Open in contrast checkerAaon black1.00:1Not for textNotion Black: Open in contrast checker
• Notion WhiteAaon white1.00:1Not for textNotion White: Open in contrast checkerAaon black21.00:1AANotion White: Open in contrast checker
• Notion GrayAaon white4.48:1Large text onlyNotion Gray: Open in contrast checkerAaon black4.69:1AANotion Gray: Open in contrast checker
• Default BrownAaon white4.47:1Large text onlyDefault Brown: Open in contrast checkerAaon black4.70:1AADefault Brown: Open in contrast checker

About this palette

Notion's brand intentionally recedes into pure black-on-white so the user's documents, databases, and embedded media take center stage. The N mark is unornamented; accent colors only appear inside content blocks. The palette below names the small set of hues used inside the app's color picker.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --notion-black: #000000;
  --notion-white: #ffffff;
  --notion-gray: #787774;
  --notion-default-brown: #9f6b53;
}

@theme {
  --color-notion-black: #000000;
  --color-notion-white: #ffffff;
  --color-notion-gray: #787774;
  --color-notion-default-brown: #9f6b53;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "notion-black": "#000000",
        "notion-white": "#ffffff",
        "notion-gray": "#787774",
        "notion-default-brown": "#9f6b53",
      },
    },
  },
};

Source: https://www.notion.so/help/color-coded · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Notion name and any associated marks belong to their owner. Request removal via support.

More from SaaS & Productivity