ホームページの印象を左右する！「カラーコード」の見方や確認方法を解説

普段何気なく見ているホームページがどうやって色を表示しているのか知っていますか？ホームページ上では様々な色がカラーが使用されており、配色のバランスや使用するカラーによってホームページの印象はおおきく変化します。
ホームページで色を指定するときは、6けたの英数字で表されるカラーコードを使用します。
今回はカラーコードの概要や意味、カラーコードを使うときに便利なツールについてご紹介します。

カラーコードとは

ホームページ上で色を表示させるために、すべての色に割りふられているのがカラーコードです。カラーコードは6けたの英数字で構成されています。例えば白のカラーコードは#ffffffで表されます。

全部で256色あり、ホームページのコンセプトや会社のイメージに合わせてカラーを選ぶことができます。
カラーコードはホームページの色を表示させるときに使われます。

また、Twitterの自分のプロフィールページも、カラーコードを使ってテーマカラーを設定できることをご存知でしたか？
Twitterで会社のアカウントを運営している場合は、会社のロゴのカラーなどに合わせてテーマカラーを設定するとホームページとの統一感が出るでしょう。

参照：　
カラー・コードとは
誰でもプロ並みの色調が作れる無料のカラーパレットサービス厳選8選

カラーコードの見方

カラーコードを構成する6つの数字はそれぞれ3つのグループに分類されます。

6けたの数字は左側の二つがあか、真ん中の二つがみどり、右側の二つがあおの要素を表しています。
またそれぞれの要素の量がどれくらいなのかは数字と英数字で表します。00が一番低く、ffが一番高い数値になります。
例えばカラーコードが#000000の場合「あか」「みどり」「あお」の要素がゼロなので黒になります。
それぞれの要素がどのくらいの割り合いを占めているのかが把握できれば、カラーコードが表している色を予想するときのヒントになります。

カラーコードを確認する方法

ホームページで使用されている色のカラーコードはツールを使えば簡単に確認できます。

Colorpick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

Colorpick EyedropperはGoogle Chromeの拡張機能で、ホームページ上で色をクリックするとカラーコードが表示される仕組みです。参考にしているホームページのカラーコードを調べるのに役立ちます。

Palette Creator

https://chrome.google.com/webstore/detail/palette-creator/oolpphfmdmjbojolagcbgdemojhcnlod?hl=ja

Palette CreatorもColorpick Eyedropperと同じGoogle Chromeの拡張機能です。
ホームページ上の指定した画像からカラーを抽出して、カラーコードを表示させることができます。

参照：
色を瞬時に抽出して効率よくホームページを作成しよう！Chrome拡張機能「Palette Creator」の使い方

他のホームページを閲覧しているときに参考にしたい、使いたい色を見つけたときに同じ色を見つけるのは大変です。Colorpick EyedropperやPalette Creatorを使えば簡単に素早くカラーコードを確認できます。

カラーコードに関する便利なサイト

カラーコードを使うときに便利なツールをご紹介します。

原色大辞典

http://www.colordic.org/

原色大辞典はカラーコードと色の名前を確認できるホームページです。
原色に加えて、日本独自の伝統的な和色、パステルカラー、ビビットカラー、東京メトロ地下鉄線のラインそれぞれのカラーがまとめられたメトローカラーなど、カテゴリ別でまとめられているのが特徴です。ホームページで使うカラーはまだ決まっていないので、とりあえずどんな色があるのか見たいという方にオススメです。

NIPPON COLORS

http://nipponcolors.com/

日本の伝統的な色をホームページで使いたいときに便利なのがNIPPON COLORSです。日本独特の色をまとめて閲覧できます。色の名前をクリックすると、ホームページの背景が変化します。「利休茶」、「鉛丹」など珍しい名前の色がたくさんあります。伝統工芸や着物など日本文化に特化したホームページを作成するときに役立ちます。

ColorHexa

http://www.colorhexa.com/

ColorHexaはカラーコードや色の名前を検索窓の入力すると、その色に関する情報を表示してくれるホームページです。カラーコードがわからなくても、色の名前を検索すれば該当しそうな色を複数表示してくれます。カラーコードはもちろん、色の配色バランスなどの情報を見られるので、色について知識を深めたい方にもオススメです。

colourcode

http://www.colourco.de/

colourcodeは簡単なマウス操作でカラースキームやカラーコードを作れるツールです。ページ上でマウスを動かして、自分が欲しい色が現れたときにクリックするとカラーコードが表示された状態で色が保存されます。一度保存するととなりで新たな色を探せるので、複数の配色を試したいときにオススメです。

カラーコード変換ツール　　

http://tech-unlimited.com/color.html

カラーコードは通常6けたで表示しますが、3けたで表示させることもできます。6けたのカラーコードを3けたに変換できるのがカラーコード変換ツールです。カラーコードだけではなく、RGB値、HSV値からの変換もできるので、それぞれ調べる手間を省くことができます。

Googleで検索

https://www.google.co.jp/

Googleの検索窓にカラーコードを入力して検索すると、3けたの表示に加えて複数の方式で色の値を表示してくれます。カラーコード変換ツールと同じような使い方ができます。

まとめ

色によってホームページの印象は大きく変化します。
使う色のカラーコードを一つ一つ調べるのは時間がかかってしまいます。自分が見やすいを感じるホームページや、多くの人に使われているホームページのカラーコードをツールを活用して確認してみましょう。自社ホームページのカラーを決めるときの参考にしてみてはいかがでしょうか。

色によってホームページの印象は大きく変化し、自分の目では同じ色に見えても、カラーコードを確認すると微妙に違う色だったということがあります。

また、使う色のカラーコードを一つ一つ調べるのは時間がかかってしまいます。自分が見やすいと感じるホームページや、多くの人に使われているホームページには、なにか使いやすい共通点があるかもしれません。カラーコードをツールを活用してユーザーが使いやすい色を確認し、自社ホームページのカラーを決めるときの参考にしてみてはいかがでしょうか。