Qiita おすすめの文字色

# はじめに

Qiitaと題名に入れましたが、けっこう汎用的な話題かなと思います。

ずばり、<font color="Hotpink" size=4>「ダークモードでもライトモードでも見やすい文字色って何！！！」</font>です。

Qiitaだと、表示モードはユーザーによります。

僕は`<font color="LightGreen">`が好きで使っていたのですが、
ライトモードだとなかなか見え辛いんですよね。

<font color="LightGreen">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1b7051d0-4b41-99c4-67dd-cdb3f9592410.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/0f789322-b9ee-084d-c8f7-a72b75140c19.png)

なんとかしなきゃな～と思ってはいまして、やっと重い腰をあげた次第です。

ということで、こちら ↓ の記事を参考に、見やすそうな色を見つけていきます！

https://qiita.com/twipg/items/d8043cd4681a2780c160

（Qiitaでは自分のアイコンクリック⇒「テーマカラー」クリックで表示モードを切り替えることができます！ぜひ、自分の目でも違いを見てみてください！）
![[Pasted image 20240220174432.png]]

# 欲しい色の条件

まず、<font color="Deepskyblue">原色はあまり使いたくない</font>です。
原色は見やすい！というのはわかってるんですが・・・原色を使わないことでセンス良く見せたい・・・・・・

3色ほど欲しいですね。
「ネガティブな時の色」
「ポジティブな時の色」
「ポジティブな時の色②」
という感じで使い分けていきたいです。

王道なのは、
「ネガティブな時の色」：青系
「ポジティブな時の色」：赤系
「ポジティブな時の色②」：黄色系
でしょうか。

# 選定していく

ピンク系は、`HotPink`がいい感じに見えます！

<font color="HotPink">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/644ce4ea-d5bd-4207-8859-7f7962c83113.png)


パープル系は、`Violet`がいい感じでしょうか。
ネガティブ・ポジティブという点ではどちらとも言いにくく、少し使いにくいかも。
でもいい色ですね。
<font color="Violet">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/53e7bf59-eee8-9a7a-8f1e-f6d53894e268.png)


赤系はなかなかいい色がそろってます。
特に`Salmon`が良いですね。赤らしさも強めで、「強調」に使いやすそうです。
<font color="salmon">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/40f56da3-7365-c4bb-1909-4cfc546c8a2c.png)


オレンジ系も良さげです。特に`Orange`
後述しますが、黄色系が全滅なので、その代わりに使えそうです。
<font color="orange">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/b88b41c3-aabf-03c8-78b2-b984ba3d05b7.png)


黄色系はライトモードで全滅でした。
唯一いい感じに見えた`Gold`も、単体で使うとやはり見にくいです。
<font color="gold">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/e914bd7a-5654-87df-7492-9b53789c8e35.png)

緑系は`LimeGreen`が非常に良き。
緑系はポジティブ寄りの・・・難しい色ですが、好きな色なんですよね。
Qiitaの色だし、使っていきたい！
<font color="LimeGreen">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2661726d-2fcc-d531-af08-306689c24681.png)


シアン系は`DarkTurquoise`がいい感じ！
色がめっちゃ好きです。ネガティブというにはちょっと明るすぎるかな？
<font color="DarkTurquoise">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6b9a2bb-a1ae-9272-39ab-7d3c94a64eb8.png)

青色系は`Deepskyblue`が良き。見やすい上しっかり青。
<font color="Deepskyblue">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/948af601-8a69-57c7-5d28-60567e7b3527.png)

ブラウン系は`Peru`が良さげです。ブラウンを使うかは置いといて。
<font color="Peru">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6437a689-7df7-5282-ef92-564285d50f03.png)

白系と灰色系は全滅です。強いて言えば、`DarkGray`を隠し文字的に使うかも。
<font color="DarkGray">Qiitaは`font`じゃなく`span`を使えるようにしろ～！  </font>的な

<font color="DarkGray">example</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f8d53b87-c2cc-a394-601c-8b5f38b70dbe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/e4505539-08bb-95da-b1b5-b7bc1ea5f66c.png)

# まとめ

以下の形で使っていきたいと思います！

<font color="HotPink">example</font> `HotPink` 
<font color="Violet">example</font> `Violet` ネガ① 
<font color="salmon">example</font> `Salmon` ポジ①
<font color="orange">example</font> `Orange` ポジ②
<font color="LimeGreen">example</font> `LimeGreen` ポジ③
<font color="DarkTurquoise">example</font> `DarkTurquoise`
<font color="Deepskyblue">example</font> `Deepskyblue` ネガ②
<font color="Peru">example</font> `Peru`
<font color="DarkGray">example</font> `DarkGray`

# おわりに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/39ca34eb-335e-8c58-f62c-2df5bc7aa2f9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/21bb583b-41bd-6396-a328-431ad3c1e6ff.png)

※`<font>`タグは一般的には推奨されておらず、`<span style="" >`を使用することが推奨されています。
2024/02現在、Qiitaでは`<font>`タグのみ使用可能ですので、本記事では`<font>`タグを使用しております。