Colors Encyclopedia

Brand colors

Notion Brand Colors

Notion palette: #000000, #FFFFFF, #F7F6F3. Compare HEX/RGB, WCAG contrast and CSS tokens; open independent JSON data.

Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by Notion.

TechnologyBrand indexAPIDataset
Commonly referenced palette Notion
#000000#FFFFFF#F7F6F3
Listed without an implied color hierarchy

Palette

Black#000000RGB 0, 0, 0
White#FFFFFFRGB 255, 255, 255
Palette color 3#F7F6F3RGB 247, 246, 243

CSS Tokens

:root {
  --brand-notion-1: #000000;
  --brand-notion-2: #FFFFFF;
  --brand-notion-3: #F7F6F3;
}

Accessibility Snapshot

#000000Black 1:1 / White 21:1
#FFFFFFBlack 21:1 / White 1:1
#F7F6F3Black 19.43:1 / White 1.08:1

Brand palette context · Editorially reviewed

About Notion Brand Colors

Notion's black-and-white cube is intentionally restrained: recognition comes from its outlined geometry, lettering, and consistent placement rather than a signature chromatic hue. Notion itself identifies the name, wordmark, and black-and-white cube logo as valuable marks, so the near-monochrome palette should be understood as one layer of a larger identity system rather than as permission to imitate its appearance.

Black, white, and a warm off-white create a quiet editorial surface in which hierarchy depends on type weight, spacing, borders, and interaction states. That apparent simplicity raises accessibility demands: faint dividers and secondary text still need measurable contrast. Notion asks community sites to say clearly that they are community-run and not maintained by Notion, and its official guidelines govern any actual mark use.

This independent reference is not maintained by or affiliated with Notion, does not provide official logo files, and does not grant trademark or visual-identity rights.

Downloadable brand colors infographic

Notion Brand Colors Infographic

Save an independent infographic of the commonly referenced Notion HEX palette and its accessibility guidance. No logo or proprietary artwork is included.

1200 × 800
Notion brand colors infographic showing its commonly referenced HEX palette and accessibility guidance for every listed color without assigning a color hierarchy.
Notion brand colors infographic. Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by Notion.
Download WebPDownload SVGOpen full size

Machine-readable data

Machine-Readable Brand Color Data (JSON)

Structured brand palette data for design systems, references, automations, and AI ingestion.

