Markdown Text Color & Font Color

Markdown is a clean and simple writing format, but it has one obvious shortcoming: native text color is not supported. This is by design — Markdown's creator John Gruber explicitly stated in the original syntax documentation that Markdown's formatting syntax only handles "what plain text can convey," and color clearly requires visual rendering.

But don't worry — while Markdown itself has no color directives, there are several workarounds. This article walks you through each method by use case, tells you which one works on which platform, and shares the pitfalls along the way.

Adding Text Color with HTML Tags

This is the most universal approach. The principle is simple: Markdown allows embedding HTML (learn more in this Using HTML in Markdown guide), and HTML natively supports color.

Using <span style> to Set Color

The <span> tag combined with CSS color property is the most standard approach:

<span style="color:red">This is red text</span>
<span style="color:#0000FF">This is blue text</span>
<span style="color:rgb(0,128,0)">This is green text</span>

The color property accepts three value formats:

FormatExampleDescription
Color namered, blue, greenMost intuitive, supports 140 named colors
Hexadecimal#FF0000, #00FF00Most commonly used, precise color control
RGBrgb(255,0,0)Useful when you need transparency

You can also set the font size in the same tag:

<span style="color:red; font-size:20px">Red text in large size</span>

Using the <font> Tag to Set Color

The <font> tag is more concise and shorter to write:

<font color="red">Red text</font>
<font color="#00BFFF">Deep sky blue text</font>
<font color="blue" size="5">Blue text in large size</font>

To be honest, the <font> tag has been deprecated in HTML5, but the vast majority of Markdown renderers still support it because it's so widely used. If you care about standards compliance, prefer the <span style> method.

Setting Background Color

If you need a background color instead of text color, you can use the bgcolor attribute of <table> — this works on many platforms:

<table><tr><td bgcolor="orange">Text with orange background</td></tr></table>
<table><tr><td bgcolor="#ADD8E6">Text with light blue background</td></tr></table>

HTML Method Platform Support

Here's a summary of actual test results:

Platform<span style><font><table bgcolor>
CSDN✅✅✅
CNBlogs⚠️ Partial✅✅
Typora✅✅✅
VS Code Preview✅✅✅
HackMD✅✅✅
Jupyter Notebook✅✅✅
GitHub README❌❌❌
GitLab❌❌⚠️ Partial

Sources: Stack Overflow top-voted answer [1], GitHub Community discussion [2], GitLab Forum [3], and author's own testing.

Note that GitHub and GitLab, for security reasons, strip the style attribute and most HTML tags, so these HTML methods largely don't work on those platforms. If you need colored text on GitHub, use the LaTeX method described below.

Adding Color on GitHub Using LaTeX

Starting from May 2022, GitHub officially supports LaTeX math formula rendering. We can leverage LaTeX's \color command to add text color (for a deeper dive into LaTeX syntax, check the Markdown LaTeX tutorial):

$\color{red}Red text$
$\color{blue}Blue text$
$\color{green}Green text$

Use single $ for inline formulas and double $$ for standalone formula blocks:

$$\color{red}This is a block of red text$$

Multi-Color Text

If you want to mix multiple colors on one line:

$\color{red}Red \color{blue}Blue \color{green}Green$

Using \textcolor for Precise Scope Control

\color affects all subsequent text. Use \textcolor to specify exactly which text should be colored:

$\textcolor{red}{Only this part is red} other text is normal$

Using \textsf to Restore Normal Font

LaTeX renders text in math italic by default, which looks unnatural. Adding \textsf restores the normal sans-serif font:

$\textsf{\textcolor{red}{Red text in normal font}}$

Limitations of the LaTeX Color Method

While clever, this approach has several caveats:

  1. Text is rendered as images — not selectable, not copyable, bad for SEO
  2. Mobile GitHub App doesn't support it — only works in the browser
  3. Spaces must use ~ or \space — regular spaces may be ignored
  4. Cannot be used inside code blocks — LaTeX doesn't work within code blocks
  5. Briefly broke in May 2025 — caused by a GitHub backend update, later restored

