Web制作のカラーコードとは

記事

IT・テクノロジー

Webページのカラーコード「RGB」とは

光の三原色の事でレッド・グリーン・ブルーの頭文字を組み合わせたものです。主にコンピューターのディスプレイやTVディスプレイで使われます。

Web制作をする時のカラーコードは色を＃の後に6桁の数字とアルファベッドで指定されているコードで表現されています。例えば黒が＃000000、白が＃ffffffですね。

これらはカラーをプログラムで表示するために、「RGB」を２桁の16進数に変化し、連結して表示したものになります。

「CMYK」とは

色の三原色のことでシアン・マゼンタ・イエロー・キープレート（黒色を表現するもの）の頭文字を組み合わせて、これらを混ぜ合わせることにより、色を表現しています。これは主に紙媒体で使用されプリンターで印刷する際に表現されます。

まとめるとWeb上にカラーを表現する場合は「RGB」を使用し、印刷物で表現する場合は「CMYK」を使います。

Webページから気になるカラーコードを確認する方法

参考になるサイトを見ていて、色使いや配色方法が気になることがあると思います。そんな時、簡単にカラーコードを取得できる方法を今回ご紹介します。

「Google Chrome」の拡張ツール「ColorZilla(カラージラ)」を使うとその色のカラーコードを取得出来ます。

▼「ColorZilla(カラージラ)」のインストール方法

※「Google Chrome」を使用していることが前提となります。

①「chromeウェブストア」からインストールします。「ColorZilla(カラージラ)」のインストール画面から「chromeに追加」をクリックする。

②次の画面が出たら「拡張機能を追加」をクリックする。これでインストール完了。

③次に使いやすいように拡張機能を固定します。「Google Chrome」の画面右上の「拡張機能ボタン」をクリックします。下の画面が出たら「拡張機能を固定」のアイコンをクリックすると画面右上に「ColorZilla(カラージラ)」のアイコンが表示されるようになります。

気になるWebサイトのページを表示した状態で「ColorZilla(カラージラ)」アイコンをクリックし起動させて、気のなるカラーの場所にカーソルを置くと上部にカラーコードが表示されます。カーソルが十字マークになります。

また、十字マークをおいたままクリックすると、その場所のカラーコードがクリップボードにコピーされます。メモ帳などにペーストできます。

【配色の基本についてはこちら】

最後までご覧いただきありがとうございます。Web制作のツールとして試してみてはいかがでしょうか。