Webサイトの色「RGB」と印刷物の色「CMYK」の違い

印刷物では、CMYKで色を表現するのに対し、Webサイトでは、RGBで色を表現します。パソコンなどのモニター画面での色と、印刷をしたときの色とでは印象が違っている、ということがあるかと思います。これは、RGBとCMYKの色の表現方法による違いによるものです。そして、Webサイト制作においてRGBを指定するための「カラーコード」と呼ばれるものがあります。このカラーコードの表記の仕方には意味があり、表記のルールを知ってしまえば、そう難しいものではありません。この記事では、「RGB」と「CMYK」の違いについてや、Webサイトの色指定方法である「カラーコード」について、解説していきます。

RGBとCMYKの違い

RGBは光（源）の3原色「赤・緑・青」

パソコン上のモニターで色を再現するときは、光（源）の3原色「赤（Red）・緑（Green）・青（Blue）」を組み合わせて色を表現しています。この頭文字をとり、「RGB」と呼んでいます。RGBは、混ぜ合わせると、明るい色へと変化していくため「加法混色」と呼ばれます。

CMYKは色（料）の4原色「シアン・マゼンタ・イエロー・ブラック」

CMYKは色（料）の4原色と呼ばれ、「シアン（Cyan）・マゼンタ（Magenta）・イエロー（Yellow）・ブラック（Key Plate）」の頭文字からとっています。混ぜ合わせると、暗い色へと変化していくため「減法混色」と呼ばれます。

RGBで色を表示させるには

16進数で表すカラーコード

Webサイトを制作するとき、RGBで色を表示させるにはカラーコードで表記する方法があります。カラーコードは、主にHTMLやCSSで色の指定をするときに使う色を表すコードです。「#（シャープ）」の後に6桁の16進数（0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f）で表記されます。この6桁の16進数には、それぞれ左から2桁ずつ、RGBを示す数値が入ります。このRGBの3色の値の組み合わせによって、色を再現しているのです。再現できる色は、各色「0〜255」の256段階あります。全部で合わせると、256の3乗で、1677万7216通りになります。 16進数（0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f）は、0の値が一番小さく（暗く）、fの値に近づくほど、大きく（明るく）なっていきます。例えば、「#ffffff」は白、「#000000」は黒になります。RGBの組み合わせで考えると、「#FF0000」は赤（Red）、「#00FF00」は緑（Green）、「#0000FF」は青（Blue）となります。

英単語で表すカラーネーム

先ほどのカラーコードでは、16進数による表記方法でしたが、一部の色では数字ではなく英単語で表記する方法「カラーネーム」もあります。「white」や「black」、「red」などと表すことができます。Web制作上、こちらの指定方法の方が視覚的にわかりやすいというのはメリットと言えます。しかし、カラーネームによる指定の場合、ブラウザによっては対応していない場合もあります。

まとめ

このように、印刷物ではCMYKを、WebサイトではRGBで色を表現しています。また、RGBはカラーコードやカラーネームで色を指定することができます。カラーコードは難しそうに見えたかもしれませんが、表記のルールは、案外単純だったかと思います。カラーネームは、Webページの制作途中で指定するとわかりやすくていいかもしれませんが、対応していないブラウザもあるため注意が必要です。そのため、基本的にはカラーコードで色を指定するのをおすすめします。