I once tried using LaTeX colors to mark status information in a project README, only to discover that colors were completely invisible on mobile. I ended up switching to an emoji-based approach.

Using Diff Code Blocks for Color Hints (GitHub Only)

While not actual text color, GitHub's diff syntax highlighting can indirectly achieve red and green effects:

```diff
- This line appears red (deletion style)
+ This line appears green (addition style)
! This line appears orange

This method only works inside code blocks (learn more about code block syntax in the [Markdown Code Block tutorial](/markdown/code-block/)) and can't be used for regular text, but it's a handy trick for marking status on GitHub.

## Using Emoji as a Color Alternative

If you just want to use color to express status or draw attention, emoji might be the simplest and most direct approach:

```markdown
✅ **Completed** — Feature development finished
❌ **Failed** — Test did not pass
🔴 Urgent | 🟡 Caution | 🟢 Normal
⚠️ **Warning**: Do not proceed

Emoji renders correctly on almost every Markdown platform and carries clear semantic meaning. While it doesn't color the text itself, it's sufficient for many use cases.

Common Color Code Reference

Here's a collection of frequently used color codes for quick reference:

Basic Colors

ColorNameHexUsage
Redred#FF0000<font color="red">Sample</font>
Blueblue#0000FF<font color="blue">Sample</font>
Greengreen#008000<font color="green">Sample</font>
Orangeorange#FFA500<font color="orange">Sample</font>
Purplepurple#800080<font color="purple">Sample</font>
Yellowyellow#FFFF00<font color="yellow">Sample</font>
PinkpinkFFC0CB<font color="pink">Sample</font>
Cyancyan#00FFFF<font color="cyan">Sample</font>

Practical Colors

ColorNameHexUsage
Dark Reddarkred#8B0000<font color="darkred">Sample</font>
Coralcoral#FF7F50<font color="coral">Sample</font>
Tomatotomato#FF6347<font color="tomato">Sample</font>
Goldgold#FFD700<font color="gold">Sample</font>
Dark Bluedarkblue#00008B<font color="darkblue">Sample</font>
Deep Sky Bluedeepskyblue#00BFFF<font color="deepskyblue">Sample</font>
Dark Greendarkgreen#006400<font color="darkgreen">Sample</font>
Graygray#808080<font color="gray">Sample</font>

Using Color in Jupyter Notebook

Jupyter's Markdown cells support HTML, so the <span> and <font> methods described earlier work directly:

<span style="color:red; font-size:16px">This is red text in Jupyter</span>

By the way, if you need colored headings in Jupyter, you can write this in a Markdown cell:

### <span style="color:blue">Blue Heading</span>

Using Color in R Markdown and Pandoc

If you use R Markdown or Pandoc to generate multi-format documents (HTML + PDF), handling color requires a different approach:

HTML Output

Just use <span style> as you would in regular Markdown.

PDF Output (via LaTeX)

You need to include the xcolor package in the YAML header:

---
header-includes:
  - \usepackage{xcolor}
---

Then use LaTeX commands in the document:

\textcolor{red}{Red text}
\textcolor{blue}{Blue text}

You can also define custom colors:

\definecolor{myblue}{rgb}{0.2, 0.4, 0.8}
\textcolor{myblue}{Custom blue}

Compatible with Both HTML and PDF

The R Markdown Cookbook suggests writing a helper function that automatically selects HTML or LaTeX syntax based on the output format [4]. This way, the same source file can output both formats.

Quick Selection Guide

Choosing the right method for your use case matters:

  • Blog writing (CSDN, CNBlogs) → Use <font> or <span style>, simple and direct
  • GitHub README → Use LaTeX $\color{red}{text}$ or emoji
  • GitLab → Same as GitHub, use the LaTeX method
  • Jupyter Notebook → Use <span style>
  • Typora / VS Code → Both <span style> and <font> work fine
  • R Markdown for PDF → Use LaTeX \textcolor
  • Just marking status → Emoji is enough

Honestly, the syntax itself is just a few lines. The real challenge is platform compatibility. Confirm which method your target platform supports before you start writing — it'll save you a lot of hassle.

References