WEBデザインで「色」を指定するには？【カラーコードの基礎を解説】

と気になっている人もいるでしょう。

そこで、この記事では下記の内容を解説していきます。

この記事で分かること

Web サイトを始めたばかりの頃は、いったいどのようにして「色」を指定するのか普通は分からないと思います。

でも原理さえ理解すれば全く難しいことではないので、しっかりと覚えておきましょう。
 

それでは、解説をスタートします。

Web サイトで表示する「色」の基礎

Web 上では、色を表示する方法が主に３つ存在します。

色を表示する方法

ちょっと見慣れない単語が出てきたと思いますが、これからちゃんと解説します。

英語で色を表記（140 色のみ）

基本中の基本となる色は、英語表記で指定することができます。
 

指定できるのは 140 色のみで、これらのことを「カラーネーム」とも言います。

どんな色が「カラーネーム」なのか、紹介しておきましょう。

カラーネーム

これら 140 色を使う場合は、英単語を指定することで色を表示できるようになります。

RGB 値を 16 進数で表記

まずは、RGB 値の説明から…

「光の三原色」を聞いたことがあるかもしれませんが、R（赤）、G（緑）、B（青）の濃淡の組み合わせによって色を指定したのが RGB 値になります。
 

それを 16 進数で指定する場合は、

の 16 個の英数字を使います。

16 進数で色を表示する方法

16 進数を用いて色を表示する場合には、「#」を最初に表示してから「6 桁」の英数字を指定する形になります。
 

先ほどのカラーネームの表にも記載しておきましたが、例として「赤」を指定したい場合は「#ff0000」となります。
 

実は、この並びはバラして考えると分かりやすくなります。

この 6 桁の数字は 3 つに分けることができて、最初の 2 桁が「赤」、真ん中の 2 桁が「緑」、そして後ろの 2 桁が「青」の色を表現します。

そして、その 2 桁の中で 0 から F の英数字を使ってそれぞれの色の濃さを調整します。

すると、組み合わせパターンが 256 通り作れることになるんです。
 

そして区分ごとに 256 通りとなるので、これが 3 つあると考えると約 1670 万色も作れるという計算になります。

RGB 値を 10 進数で表記

16 進数の方法を理解すれば、10 進数はとても簡単です。

10 進数は、0 から 255 までの数字だけを使って色を表現していきます。

10 進数で色を表示する方法

10 進数のときは、3 つの数字の塊を 2 つの「 .（ピリオド）」で区切ります。

これも先ほどの 16 進数の時の考え方と一緒で、最初の数字が「赤」、真ん中の数字が「緑」、最後の数字が「青」を表現します。
 

例えば、「赤」のときは「255.0.0」になります。

つまり、16 進数でも 10 進数でも基本的な指定方法は同じってことですね。
 

HTML で文字の色を変える方法

色を指定する方法を 3 つ紹介しましたが、基本的にはどれを使っても OK です。

ただ、HTML で文字の色を変える時は「16 進数」で指定するのが一般的です。

16 進数で赤を指定する場合

16 進数で文字を赤色にする場合は、このような記述になります。

<font color="#ff0000">赤色</font>

font 属性のタグを利用して、color で指定します。
 

10 進数で赤を指定する場合

HTML ではあまり使いませんが、10 進数を使うとしたらこのように記述します。

<span style="color: rgb(255,0,0)">赤色</span>

10 進数のときは、span 属性で style を指定します。
 

カラーネームで赤を指定する場合

カラーネームでも、もちろん赤色は指定することができます。

<font color="red">赤色</font>

どの方法を使っても、赤色と表現されるはずです。

色を探すのにおすすめのサイト

色を指定する基礎を紹介してきましたが、「赤を表現する 16 進数は #ff0000」というふうに色のデータを覚える必要は全くありません。

16 進数、10 進数、カラーネームを紹介してくれているサイトがあるので、色を使いたくなった時にだけ確認する程度で OK です。

原色大辞典

色を調べるなら、この「原色大辞典」だけ知っていれば OK というくらいのサイトです。

カテゴリー分けされているので見やすく、サイトにあった色を選びやすいです。

Peko Step

表示されている色から探すのではなく、自分で色を調整しながら「16進数」と「10進数」を確認できる「Peko Step」の「WEBカラーチャート」。

彩度を調整したりしながら、自分の欲しい色を作って確認できるので便利です。

Google

もっと言うと、色を教えてくれた画面で色を調整すると自分の欲しい色を作れますし、「10進数」などの他の表現方法もちゃんと教えてくれます。

まとめ：色を使って素敵なサイトを

以上で、WEBデザインで「色」を指定する方法とカラーコードの基礎を解説しました。
 

16 進数ではどのように入力すれば良いのかなんてのは覚える必要はなく、システムだけ理解してしまえばなんてことなかったと思います。

あとは、サイト全体の色を変えたり、文字や背景などを変えて楽しんでみてください。