私たちが日常で「色」について話す時は、もちろん「赤色」とか「青色」という形で表現しますよね。
WEB においては、「色」を表現するには３通りの方法で表すことができます。
- 英語で色を表記（16色のみ）
- RGB値を16進数で表記
- RGB値を10進数で表記
くま五郎
リョウ
それでは、WEB 上で色を表現するときの考え方を紹介していきましょう。
もくじ
WEB 上で色を表現するときの仕組み
WEB 上で色を表現する方法は３通りあるんだけど、あくまで「概念」や「仕組み」を理解すれば良いだけ。後は、何色がどういうものなのかなんて覚える必要はないんです。
英語表記で色が出せる16色
まずは、基本中の基本となる色は「カラーネーム」という言い方で英語表記で表示することができます。
基本となるものだけなので、「カラーネーム」が使えるのは 16 色だけ。
| black | gray | silver | white | ||||
| maroon | red | purple | fuchsia | ||||
| green | lime | olive | yellow | ||||
| navy | blue | teal | aqua |
どんなブラウザでも表示させることができるので、古いブラウザでも大丈夫です。昔のサイトなんかだと、これらの色が一般的に使われていましたね。
16進数で色を出す考え方
「16進数」という言葉だけで数学が苦手な人はゾッとするかもしれませんが、理解してしまえば難しいことではないです。
「16進数」として使われるのは、以下の英数字。
16 個の英数字を使うんですけど、これらの組み合わせで色を表示していきます。
色を使う時には、必ず「#」の後に「6 桁の数字」で指定していきます。
例えば、「赤色」であれば #ff0000 とか、ライム色であれば #00ff00 といった感じになります。
実はこの 6 桁の数字は３つに分けることができて、最初の 2 桁が「赤」、真ん中の 2 桁が「緑」、そして後ろの 2 桁が「青」の色で構成されているんです。
そして、その 2 桁の中で 0 から F の英数字を使ってそれぞれの色の濃さを調整します。すると、それぞれのパターンが 256 通りになるんですね。
ちなみに 0 が最も色が濃く、F が最も色が薄くすることになります。
つまり、先ほどの #ff0000 は、最初の 2桁である「赤」の区分が最も濃い状態（両方とも F で指定）されていたので、シンプルな赤が表示されたということになります。
基本となる「赤」「緑」「青」の濃さを指定することで、色を表現していくことになります。すると、約1670万色の色を作り出すことができます。
10進数で色を出す考え方
「RGB値」という聞きなれない単語ですけど、「16進数」のときの解説を理解できていれば簡単に理解できます。
察しの良い人ならすぐに分かったと思いますが、「RGB値」は「R = Red」「G = Green」「B = Blue」という意味。
それぞれを 0 から 255 の数字で指定すると、色を指定することができます。
ちなみに、0 が最も薄く、255 が最も濃い色を表すことができます。
それを踏まえると、「赤」にするなら 255,0,0 ということになります。
HTML では「16進数」を使うことがほとんどですけど、CSS の時はこの「10進数」を使って色を指定することもよくあります。
文字に色を付ける手順
WEB 上での色の考え方は理解できたと思いますが、では文字をどのようにして色付けするのかチラッと解説しておきましょう。
「16進数」を使った色付けが一般的で、赤を例にすると下記のようになります。
<font color="#ff0000">赤色</font>あまり HTML では一般的ではないですが、一応「10進数」での表記は以下のようになります。
<span style="color: rgb(255,0,0)">赤色</span>もちろん、「赤」であればカラーネームを使っても良いですけどね。
<font color="red">赤色</font>どれにしろ、赤色 と表示されるはずです。
色を探すのに便利なサイト
この記事で色を紹介しても良いのですけど、すでに便利なサイトがたくさんあるのでそちらを紹介します。
とその前に、もう１つだけ。
最近のブラウザではかなりのレアな色でも表示できるようになりましたが、色によっては表示できないものもあります。
そうならないためにも、なるべく「セーフカラー」と呼ばれる 216 色から選んでおいた方が安心ではあります。
原色大辞典
>> https://www.colordic.org/
サイトとしてとても見やすい「原色大辞典」は、「和色」「洋色」などといったカテゴリー分けもしてくれているので色を考えやすいです。
「セーフカラー」を選びたい時は、「web216」というカテゴリーがそれに該当します。
Peko Step
>> https://www.peko-step.com/tool/colorchart.html
表示されている色から探すのではなく、自分で色を調整しながら「16進数」と「10進数」を確認できる「Peko Step」の「WEBカラーチャート」。
彩度を調整したいしながら、自分の欲しい色を作って確認できるので便利です。
これは補足的な情報なんですけど、Google 検索で「16進数」を入力すると何の色なのかを教えてくれます。
もっと言うと、色を教えてくれた画面で色を調整すると自分の欲しい色を作れますし、「16進数」や「10進数」もちゃんと教えてくれるんです。
リョウ
さいごに
ブログとかを始めたばかりだと、色を表記するときに出てくる英数字は何だ？ ってなるんですよね。
一旦理解してしまえば、RGB値が何だったか覚える必要は全くなく、「原色大辞典」などを見てサクッと調べれば良いだけです。
文字だけでなく、背景色なども変えてカラフルなサイトを作ってみましょう！