カラーコードとは？見方と調べ方を解説！16進数で色を表現

この記事では、カラーコードの意味と見方や調べ方について解説します。

カラーコードとは？

カラーコード（color code）とは、WEBページ上の色を表現するために使用する制御コードのことです。

一般的には、主にHTMLやCSSなどで使用される、「#」から始まる6桁の16進数で表記されるコードを指します。

「#」に続く「6桁の16進数（0～9、A～F）」によって、赤（R：Red）、緑（G：Green）、青（B：Blue）の光の三原色の強さを指定しています。

カラーコードの例

6桁のうち、前2桁が「赤」の強さ、真ん中の2桁が「緑」の強さ、後2桁が「青」の強さを表しています。

3原色それぞれについて、2桁の16進数を用いて「00」から「FF」まで256段階の強弱を指定することができます。

例えば「赤：#FF0000」の場合は、赤の強弱を表す前2桁が最も強い「FF」で、緑と青の強弱を指定する真ん中2桁と後2桁は最も弱い「00」になっています。

光の3原色をすべて混ぜると白になるため「#FFFFFF」となり、黒は3原色のどの光もない状態なので「#000000」と表すことができます。（「光の3原色」は、「色の3原色」とは異なります。）

カラーコードを調べる具体的な方法について紹介します。

例えば、

といったような場合、以下のWEB色見本サイト「原色大辞典」が非常に便利です。

例として記載した「ロイヤルブルー（royalblue）」は、上記画像の7行目×2列目にあり、カラーコードは「#4169e1」であることが分かります。

テキスト（文字）のカラーコードの調べ方については、こちらで、ブラウザから簡単に確認できる方法を説明しています。

画像で使用されている色のカラーコードを調べるには、以下のようなサイトを利用するのがおすすめです。

カラーコードを調べたい画像をアップロードすると、このような画面が表示されます。
(上記は当ブログのテーマ画像の例です。）

画像上のカラーコードを知りたい場所にマウスカーソルをあわせると、画面の上部に選択箇所のカラーコードが表示されます。
（上記例では、文字背景の黄色部分にマウスカーソルを当てています。）

また、画像内で使用されている色・カラーコードの一覧が画面下部に表示されます。

この記事では、カラーコードの見方や調べ方について解説しました。

WEBサイトやブログなどで色の調整を行うためには、このカラーコードについて概要を理解しておく必要があります。

カラーコードが「光の3原色を6桁の16進を用いて表現している」ことを知っておき、実際に色を選定したり調べたりする際には、こちらを参考にすれば誰でも簡単にできます。