Go back to HackMD Tutorial Home

Give us feedback or report a bug

How to change text color

Use HTML <font>

You can use the <font> element in HTML to enclose a piece of text and specify its color.

Steps

1. Wrap the text you want to color with <font color="#f00"> and </font>.
2. Enter certain color code after # :
   • Grey #96999A
   • Purple #AC19C9
   • Blue #1936C9
   • Red #f00
   • Orange #F7A004

Example

<font color="#96999A">Grey</font>
<font color="#AC19C9">Purple</font>
<font color="#1936C9">Blue</font>

H<font color="#f00">e</font>llo, World
Welcome to this <font color="#F7A004">Orange</font> world!

This is how it looks:
Grey
Purple
Blue

Hello, World
Welcome to this Orange world!

Couldn't find the color code you want?

Select the color you like in Color-Picker and paste the color code after # .

Use CSS class

You can define the text styles you want by defining CSS within the note and applying that style to the text.

Steps

1. In the example of blue, input the following text into the notes, where "blue" can be replaced with other colors.

<style>
.blue {color: blue;}
</style>

2. To customize the color in your notes, wrap the text with <span class="blue"> and </span>.

Example

<style>
.blue {color: blue;}
</style>

<style>
.orange {color: orange;}
</style>

<span class="blue">Blue</span>
Welcome to this <span class="orange">orange</span> world!

This is how it looks:

Blue
Welcome to this orange world!