ご覧いただき、ありがとうございます。
ブログ記事やプレゼン資料などを作成する際、色の指定で「RGB」や「Hex」といった記号や数値に、どうすれば良いか迷われたことはありませんか？
これらの記号や数値がよく分からないという方が少なくないので、今回はRGBとHex、2つのカラーコードについて解説します。この内容は色彩検定2級テキストにも記載されていますので、試験勉強にも役立つことと思います。
RGBの色の表示
まずはRGBです。
Web上の色は、色光の三原色であるR（赤）、G（緑）、B（青）の分量の組み合わせによって作られます。R・G・Bはそれぞれ256段階あり、0～255の数値で表されます。
例えば、三原色は
R：255、G：0、B：0 （Rのみがマックス）→ 赤
R：0、G：255、B：0 （Gのみがマックス）→ 緑
R：0、G：0、B：255 （Bのみがマックス）→ 青
また、白と黒は
R：255、G：255、B：255 （3色全てがマックス）→ 白
R：0、G：0、B：0 （3色全てが0）→ 黒
一番上にある色の設定ウィンドウの画像の背景色は
R：206 G：244 B：253 で、うすい緑みの青です。
Hex：16進数カラーコード
Hexは16進数（hexadecimal）の略です。Hexではコードの先頭に「#」の記号を付け、続く6つの数字でRGBの数値を16進数で表しています。
例えば、# 000000 は、R：00、G：00、B：00 を表します。
16進数は0～9までは十進法と同じですが、10から先が異なります。10～15はアルファベットのA～Fで表すのが特徴です。
（十進法） （十六進法）
10 → A
11 → B
12 → C
13 → D
14 → E
15 → F
16 → 10
この先は、17→11、100→64、150→96、200→C8と続き、最後は255→FFとなります。
上記のRGBをHexで表すと次のようになります。
R：255、G：0、B：0 ＝ #FF0000 → 赤
R：0、G：255、B：0 ＝ #00FF00 → 緑
R：0、G：0、B：255 ＝ #0000FF → 青
R：255、G：255、B：255 ＝ #FFFFFF → 白
R：0、G：0、B：0 ＝ #000000 → 黒
RGBとHexの変換方法
色の設定ウィンドウでは、RGBとHexのどちらかを入力すれば、もう一方は自動的に表示してくれるので、自分で変換する必要はありません。
ここからは、理解を深めたい方のために計算方法をご紹介します。
【RGB→Hex】
RGB→Hexに変換するには、RGBの数値を16進数に置き換えなければならないので、RGBの数値を16で割って値を求めます。16で割って得られた数値が2桁の上の位、余りが下の位です。
例として、画像の背景色（R：206、G：244、B：253）をHexに置き換えてみます。
Rの数値206を16で割ると、206÷16＝12 余り14です。
12と14は十六進法ではCとEなので、Hexの数字のうち左側2つはCEです。
同様にGは244÷16＝15 余り4なので、F4。
Bは253÷16＝15余り13なので、FD。
この3つを合わせて #CEF4FDとなります。
【Hex→RGB】
Hex→RGBの変換は、上記と反対にHexの数値に16を掛けて求めます。
まず、R部分のCEは12と14なので、上の位の12に16を掛けて、14を足します。
12×16+14＝206です。
同様に、GはF4なので、15×16+4＝244。
BはFDなので、15×16+13＝253。
この3つから、 R：206、G：244、B：253 となります。
Hexの16進数表示は、はじめは戸惑われるかもしれませんが、HexはWebでの色の指定でよく使われるカラーコードですので、覚えておいて損はありません。色の設定ウィンドウで色々と試して、楽しみながら慣れていただければと思います。
