Markdown text color

Markdown has no syntax for text color, so you cannot change text color with Markdown alone. Where the renderer allows inline HTML with style attributes, wrap the text in <span style="color: red;">. GitHub removes inline styles, so on GitHub you need a workaround such as LaTeX math with \color, a diff code block, an alert, or colored emoji.

Markdown text color reference

Key facts

• CommonMark, GitHub Flavored Markdown and GitLab Flavored Markdown have no syntax for text color.
• Inline HTML such as <span style="color: red;"> colors text only where the renderer keeps the style attribute.
• GitHub sanitizes HTML and removes inline styles, so a styled span shows as plain text on GitHub.
• GitHub renders $...$ math with MathJax, which supports \color. GitHub does not document color, so treat it as unofficial.
• Obsidian renders sanitized HTML, and its help shows a span with a style attribute.
• Discord colors text through ```ansi code blocks with escape codes, not through HTML.
• Color alone should not carry meaning. Pair it with a word, symbol or label.

Why Markdown has no color syntax

Markdown describes structure, such as headings, emphasis and lists, and leaves presentation to the renderer and its stylesheet. The CommonMark spec has no color element, and GitLab's documentation states directly that Markdown does not support changing text color. What CommonMark does allow is raw inline HTML, which is where colored text usually comes from.

Whether that HTML survives depends on the platform. Many hosted services sanitize HTML for security and remove the style attribute, the <font> tag or both. So the same file can show colored text in one app and plain text in another.

Color text with an HTML span

Wrap the text in a <span> with a CSS color value. You can use color names, hex codes such as #1a7f37, or rgb() values.

Inline span with a style attribute

Markdown

This is <span style="color: red;">red text</span> and this is <span style="color: #1a7f37;">green text</span>.

Rendered output

HTML output

<p>This is <span style="color: red;">red text</span> and this is <span style="color: #1a7f37;">green text</span>.</p>

This works in renderers that allow inline HTML and keep style attributes, such as many static site generators, Obsidian and Markdific. Markdown syntax inside the span may not be processed in every tool. Obsidian, for example, does not render Markdown inside HTML elements.

For a whole paragraph, use a <div style="color: …"> or <p style="color: …"> block. The older <font color="red"> tag is obsolete in HTML and is removed by many sanitizers, so prefer span. To color the background instead of the text, see highlight.

Text color on GitHub

GitHub sanitizes the HTML it renders from Markdown and removes inline styles, so a styled span keeps its text but loses the color. This applies to README files, issues, pull requests, discussions and wikis.

What GitHub does with a styled span

Markdown

This is <span style="color: red;">red text</span> on GitHub.

Rendered output

HTML output

<p>This is <span>red text</span> on GitHub.</p>

The style attribute is stripped, so the text renders in the default color.

The workarounds below avoid the style attribute. Each has trade-offs, so use them sparingly.

LaTeX math color. GitHub renders math in Markdown files, issues, pull requests, discussions and wikis using MathJax. MathJax's color extension provides \color and \textcolor, so a math expression can display colored words. Put the words in \text{…} so they keep their spacing and do not render as italic variables.

Colored words through GitHub math

Markdown

Status: $\color{red}{\text{failed}}$ and $\color{green}{\text{passed}}$

Rendered output

HTML output

<!-- GitHub passes the $...$ expression to MathJax, which draws the colored text.
The output is MathJax markup, not a <span style> element. -->

This is not documented by GitHub and relies on MathJax behavior, so it may change. The text is drawn by the math renderer, may look different from body text, and cannot contain links or other Markdown.

Diff code blocks. A fenced code block with the language diff is highlighted line by line: lines starting with + show in green and lines starting with - in red on GitHub's default theme. It suits changelogs and before-and-after lists, not prose.

Green and red lines in a diff block

Markdown

```diff
+ Added: dark mode
- Removed: legacy export
  Unchanged line
```

Rendered output

+ Added: dark mode
- Removed: legacy export
  Unchanged line

HTML output

<pre lang="diff"><code>+ Added: dark mode
- Removed: legacy export
  Unchanged line
</code></pre>
<!-- The highlighter wraps each line in a span with a color class. -->

Alerts. GitHub's alert syntax (> [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]) renders a blockquote with a colored border, icon and title. Use it when you want a colored warning rather than colored words.

A warning alert on GitHub

Markdown

> [!WARNING]
> This command deletes the build folder.

Rendered output

HTML output

<div class="markdown-alert markdown-alert-warning">
<p class="markdown-alert-title">Warning</p>
<p>This command deletes the build folder.</p>
</div>

Other renderers show this as an ordinary blockquote with the literal text [!WARNING], unless they support the same alert syntax.

Color swatches. In issues, pull requests and discussions, a HEX, RGB or HSL value in backticks, such as `#0969DA`, shows a small color swatch next to the code. It does not color the surrounding text.

Colored emoji as markers

When the goal is a colored status rather than colored words, emoji work almost everywhere, including GitHub, where shortcodes such as :red_circle: are converted to emoji. They also give screen reader users a name for the marker.

Status list with colored circles

Markdown

:red_circle: Blocked
:yellow_circle: In review
:green_circle: Done

Rendered output

HTML output

<p>🔴 Blocked
🟡 In review
🟢 Done</p>

