WordPressなどで色のカスタマイズに便利なWEB色見本原色大辞典

インターネット全般

カラーはデザイン的にも機能的にもとても大事

こんにちは。WEBディレクターの金川です。
今日はWordPressに限定しない「WEB」そのものについてのちょっとしたスキル&知識について紹介しようと思います。
そして具体的なテーマは「WEBにおける色=カラー」についてです。
カラーって実はとっても大事でして、同じレイアウトやバランスであっても、色の選択や配置が違うだけで、クールになったりなんだかカッコ悪いなあーなことになったりします。
まあカッコ悪いだけならまだしもなんですけど、見にくかったり読みにくかったりすると、カッコ悪いだけではすまずに、本来のWEBの機能を損なうこともありえるので、そのへんは注意が必要ですよね。

印刷における色の規格=CMYK

さて色なんですが、印刷における色とWEB上での色とはまったく別の規格の話なんですね。
具体的にこんな規格になります。
印刷における色の規格=CMYK
C=シアン≒青
M=マゼンダ≒赤
Y=イエロー=黄色
K=ブラック=黒
というふうに、ざっくりとですが、4つの基本色の掛け合わせで決められます。
一つ例を上げてみますね。

というように、上記の割合のCMYKの色の配合で、こんなピンクが構成されてるんですね。

光の色の規格=RGB

次にWEBで使う色の規格です。
まあWEBのというより、光で構成される色の規格といったほうが正確なんですけどね。
モニタースクリーンで表示される色のことなので。
光の色の規格=RGB
R=レッド
G=グリーン
B=ブルー
この三つの光の要素で光の色は構成されてるんです。

RGBの光の強さの割合によって光の色は決まります。

WEBで使う「カラーコード」

ちょっとややこしいんですが、WEBでカラーを指定する際には、実際にはRGBではなく、「カラーコード」というものを指定するんですよ。
WEBで使う色のは全てカラーコードが決まっていまして、そのカラーコードを指定することで枚違いなく絶対的な色の指定ができます。
カラーコードは「#」が前に付く6ケタの数字とアルファベットの組み合わで表現されるんです。
上記の色の例で言えば、

というわけです。

WEB色見本 原色大辞典

まあこんなお勉強みたいなことはこれくらいにしておきます(笑)
ちょっと楽しげなことを紹介させていただきますね。
それはコレ。WEBの色見本です。

WEB色見本 原色大辞典 – HTMLカラーコード

さまざまなサイトでWEBカラーの見本を見せてくれるんですが、ボクはこのサイトが一番見やすくて分かりやすいので、ここばっかり見てます。
また和風とか、パステルとか、いろんなテイストを集めいてくれているので、使いやすいだけではなくて、見ててとっても楽しいんですね。

↓具体的な使いは下のように使います。
↓WEB色見本で使いたい色を選ぶ。
↓その色のカラーコードをコピーする(#ffa500とかです)
↓画像編集ソフト上でコピーしたカラーコードを指定する。

というふうに利用しているんです。
画像編集ソフトとは、アドビ・イラストレーターとかフォトショップとかですね。
あるいはWordPressであればテーマ(テンプレート)上で、専門知識不要でいろんなパートを色を変更する&指定するなどのカスタマイズが可能なので、そんな時にも重宝しますよ。
以上WEBでの色について紹介させていただきました。
色って素敵ですね!