{%hackmd BJOT7rhoyl %}

# 如何自訂文字顏色?

## 使用 HTML 的 font 元素

你可以透過 HTML 的 `font` 元素，將一段文字放在 `font` 元素中，並指定文字顏色

1. 使用 `<font color="#f00">` 和 `</font>` 前後包住想要變色的文字
2. `#` 符號的後面請輸入指定的顏色代碼，例如：
- 灰色 #96999A
- 紫色 #AC19C9
- 藍色 #1936C9
- 紅色 #f00
- 橘色 #F7A004

### 範例

<font color="#96999A">灰色</font>
<font color="#AC19C9">紫色</font>
<font color="#1936C9">藍色</font>

H<font color="#f00">e</font>llo, World
歡迎來到<font color="#F7A004">橘色</font>的世界！

實際顯示如下 :point_down:
<font color="#96999A">灰色</font>
<font color="#AC19C9">紫色</font>
<font color="#1936C9">藍色</font>

H<font color="#f00">e</font>llo, World
歡迎來到<font color="#F7A004">橘色</font>的世界！

:::info
:bouquet: 找不到喜歡顏色的色碼？

可以透過 [Color-Picker](https://htmlcolorcodes.com/color-picker/) 選擇想要的顏色，並將色碼貼入 `#` 符號的後面即可。
:::

## 使用 CSS 的 class 功能
另一個方式，你可以透過在文件內定義 CSS 的作法，定義您想要的文字樣式，並將該樣式套用到文字中

1. 以藍色為例。在筆記中輸入下面文字，其中blue可以替換其他顏色。

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

2. 在筆記當中想要自訂顏色時，使用 `<span class="blue">` 和 `</span>` 前後包住文字。
### 範例

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

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

<span class="blue">藍色</span>
歡迎來到<span class="orange">橘色</span>的世界！

實際顯示如下 :point_down:
<style>
.blue {color: blue;}
</style>

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

<span class="blue">藍色</span>
歡迎來到<span class="orange">橘色</span>的世界！

&nbsp;

---
### 相關功能
- [HackMD 換行顯示規則](https://hackmd.io/s/link-with-github-tw#%E6%8F%9B%E8%A1%8C%E9%A1%AF%E7%A4%BA%E8%A6%8F%E5%89%87)
- [強調重點：螢光筆、色塊強調和收合功能](/s/X78DjnM0RrWJM6xWKankYg)
- [快速打出 Emoji](/s/35egAOr6Sp6QYuFjX80SQA)
- [更換文字顏色](/@docs/customize-font-color-zh)