Color Annotations

Notion allows coloring text at the block level using syntax.

The preprocessor converts these to raw HTML elements so the color prop can be passed to heading/paragraph components.

Colored headings

Red Heading

Blue Heading

Green Heading

Purple Heading

Colored paragraphs

This is a normal paragraph without color.

A red paragraph text.

A blue paragraph text.

A green paragraph with more words to show how the text looks across the line.

A gray paragraph for subtle de-emphasis.

Background colors

Text with a yellow background for highlighting.

Text with a blue background color.

Text with a red background color.

Text with a gray background for subtle emphasis.

All Notion color names

These are all the supported color values:

Default paragraph text (no color annotation).

Red text

Orange text

Yellow text

Green text

Blue text

Purple text

Pink text

Brown text

Gray text

Red background

Orange background

Yellow background

Green background

Blue background

Purple background

Pink background

Brown background

Gray background

Mixed: colored section followed by normal content

Important Notice

This paragraph has no color annotation and should render normally.

Details below

More normal content here, uncolored.