【初心者でも簡単！】HTMLで文字の色を指定する方法

HTMLのカラーとは

HTMLでの色は、RGB値で設定するカラーコード、redなどの色名で設定するカラーネームのどちらかで設定します。

RGBとは、R(Red：赤)、G(Green：緑)、B(Blue：青)を混ぜることで、ディスプレイ上で様々な色を表現するための手法です。赤、緑、青をそれぞれどの分量混ぜるかを、RRGGBBと並べて16進数の数値で表現します。例えば、黒なら #000000　、赤は#ff0000　、緑は　#008000　という記述になります。

カラーネームとは、RGBで表現する色のうち、Webでよく使われる140色につけられた色の名前です。黒なら black 、赤は red 、緑は green　という記述で指定ができます。

HTMLのカラーを変更する方法

HTML上でカラーを変更する時には、HTML上のタグに色の指定を行う方法と、CSS（スタイルシート）上で指定する方法があります。

HTMLタグで文字色を指定する方法

今回は、簡単に文字をHTML上で変更するために、タグで文字色を指定してみましょう。HTML上で、文字のカラーを指定するにはこのように記述します。

早速使ってみましょう！

<font color="#ff4500">■■■■■■■</font>
<font color="orangered">オレンジレッド</font><br>
<font color="#00bfff">■■■■■■■</font>
<font color="deepskyblue">ディープスカイブルー</font><br>
<font color="#f5f5f5">■■■■■■■</font>
<font color="whitesmoke">ホワイトスモーク</font><br>

いずれも、RGB値とカラーネームでうまく指定ができました！

HTMLのカラーを調べるのに便利なサイト5選

RGB値とカラーネームを調べるのに便利なサイトを5つ紹介します！

Google検索

画像出典：Google

URL：https://www.google.co.jp/

検索窓にカラーコードを入力すると、カラーピッカーが表示されます！ カラーピッカー上で丸を好きな色にドラッグすると、その色のカラーコードが取得できます。ちょこっと色を調べたい時に、手軽に利用できますね。

HTMLカラーコード

画像出典：HTML Color Codes

URL：http://html-color-codes.info/japanese/

選択した色のコードがボックスに表示されるシンプルなサイトです。探したいカラーコードが決まっている人におすすめです。

Web色見本

画像出典：Web色見本

URL：https://www.colordic.org/

カラーネームとカラーコードがみやすい一覧になっていて、とても探しやすいページです。原色、和色、パステルカラーなどテーマ別にまとまっているのもとても便利ですね。

TAG index カラーグラデーション

画像出典：TAG index

URL：https://www.tagindex.com/color/color_gradation.html

グラデーションで色を使いたい時に便利なのがこちらのグラデーションチャート。スタイルシートで薄い色から濃い色に変化させる時などに便利です！

サルワカ 配色パターン見本40選

画像出典：サルワカ

URL：https://saruwakakun.com/design/gallery/palette

Web作成の初心者に役立つ情報がいっぱいのサイト、サルワカ。こちらのページでは、クリックで配色パターンを選ぶと右に表示されているサイトイメージも更新されるので、実際に使用した雰囲気を確認しながら配色パターンを考えることができます。「親近感を感じさせる配色」「クール系の配色パターン」など、ジャンルに分けて紹介してくれているので、近づきたいイメージに合わせて選ぶことができますね。文字以外でも、サイト全体の配色に自信がない方に利用をオススメします。

まとめ

今回はフォントのカラーを変更してみましたが、背景や画面の指定部分など、色々な所にこの色指定を応用することができますよ。他の記事も参考に、色々と試してみてくださいね。

CodeCampus 参考記事：
【初心者向け】HTMLで文字色や背景色を指定する方法を詳しく解説