この記事では、カラーコードの意味と見方や調べ方について解説します。
カラーコードとは？
カラーコード（color code）とは、WEBページ上の色を表現するために使用する制御コードのことです。
一般的には、主にHTMLやCSSなどで使用される、「#」から始まる6桁の16進数で表記されるコードを指します。
カラーコードの見方
「#」に続く「6桁の16進数（0～9、A～F）」によって、赤（R：Red）、緑（G：Green）、青（B：Blue）の光の三原色の強さを指定しています。
- 赤：#FF0000
- 緑：#00FF00
- 青：#0000FF
- 白：#FFFFFF
- 黒：#000000
6桁のうち、前2桁が「赤」の強さ、真ん中の2桁が「緑」の強さ、後2桁が「青」の強さを表しています。
3原色それぞれについて、2桁の16進数を用いて「00」から「FF」まで256段階の強弱を指定することができます。
例えば「赤：#FF0000」の場合は、赤の強弱を表す前2桁が最も強い「FF」で、緑と青の強弱を指定する真ん中2桁と後2桁は最も弱い「00」になっています。
光の3原色をすべて混ぜると白になるため「#FFFFFF」となり、黒は3原色のどの光もない状態なので「#000000」と表すことができます。（「光の3原色」は、「色の3原色」とは異なります。）
カラーコードの調べ方
カラーコードを調べる具体的な方法について紹介します。
色名と対応するカラーコードの調べ方
例えば、
- 「ロイヤルブルー（royalblue）」に色を設定したいがカラーコードが分からない
- 実際に色を見ながら、自分が気に入る色を探したい
といったような場合、以下のWEB色見本サイト「原色大辞典」が非常に便利です。
例として記載した「ロイヤルブルー（royalblue）」は、上記画像の7行目×2列目にあり、カラーコードは「#4169e1」であることが分かります。
テキストのカラーコードの調べ方
テキスト（文字）のカラーコードの調べ方については、こちらで、ブラウザから簡単に確認できる方法を説明しています。
画像のカラーコードの調べ方
画像で使用されている色のカラーコードを調べるには、以下のようなサイトを利用するのがおすすめです。
・イメージカラーピッカー
https://lab.syncer.jp/Tool/Image-Color-Picker/
・バナー工房
https://www.bannerkoubou.com/
・PEKO STEP
https://www.peko-step.com/tool/getcolor.html
イメージカラーピッカーの使用例
カラーコードを調べたい画像をアップロードすると、このような画面が表示されます。
(上記は当ブログのテーマ画像の例です。）
画像上のカラーコードを知りたい場所にマウスカーソルをあわせると、画面の上部に選択箇所のカラーコードが表示されます。
（上記例では、文字背景の黄色部分にマウスカーソルを当てています。）
また、画像内で使用されている色・カラーコードの一覧が画面下部に表示されます。
まとめ
この記事では、カラーコードの見方や調べ方について解説しました。
WEBサイトやブログなどで色の調整を行うためには、このカラーコードについて概要を理解しておく必要があります。
カラーコードが「光の3原色を6桁の16進を用いて表現している」ことを知っておき、実際に色を選定したり調べたりする際には、こちらを参考にすれば誰でも簡単にできます。