AI-Ready Dataset v1.0.0
Luminance0
Black text1:1AA Fail
White text21:1AA Pass
hexCanonical HEX value
rgbRed, green, blue channels
hslHue, saturation, lightness
cmykApproximate print conversion
wcagAA and AAA contrast options
harmoniesMathematical harmony sets
variantsGenerated tone variants
nearestColorsKnowledge graph neighbors
Download JSON Open API
Structured sections
Brand
{
  "slug": "notion",
  "name": "Notion",
  "category": "technology",
  "brandCategory": [
    "Technology",
    "technology"
  ],
  "url": "https://www.colorsencyclopedia.com/brand-colors/notion/",
  "categoryUrl": "https://www.colorsencyclopedia.com/brand-colors/technology/",
  "disclaimer": "Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by Notion."
}
Palette
[
  {
    "name": "Black",
    "hex": "#000000",
    "rgb": [
      0,
      0,
      0
    ],
    "hsl": [
      0,
      0,
      0
    ],
    "cmyk": [
      0,
      0,
      0,
      100
    ],
    "luminance": 0,
    "contrast": {
      "black": 1,
      "white": 21
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": [
        "#FFFFFF",
        "#F5F5F5"
      ]
    }
  },
  {
    "name": "White",
    "hex": "#FFFFFF",
    "rgb": [
      255,
      255,
      255
    ],
    "hsl": [
      0,
      0,
      100
    ],
    "cmyk": [
      0,
      0,
      0,
      0
    ],
    "luminance": 1,
    "contrast": {
      "black": 21,
      "white": 1
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  },
  {
    "name": "Palette color 3",
    "hex": "#F7F6F3",
    "rgb": [
      247,
      246,
      243
    ],
    "hsl": [
      45,
      20,
      96
    ],
    "cmyk": [
      0,
      0,
      2,
      3
    ],
    "luminance": 0.9216,
    "contrast": {
      "black": 19.43,
      "white": 1.08
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  }
]
AI context
{
  "brandUseCases": [
    "SaaS UI",
    "developer tools",
    "product branding",
    "brand reference",
    "design systems",
    "CSS tokens",
    "accessibility checks"
  ],
  "semanticGroups": [
    "technology brand colors",
    "gray brand palette",
    "yellow brand palette",
    "neutral brand palette",
    "warm brand palette",
    "dark brand color",
    "light brand color",
    "Notion color reference"
  ],
  "contrastSafeWith": [
    "#FFFFFF",
    "#F5F5F5",
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/brand-colors/notion.json",
    "https://www.colorsencyclopedia.com/api/brand-colors.json"
  ]
}
CSS tokens
{
  "css": "--brand-notion-1: #000000;\n--brand-notion-2: #FFFFFF;\n--brand-notion-3: #F7F6F3;"
}
Accessibility
[
  {
    "hex": "#000000",
    "contrast": {
      "black": 1,
      "white": 21
    },
    "wcag": {
      "AA": [
        "#FFFFFF",
        "#F5F5F5"
      ],
      "AAA": [
        "#FFFFFF",
        "#F5F5F5"
      ]
    }
  },
  {
    "hex": "#FFFFFF",
    "contrast": {
      "black": 21,
      "white": 1
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  },
  {
    "hex": "#F7F6F3",
    "contrast": {
      "black": 19.43,
      "white": 1.08
    },
    "wcag": {
      "AA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ],
      "AAA": [
        "#000000",
        "#1A1A1A",
        "#36454F"
      ]
    }
  }
]
Full JSON dataset 
{
  "slug": "notion",
  "name": "Notion",
  "category": "technology",
  "brandCategory": [
    "Technology",
    "technology"
  ],
  "disclaimer": "Commonly referenced brand color values. This page is an independent technical reference and is not affiliated with or endorsed by Notion.",
  "datasetVersion": "1.0.0",
  "url": "https://www.colorsencyclopedia.com/brand-colors/notion/",
  "categoryUrl": "https://www.colorsencyclopedia.com/brand-colors/technology/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/brand-colors/notion.json",
  "colors": [
    {
      "name": "Black",
      "hex": "#000000",
      "rgb": [
        0,
        0,
        0
      ],
      "hsl": [
        0,
        0,
        0
      ],
      "cmyk": [
        0,
        0,
        0,
        100
      ],
      "luminance": 0,
      "contrast": {
        "black": 1,
        "white": 21
      },
      "wcag": {
        "AA": [
          "#FFFFFF",
          "#F5F5F5"
        ],
        "AAA": [
          "#FFFFFF",
          "#F5F5F5"
        ]
      }
    },
    {
      "name": "White",
      "hex": "#FFFFFF",
      "rgb": [
        255,
        255,
        255
      ],
      "hsl": [
        0,
        0,
        100
      ],
      "cmyk": [
        0,
        0,
        0,
        0
      ],
      "luminance": 1,
      "contrast": {
        "black": 21,
        "white": 1
      },
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      }
    },
    {
      "name": "Palette color 3",
      "hex": "#F7F6F3",
      "rgb": [
        247,
        246,
        243
      ],
      "hsl": [
        45,
        20,
        96
      ],
      "cmyk": [
        0,
        0,
        2,
        3
      ],
      "luminance": 0.9216,
      "contrast": {
        "black": 19.43,
        "white": 1.08
      },
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      }
    }
  ],
  "brandUseCases": [
    "SaaS UI",
    "developer tools",
    "product branding",
    "brand reference",
    "design systems",
    "CSS tokens",
    "accessibility checks"
  ],
  "semanticGroups": [
    "technology brand colors",
    "gray brand palette",
    "yellow brand palette",
    "neutral brand palette",
    "warm brand palette",
    "dark brand color",
    "light brand color",
    "Notion color reference"
  ],
  "contrastSafeWith": [
    "#FFFFFF",
    "#F5F5F5",
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/brand-colors/notion.json",
    "https://www.colorsencyclopedia.com/api/brand-colors.json"
  ]
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related Brand Color Guides

Technology brand colorsBrowse all technology brand color references.Adobe brand colorsCompare another technology palette.Amazon brand colorsCompare another technology palette.AMD brand colorsCompare another technology palette.Anthropic brand colorsCompare another technology palette.Audi similar paletteOpen a palette with a nearby first-listed color value.Jeep similar paletteOpen a palette with a nearby first-listed color value.Lexus similar paletteOpen a palette with a nearby first-listed color value.Black colorOpen the nearest named color reference.Notion APIOpen the machine-readable brand color JSON.