運営するウェブサイトで、色彩豊かな表現をするために細かな配色を考えたい場合があります。
しかし、一般に広く使われている色の指定方法は、RGBの比率を数値で記述するため、視覚的に見る色と設定する数値との関係がイメージしにくく、設定値の記述に苦労することがあります。
色はそのサイトや記事を印象付ける重要な要素
そんな時に役に立つのが、WordやExcelなどのoffice（オフィス）で標準的に使われている「色の設定」機能を用いる方法です。
色の設定
ウェブサイトのページで色を設定する場合、HTMLでもCSSでも、光の三原色RGB (赤緑青)ごとの比率を、256階調ごとに指定・記述する方法が一般的になっています。
具体的な記述としては、
プロパティ=”#789abc”
のようになります。
ここで”#”以降の6ケタの数値は、2ケタごとにR (赤) 、G (緑) 、B (青)の割合を16進の数値で記述します。
例えば、6ケタの数字をffffffにすれば白になりますし、000000にすれば黒になりますし、ff0000にすれば赤になるといった感じです。
下記に、６桁の数値と実際の色のサンプルを参考に示します。
| ffaa55 | aaaa55 | 55aa55 | 00aa55 |
| ffaa00 | aaaa00 | 55aa00 | 00aa00 |
| ffff00 | aaff00 | 55ff00 | 00ff00 |
| ffff55 | aaff55 | 55ff55 | 00ff55 |
| ffffaa | aaffaa | 55ffaa | 00ffaa |
| ffffff | aaffff | 55ffff | 00ffff |
| ffaaff | aaaaff | 55aaff | 00aaff |
| ff55ff | aa55ff | 5555ff | 0055ff |
基本的な色の場合は簡単な数値ですし、代表的な色の場合は、色と設定値とのサンプルなども多くありますから、数値の記述は比較的容易です。
しかし、微妙な色合いを表現したいなどの用途の場合には、数値をいくつにすればよいのか迷います。
こんな場合には、WordやExcelなどのOfficeで標準的に使われている「色の設定」機能が有用で、視覚的に好みの色を選ぶと、設定すべきRGBの値が直ぐに分かりますので、とても便利です。
操作は簡単
さて、実際の操作方法ですが、まずWordやExcelを開きます。基本的なやり方は同じなので、ここではExcelを用いて説明します。
(1)色の設定画面を開く
通常の編集画面において、「ホーム」－「フォント」－「塗りつぶしの色」（「フォントの色」でも可）－「その他の色」の順に操作して、「色の設定」画面を開きます。（下図）
「ホーム」－「フォント」－「塗りつぶしの色」－「その他の色」で色の設定画面を開く
「色の設定」画面を開くにはのセルの書式設定から「フォント」－「色」－「その他の色」でも、或いは「塗りつぶし」－「その他の色」でも操作が可能です。
「色の設定」画面
(2)色を選択
「色の設定」画面が開いたら、「ユーザ設定」タブを選び（下図の赤枠の領域）ます。
すると、画面の左上にカラフルな色表示（下図の緑枠の領域）が表れますので、表現したい色に最も近い色のところをクリックします。
ユーザー設定タブを選び、緑枠内の所望のカラーをクリック
すると、カラフルな色表示の右側に、クリック選択した色に近い色の濃淡調節用の縦長のバー（下図の水色枠の領域）が表示されますので、このバーをクリックして、適切な「濃さ」にします。
右側にあるスライダー（水色枠）で濃淡を調節する
このバーはスライダーになっていますので、バーの右横にある三角マーク（◀）をスライドさせることで濃淡の微調整も可能です。
「色の設定」画面の右下の「新規」という文字の直下（下図の赤枠の領域）に、現在選択されている色が表示されますので、必要に応じて上記の操作を繰り返して色を再調整します。
新規の下に表示された色をみて確認する
(3)数値を確定
表現したい色が決まったら、「色の設定」画面中央にあるカラーモデルが「RGB」であることを確認して、赤(R)、緑(G) 、青(B)の値（下図の赤枠の領域）を読み、書き留めておきます。 (カラーモデルが「RGB」でない場合は、「RGB」を選択設定してから値を読みます)
カラーモデルがRGBであることを確認して、赤緑青の値を読み取る
ここで読んで記録した値100、150、200(10進数)が記述すべき値となりますが、HTMLやCSSで色の記述をする場合は16進数ですから、数値を変換する必要があります。
計算方法は、記録した値を16で割り、その「商」を左の桁、「余り」を右の桁として表記するだけです。
但し、「商」や「余り」が10, 11, 12, 13, 14, 15の場合は、それぞれa, b, c, d, e, fになります。
例えば、「色の設定」画面で読み取ったRGBの値がそれぞれ、100, 150, 200だった場合、これらは16進数ではそれぞれ、64,96,c8になります。従って、この場合の、実際の色の記述の仕方は、
プロパティ=”#6496c8″
のようになります。
なお、10進数を16進数を変換する場合、Excelの関数「dec2hex()」を用いると非常に便利です。
例えば、100 (10進数)の16進数を求めたい場合は、Excelの任意のセル内に「=dec2hex (100)」と記述すれば、16進数である64を表示してくれます。関数「dec2hex ()」は、10進数を入力することで16進数を出力してくれる関数です。