ホームページ制作でWEBカラーの微妙な調整は難しいものです。
そこで今回はホームページ制作の色の微調整のやり方と便利な色見本ページの紹介をします。

ホームページ制作で使うカラーコードって何？

ホームページ制作をするときの色指定って#プラス6個の半角英数で指定します。
この数字っていったいどこから出てきた数字かご存知ですか？
当然適当に振られた数字ではありません。

このカラーコードはいろいろな呼び方をしますが、一般的には「HTMLカラーコード」と呼びます。
「Adobe Dreamweaver」や「ホームページビルダー」などのホーム制作ソフトやWordPressのビジュアルエディタを拡張するプラグイン「TinyMCE Advanced」などを使うと色の選択が視覚的にできます。
しかし、HTMLカラーコードの本当に微妙な濃度の調整はどうしたらよいか！？
数値で調整できると便利だと思ったことはないでしょうか。
では、この数値の謎を解き明かしていきましょう。

黒と白の謎

HTMLカラーコードで黒は#000000、白は#ffffffと書きます。

その他の色について考えると数字の0～9とアルファベットのa～fまでしか使われていないことが分かります。
つまり#ffffffと言うのが一番明るい色で、#000000が一番濃い色になります。0が一番濃いというのがなんとなく変な感じがしますが、このHTMLカラーコードは感覚的には大きい小さいが逆になっています。

小学校の頃の絵の具を思い出して頂くと、いろいろ色が混ざっていくとだんだん黒くなっていったと思います。
HTMLカラーコードもこの原理です。

HTMLカラーコードは16進法

実はこのコードは16進法で書かれていて、これを我々のの馴染み深い10進法に置き換えたものがRGBカラーと呼ばれます。
RGBとは、R(Red：赤)、G(Green：緑)、B(Blue：青)をで作られる色のことで、ディスプレイ上の色を表現するための手法です。
天井に設置してあるようなプロジェクターで、3つの光源があるものを見かけたことがある方もいらっしゃると思いますが、あれがRGBの原理です。
昔のブラウン管テレビも3つの光が出ていました。
RGBは1つのカラーが0から255段調の数値で表します。
そこで先程お話ししましたように
black（黒）は0 0 0、white（白）は255 255 255になります。

つまり、whiteを#ffffffと書きますが、これはff ff ffという3つの数字に分かれます。

ffを10進法に変換するには、昔習ったN進法の公式を思い出してN=16で計算すると
N¹×15+N⁰×15となり
16×15+1×15＝255になります。

ff ff ffを10進法に変換すると255 255 255になります。

代表的なカラーコード

HTMLカラーコードは下記のように表せます。

RGBで表現する色のなかでWEB制作でよく使われる140色（ X window system, version 11カラー）は、どのブラウザーでもサポートされていますので名前で色指定をすることができます。
一般的にカラーネームとはこの140色のことを言います。

＜参考サイト＞
カラーネーム　W3G
X11の色名称　カラーサイト.com

CSSで使えるカラーコード短縮

CSSで色を指定するとき、16進数6桁で書くのが一般的ですが、一部の色は16進数3桁に短縮することができます。各色の2桁を１桁にするイメージになります。

#ffffffであれば#fff、#000000であれば#000のようになります。

そもそもRGB、CMYKの違いって何？

Adobe Photoshopやillustratorなどのソフトには色指定時にCMYKという選択枠があります。
これは、紙にオフセット印刷をするときに使う色指定の方法で、C（シアン）、M（マゼンダ）、Y(イエロー)、K（ブラック）の4色で色を作る仕組みです。オフセット印刷ではこの4色の網点でできた色を重ねて印刷します。
印刷機の中には6色機もありCMYKで表現できない特色（金や銀のほかに会社のロゴ色のような色など）も加えて印刷するものもあります。
ちなみに、渋沢栄一の1万円札は表面14色、裏面7色の特色を使って印刷しています。
商品券なども特色を何色も重ねて、印刷されています。

話がそれましたがCMYKは印刷向けのカラーで、RGBはスクリーン（モニター）向けのカラーということです。
赤・緑・青ですが緑というより黄緑というイメージです。この3色が基本色になります。

red #FF0000　255 0 0（赤）
lime #00FF00　0 255 0（緑）→黄緑
blue #0000FF　0 0 255（青）

次に

red #FF0000　255 0 0
にlimeを足すと
yellow #FFFF00　255 255 0（黄色）

blueを足すと
magenta #FF00FF　255 0 255（ピンク）

lime #00FF00 0 255 0
にblueを足すと
cyan #00FFFF 0 255 255（水色）
になります。

RGBカラーはCMYKの数字が大きくなれば、色が混ざるのと逆の定義で数字が小さくなると色が混ざることになります。
つまり#000000がすべての色が混ざった黒になるわけです。
小学生のころの絵の具と同じですね。

今の原理がCMYKのKを抜いた色の感覚で行くと
CMYはcyan（水色）、magenta（ピンク）、yellow（黄色）から考えたほうがわかりやすいです。
cyan＋magenta＝青の場合
cyan #00FFFF
magenta #FF00FF
の数値の低い方が色が濃いのですから
合わさると
#0000FFとなり青になります。同様に
magenta #FF00FF　＋　yellow #FFFF00　＝　red　#FF0000　255 0 0（赤）
cyan #00FFFF　＋　yellow #FFFF00　＝　lime #00FF00　0 255 0（緑）
となり少しイメージが付きやすくなると思います。

上記を基本色と考えて、色調整していけば少しわかりやすくなると思います。

主な色見本は原色大辞典のサイトがわかりやすいくお勧めです。

カラーコードの微調整の仕方

WEBの入り調整は難しいですよね。特に薄い色は！
色見本を参考にしたり、システムカラーで視覚的に見たりできますが
微調整はアナログでもできます。

やり方は二桁の右のほうから
0→1→2→3→4→5→6→7→8→9→a→b→c→d→e→f
F→E→D→C→B→A→9→8→7→6→5→4→3→2→1→0
もしくはその逆の順番で調整していけば薄くしたり濃くしたりの調整をしていけます。
同じ系統の色調整の場合RGBすべてを同じ増減にすればよいです。

色を薄くするのであればF（15）に近づけていけば良いということです。
逆に暗くする場合は0に近づけることになりますが例外もあります。

おすすめ色見本サイト

■画像の色を抽出してHTMLカラーコードを表示
Colors From Image
IMAGECOLORPICKER.COM

■カラーチャート
Material Design Color Chart
Color Hex Color Codes
カラーグラデーション 459色の色見本 カラーコード一覧

■カラー調整
HTML color code
RGBとHSLの相互変換ツールと変換計算式

■デザイン
Trendy Web Color Palettes and Material Design Color Schemes & Tools

まとめ

美術の教科書に出てきた色相環図

色と言うのは、わずかな組み合わせの違いでも、イメージが変わってきます。
原色系の色はある程度色相環図を見れば何とかなりますが、RGBカラーは淡い色が難しいイメージがあります。
RGBカラーの色数は255×255×255 = 16,581,375色となります。
この1600万の色を楽しんでホームページ制作をしていただければと思います。

ホームページ制作お問い合わせ >>> こちら