{%hackmd rJ_1SdPkxx %}

# 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!

:point_down: This is how it looks:
<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!

:::info
:bouquet: Couldn't find the color code you want?

Select the color you like in [Color-Picker](https://htmlcolorcodes.com/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!

:point_down: This is how it looks:

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

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

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