Markdown Text Color
Standard Markdown has no color syntax — the workaround is inline HTML with a <span style> tag. Works in Obsidian, Notion, VS Code, and most renderers that allow HTML with style attributes.
Jump to: Why no color? · HTML span · Font tag · GitHub math hack · GitHub alerts · Discord · Platform support · FAQ
Why Standard Markdown Has No Color
Markdown is intentionally minimal. It describes structure (this is a heading, this is a list, this is a link) and lets the renderer decide how it looks. Color is a presentational concern — exactly the kind of styling Markdown leaves out by design.
That said, most Markdown renderers allow a subset of inline HTML. The <span> tag with a style attribute is the most portable way to color text — with a few notable exceptions (most importantly: GitHub strips style attributes for security).
The HTML <span> Tag Workaround
Wrap text in <span style="color: COLOR">text</span> where COLOR can be a CSS color name (red, tomato), hex value (#2563eb), or function (rgb(220, 38, 38), hsl(0, 80%, 50%)).
Markdown
<span style="color: red">This text is red.</span>Preview
This text is red.
Markdown
<span style="color: #2563eb">This text is blue (#2563eb).</span>Preview
This text is blue (#2563eb).
Markdown
<span style="color: rgb(220, 38, 38)">This text is red via RGB.</span>Preview
This text is red via RGB.
Markdown
<span style="color: #10b981">Green</span>, <span style="color: #f59e0b">orange</span>, and <span style="color: #8b5cf6">purple</span> in the same line.Preview
Green, orange, and purple in the same line.
Markdown
<span style="background-color: #fef3c7; padding: 0 4px">Highlighted text</span> uses background-color.Preview
Highlighted text uses background-color.
Works in: Obsidian, VS Code preview, Notion, GitLab, Bitbucket, MkDocs, Jekyll, Hugo, Astro, and most static site generators. Does not work on GitHub — see the math hack below.
The Legacy <font> Tag
The <font> tag is deprecated in HTML5 but still renders in most browsers and editors. It's shorter than a span and works in some places (notably Notion) where style attributes are restricted. Don't use it for new content if span works — but keep it in your back pocket as a fallback.
Markdown
<font color="red">This text uses the deprecated font tag.</font>Preview
This text uses the deprecated font tag.
Markdown
<font color="#16a34a">Hex colors work in font tags too.</font>Preview
Hex colors work in font tags too.
GitHub: The LaTeX Math Color Hack
GitHub strips the style attribute from all HTML for security. To get colored text in a README, issue, or comment, abuse the LaTeX math rendering: wrap your text in $...$ and use \color{name}{\text{your text}}.
GitHub Markdown
$\color{red}{\text{Red text in GitHub}}$How it renders on GitHub
GitHub Markdown
$\color{#16a34a}{\text{Green hex color}}$How it renders on GitHub
GitHub Markdown
$\color{blue}{a^2 + b^2 = c^2}$How it renders on GitHub
\text{}. Links inside the math block don't work. Use sparingly — for badges, prefer shields.io.GitHub Alert Callouts (Semantic Color)
GitHub renders 5 special blockquote types as colored alert boxes. They're the cleanest way to add color to a GitHub README — no math hacks needed. Syntax: > [!TYPE] on the first line, then the message on following blockquote lines.
Markdown
> [!NOTE]
> Useful information that users should know, even when skimming content.How it renders on GitHub
Useful information that users should know, even when skimming content.
Markdown
> [!TIP]
> Helpful advice for doing things better or more easily.How it renders on GitHub
Helpful advice for doing things better or more easily.
Markdown
> [!IMPORTANT]
> Key information users need to know to achieve their goal.How it renders on GitHub
Key information users need to know to achieve their goal.
Markdown
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.How it renders on GitHub
Urgent info that needs immediate user attention to avoid problems.
Markdown
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.How it renders on GitHub
Advises about risks or negative outcomes of certain actions.
Discord: Code Block Color Tricks
Discord doesn't support color in regular messages, but its syntax-highlighted code blocks let you color text by choosing the right language hint:
| Language | Trigger | Color |
|---|---|---|
| ```diff | Lines starting with + | Green |
| ```diff | Lines starting with - | Red |
| ```fix | Entire block | Yellow |
| ```ini | Text inside [brackets] | Blue |
| ```css | Selectors / values | Orange |
| ```bash | Text in "quotes" | Red |
Using Discord? See the full Discord Markdown guide for color code samples with screenshots.
Common Mistakes
These don't do what you might expect — Markdown has no shortcut for color, only HTML or LaTeX workarounds.
What you type
[red](red)This isn't color.What you get
redThis isn't color.
What you type
**red text**What you get
red text
The fix: use <span style="color: red">text</span> (or the GitHub math hack on GitHub).
Platform Support
Color support varies dramatically across Markdown renderers. Here's where each method works:
| Platform | Best method | <span style> | Math hack |
|---|---|---|---|
| GitHub | Math hack or alert callouts | ✗ Style stripped | ✓ Supported |
| GitLab | <span style> | ✓ Supported | ✓ Supported |
| VS Code preview | <span style> | ✓ Supported | With extension |
| Notion | Native color UI or <font color> | ⚠ Partial | ✗ Not supported |
| Obsidian | <span style> | ✓ Supported | ✓ With plugin |
| Discord | Code block syntax tricks | ✗ Not supported | ✗ Not supported |
| Slack | None (Slack strips HTML) | ✗ Not supported | ✗ Not supported |
| None (HTML stripped) | ✗ Not supported | ✗ Not supported | |
| Static site generators | <span style> | ✓ Supported | Depends on math plugin |
Quick Reference
| Syntax | Result | Best for |
|---|---|---|
| <span style="color: red">text</span> | text | Obsidian, GitLab, VS Code, SSGs |
| <font color="blue">text</font> | text | Legacy fallback, Notion |
| $\color{green}{\text{text}}$ | text | GitHub READMEs and issues |
| > [!NOTE] | Blue callout box | Semantic color on GitHub |
| ```diff (+/-) | Green / red lines | Discord, GitHub diff blocks |
Frequently Asked Questions
How do I change text color in Markdown?
Standard Markdown does not have a built-in color syntax. The most widely supported workaround is the HTML span tag: <span style="color: red">your text</span>. This works in editors that allow inline HTML with style attributes — including Obsidian, VS Code preview, Notion, GitLab, and most static site generators. It does NOT work on GitHub (which strips style attributes), Reddit, or Slack.
Why doesn't Markdown have a color syntax?
Markdown was designed by John Gruber to keep documents readable as plain text. Adding a color syntax would clutter the source with formatting noise that doesn't help readability. Color is also a presentational concern — Markdown intentionally focuses on structure (headings, lists, links) rather than visual styling, leaving color to CSS or platform-specific extensions.
How do I add colored text in GitHub Markdown?
GitHub strips the style attribute from HTML, so <span style="color:red"> won't work. Instead, use GitHub's LaTeX math syntax: $\color{red}{\text{red text}}$ or ${\color{red}red text}$. These render inside math blocks and produce colored output in GitHub READMEs, issues, comments, and pull requests. For semantic highlighting, use GitHub's alert callouts: > [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], > [!CAUTION].
What is the GitHub color math hack?
GitHub renders LaTeX-style math expressions wrapped in $...$ (inline) or $$...$$ (block). Inside math mode, the \color{name} or \color{#hex} command sets the color of the next expression. The most common pattern is $\color{red}{\text{your text}}$. Limitations: spaces and special characters need \text{} wrapping, the output uses a math font (italic by default), and links inside the math block won't work as links.
Does color work in HTML email Markdown?
It depends on the email client. Most email clients support inline style attributes on span and font tags, so <span style="color:#ff0000">red text</span> will work. Outlook is the most restrictive — it strips many CSS properties. For maximum compatibility in emails, use both the deprecated <font color="red"> tag AND a span with inline style, or use a Markdown-to-email tool that handles the conversion.
How do I color text in Discord?
Discord doesn't support direct color syntax in regular messages. The workaround is to use code blocks with syntax highlighting: ```diff for green/red lines (lines starting with + are green, - are red), ```fix for yellow, ```ini for blue inside [brackets], and ```css for orange tokens. See our Discord markdown guide for full color examples and screenshots.
What is the difference between <span style> and <font color>?
Both can set text color, but they target different eras of HTML. <font color="red"> is the legacy HTML 4 attribute — deprecated in HTML5 but still rendered by most browsers and editors (including Notion). <span style="color: red"> is the modern CSS-based approach, more flexible (supports any CSS property, hex, RGB, HSL), and more widely accepted by Markdown parsers. Use span for new content; fall back to font only if span doesn't work in your specific tool.
Why does my color span not render on GitHub?
GitHub sanitizes user-supplied HTML and removes the style attribute as a security measure (to prevent CSS-based attacks). This means inline color via <span style="color:red"> will show the text but ignore the color. To color text on GitHub, use the math syntax ($\color{red}{...}$), GitHub alert callouts (> [!NOTE]), or embed an SVG/image with the color baked in.
Does Obsidian support colored text in Markdown?
Yes. Obsidian renders HTML spans with style attributes in both reading view and live preview. <span style="color: red">text</span> works directly. Obsidian also supports CSS snippets — you can define custom classes in your theme's CSS and apply them with <span class="my-color">. The Highlightr community plugin adds a UI for picking highlight colors if you don't want to write HTML by hand.