Webデザインや印刷物を作成する際に必ず必要となる情報が「色情報」です。
鉛筆やクレヨンであれば画用紙に色を置くだけで色を表せますが、画面上で色を表す際には、カラーコードが必要です。
今回は、デザインを考える際に欠かせない「カラーコード」についてご紹介いたします。
カラーコードとは
カラーコードとは、ウェブページのデザインや印刷物において色を指定するためのコードです。
これらのコードを使うことで、ウェブサイトのブランドイメージに合わせた色彩を作り出してデザイン性を向上させることができます。
また、色の指定方法には馴染みがありわかりやすい「red」といったカラーネームから、より精密な色の調整が可能なRGBやHEX値まで、用途に応じた多様な方法があります。
カラーコードの種類
RGBカラーコード
RGBカラーコードは、Red、Green、Blueの各成分を0から255の間の数値で表します。例えば、赤色の場合は、RGB(255,0,0)と表すことができます。
HEXカラーコード
HEXカラーコードは、RGB値のそれぞれを16進数で表現したもので、#記号で始まり、0〜9の10種類とA～Fの6種類の全16種類で表され、9の次に大きいのがAとなります。
数値にはそれぞれ対応する色があり、最初の2桁はレッド（R）、真ん中の2桁はグリーン（G）、最後の2桁はブルー（B）を表します。それぞれのRとGとBは光の三原色*である「RGB」の値です。
値はそれぞれ光の量を表しており、「00」が1番小さく、「FF」が1番大きいです。
#000000の時はRGBどれも光がなく黒に、#FFFFFFの時はRGBどれも最大に光があるので白になります。#000000はRGB(0,0,0)と等しく、#FFFFFFはRGB(255,255,255)と等しくなります。
*光の三原色では色の三原色と違い加色混合で、色が重なるほど白くなります。
CMYKカラーコード
Cyan、Magenta、Yellow、およびBlackの各成分をパーセンテージで表します。主に印刷する際に使用されます。
CMYKはRGBとは異なり、減色混合で混ぜれば混ぜるほど暗い色へと変化します。
理論上はこの4色の組み合わせですべての色を表現できます。
HSV/HSBカラーコード
HueとSaturation、およびBrightness/Valueの3つの値で色を表します。
Hueは色相、Saturationは彩度、BrightnessまたはValueは明るさを示します。
よく使われているRGBは「原色の組み合わせ」で色を表現していますが、これだと各要素を変更した場合に色がどう変化するのかがイメージしにくく、細かな色の調整をしたい場合などには不向きです。
HSVでは色の「鮮やかさ」や「明るさ」といった直感的にイメージしやすい方法で表現しているため、「この色を明るくしたい・暗くしたい」「色を薄くしたい・濃くしたい」といった調整が簡単にできます。
WEBデザインでは、HTMLやCSSで色を指定する際にHEXカラーコードを使うことが一般的です。
透明度も指定したい場合には、RGBA（Red,Green,Blue,Alpha）を用いて透過度（アルファ値）を調整することもあります。
さいごに
この記事では、HTMLでの様々な色の指定方法から、印刷時に使えるカラーコードまでご紹介いたしました。
WebデザインやWeb開発に携わる際にはこのカラーコードを使いこなす必要があります。
頭の中で都度カラーコードを考えるのは現実的ではないです。
色のイメージからカラーコードを検索できるサイトや、CMYKからRGBへカラーコードを変換できるサイトなどがあるので、カラー検索におすすめなツールをうまく利用しながら効率よくかつ洗練されたデザインを作成できるようにしましょう。