Shortcode support varies by platform. Pasting the emoji character itself is more portable. See emojis.

Text color in Obsidian, GitLab and Discord

• Obsidian renders HTML in notes after sanitizing it, and its HTML help page uses a span with a style attribute as an example. A styled span is the usual way to color text in a note. Markdown inside the span may not render.
• GitLab states that Markdown does not support changing text color. Color codes in backticks show a color chip in the GitLab application. GitLab also renders math, but check your instance before relying on \color.
• Discord does not render HTML. The common method is a code block with the language ansi and ANSI escape codes. See colored text in Discord for copyable examples.

Accessibility: do not rely on color alone

WCAG success criterion 1.4.1 says color should not be the only visual means of conveying information. Readers with color vision deficiencies, screen reader users and anyone viewing a printed or plain-text copy will miss meaning that exists only as color, and many Markdown destinations drop the color entirely.

• Add a word or symbol: Failed, Passed, or an emoji, not just red and green.
• Check contrast. Light colors such as yellow on a white background can be hard to read, and dark mode changes the background.
• Use bold or a heading for emphasis, which survives every renderer.

Flavor differences

No Markdown flavor defines a color syntax. Support depends on whether the platform keeps inline HTML styles or offers another feature.

Sanitizer rules change between versions and settings, so preview the document where it will be published. See Markdown flavors for a broader comparison.

For the full comparison of how flavors differ across all elements, see Markdown flavors.

How Markdific renders it

Markdific sanitizes inline HTML but allows span with a style attribute, so <span style="color: red;"> shows colored text in the preview. LaTeX math also renders, so check the preview for \color expressions. Try it in the Markdific online editor.

Common mistakes and gotchas

• Looking for a Markdown color syntax. Patterns such as {color:red} or [red]text[/red] are not Markdown and render as literal text.
• Expecting a styled span to work on GitHub. GitHub removes inline styles, so the text appears in the default color.
• Using the font tag. <font color="red"> is obsolete HTML and is removed by many sanitizers. Use span where styles are allowed.
• Leaving out \text in math. $\color{red}{failed}$ renders as italic math letters with no spaces. Wrap words in \text{…}.
• Conveying meaning with color only. Red and green alone fail for many readers and disappear in plain-text copies. Add a word or symbol.
• Forgetting dark mode. A color chosen for a white background, such as dark blue, can be unreadable on a dark theme.

Best practices

• Check whether the destination keeps inline styles before adding colored text.
• Prefer structure (headings, bold, alerts, lists) over color for emphasis.
• Use a small set of colors with a consistent meaning across the document.
• Pair every color with a word, label or symbol.
• Pick colors with enough contrast in both light and dark themes.
• On GitHub, choose the workaround that fits the content: alerts for warnings, diff for changes, emoji for status.

HTML equivalent

Colored text is plain HTML with a CSS color declaration. Markdown passes the tag through unchanged where raw HTML is allowed.

Markdown

The build <span style="color: #cf222e;">failed</span> on Windows.

HTML output

<p>The build <span style="color: #cf222e;">failed</span> on Windows.</p>

FAQ

How do I change text color in Markdown? Markdown has no color syntax. Use inline HTML, such as <span style="color: red;">text</span>, in renderers that allow inline styles. On platforms that strip styles, such as GitHub, use a workaround like LaTeX math, a diff block or emoji.

Can you color text in GitHub Markdown? Not with HTML styles, because GitHub removes them. A common workaround is math: $\color{red}{\text{text}}$ renders through MathJax in places where GitHub supports math. GitHub does not document this, so it may change. Alerts, diff blocks and emoji are the documented alternatives.

Why does my span color not show on GitHub? GitHub sanitizes the HTML rendered from Markdown and removes inline style attributes. The span and its text remain, but the color is gone.

How do I make red text in Markdown? Write <span style="color: red;">red text</span> where inline styles are allowed. On GitHub, use $\color{red}{\text{red text}}$ or a diff block line starting with -.

Does Obsidian support colored text? Yes, through HTML. Obsidian renders sanitized HTML, and a span with a style attribute colors the text. Markdown inside the HTML element is not rendered, so keep formatting outside the span.

How do I color text in Discord? Discord has no color syntax and does not render HTML. Use a code block with the language ansi and ANSI escape codes. See colored text in Discord.

Is the font color tag supported in Markdown? <font color="…"> is obsolete HTML. Some renderers pass it through, but many sanitizers remove it. Use <span style="color: …"> where styles are allowed.

Sources and compatibility references

• CommonMark Spec: Raw HTML
• github/markup README (HTML sanitization removes inline styles)
• GitHub Docs: Writing mathematical expressions
• MathJax Docs: color extension
• GitHub Docs: Basic writing and formatting syntax (Alerts, Supported color models)
• GitLab Docs: GitLab Flavored Markdown (Colors)
• Obsidian Help: HTML content
• W3C: Understanding WCAG 2.2 Success Criterion 1.4.1 Use of Color

Use these primary references for syntax rules. Renderer behavior can still vary by version and configuration, so preview important documents in their final destination.

To see how your Markdown renders while you write, open the file in Markdific, a Markdown viewer and editor for Mac, Windows and Linux.

Related pages

• Markdown documentation hub
• Inline HTML
• Highlight
• LaTeX math
• Emojis
• Markdown flavors
• Markdown cheat sheet