Webページのカラーコード「RGB」とは
光の三原色の事でレッド・グリーン・ブルーの頭文字を組み合わせたものです。主にコンピューターのディスプレイやTVディスプレイで使われます。
Web制作をする時のカラーコードは色を#の後に6桁の数字とアルファベッドで指定されているコードで表現されています。例えば黒が#000000、白が#ffffffですね。
これらはカラーをプログラムで表示するために、「RGB」を2桁の16進数に変化し、連結して表示したものになります。
「CMYK」とは
色の三原色のことでシアン・マゼンタ・イエロー・キープレート(黒色を表現するもの)の頭文字を組み合わせて、これらを混ぜ合わせることにより、色を表現しています。これは主に紙媒体で使用されプリンターで印刷する際に表現されます。
色の三属性とは
Webサイトの配色を決める際は「RGB」のカラーモードを使用しますが、「RGB」だけだとまとまりが作りにくい時がでてきます。その場合は「HSV」と呼ばれる概念を利用することがあります。
「HSV」とは、「色相=Hue」、「彩度=Saturarion」、「明度=Value」の事で、「色の三属性」と呼びます。色相は、色味の違いのことで、色相環の角度で表されます。彩度は、色の鮮やかさの事です。明度とは、色の明るさの事です。「RGB」で基本カラーをきめてから、鮮やかさや明るさといった調整を図るとよりまとまりのある配色にすることが可能になります。
![](https://www.harada-webplng.site/wp-content/uploads/2023/02/yuri1-150x150.png)
Webサイト上でカラーを表現する場合は「RGB」を使用して、印刷物(主に紙媒体)で表現する場合は「CMYK」を使うという事ですね。
Webページから気になるカラーコードを確認する方法
![](https://www.harada-webplng.site/wp-content/uploads/2023/02/image-6-150x150.png)
![](https://www.harada-webplng.site/wp-content/uploads/2023/02/image-6-150x150.png)
![](https://www.harada-webplng.site/wp-content/uploads/2023/02/image-6-150x150.png)
参考になるサイトを見ていて、色使いや配色方法が気になることがあると思います。そんな時、簡単にカラーコードを取得できる方法があるので今回ご紹介しますね。
「Google Chrome」を使用していることが前提となります。
①「chromeウェブストア」からインストールします。「ColorZilla(カラージラ)」のインストール画面から「chromeに追加」をクリックする。
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/5decd777729791eea0d948761ebcd0ca.jpg)
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/5decd777729791eea0d948761ebcd0ca.jpg)
②次の画面が出たら「拡張機能を追加」をクリックする。これでインストール完了。
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/67f167c178380229e2d6e17541c3aa25.jpg)
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/67f167c178380229e2d6e17541c3aa25.jpg)
③次に使いやすいように拡張機能を固定します。「Google Chrome」の画面右上の「拡張機能ボタン」をクリックします。下の画面が出たら「拡張機能を固定」のアイコンをクリックすると画面右上に「ColorZilla(カラージラ)」のアイコンが表示されるようになります。
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/70f475cfd87d05996f42c2da7685f241.jpg)
![](https://www.harada-webplng.site/wp-content/uploads/2023/01/70f475cfd87d05996f42c2da7685f241.jpg)
気になるWebサイトのページを表示した状態で「ColorZilla(カラージラ)」アイコンをクリックし起動させて、気のなるカラーの場所にカーソルを置くと上部にカラーコードが表示されます。カーソルが十字マークになります。
また、十字マークをおいたままクリックすると、その場所のカラーコードがクリップボードにコピーされます。メモ帳などにペーストできます。
【配色の基本についてはこちら】
Webサイト制作においては、配色も重要な要素です。Google chromeの拡張機能は非常に便利です。いろいろとして試してみてはいかがでしょうか。