Method 1: CSS style Attribute ⚓︎

<!-- Basic Usage: Set font color -->
<p style="color: red;">This text is red</p>

<!-- Use hexadecimal color codes (more accurate) -->
<p style="color: #1E90FF;">This text is dark blue (Dodger Blue)</p>

<!-- Use RGB/RGBA (supports transparency) -->
<p style="color: rgb(255, 165, 0);">This text is orange</p>
<p style="color: rgba(0, 128, 0, 0.7);">This text is semi-transparent green</p>

<!-- Combine with bold and other styles -->
<p style="color: purple; font-weight: bold;">This purple text is bold</p>

Preview:

This text is red

This text is dark blue (Dodger Blue)

This text is orange

This text is semi-transparent green

This purple text is bold

Screen Color Picker

If you need color codes in HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK, CMYKA formats for a specific color, you can extract them using the tool below.

Screen Color Picker

Method 2: JavaScript Script ⚓︎

Create a folder named scripts in the Hexo root directory, create a JavaScript file named color-text.js inside the folder, and paste the code below into it. Or click Download the color-text.js file.

hexo.extend.tag.register('color', function (args, content) {
    const color = args[0] || 'black';
    return `<span style="color: ${color};">${content}</span>`;
}, { ends: true });

You can use it in Markdown as follows:

1
2
3

{% color red %}This text is red{% endcolor %}
{% color #FF69B4 %}This text is pink{% endcolor %}
{% color green %}This text is green{% endcolor %}

Preview:

This text is red This text is pink This text is green

Extension: Support dual parameters for color + font size (Download the color-text-extension.js file.)

hexo.extend.tag.register('color', function (args, content) {
    const color = args[0] || 'black';
    const size = args[1] || '';
    let style = `color: ${color};`;
    if (size) style += `font-size:${size};`
    return `<span style="${style}">${content}</span>`;
}, { ends: true });