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

普段何気なく見ているホームページがどうやって色を表示しているのか知っていますか？ホームページ上では様々な色がカラーが使用されており、配色のバランスや使用するカラーによってホームページの印象はおおきく変化します。
ホームページで色を指定するときは、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を使えば簡単に素早くカラーコードを確認できます。