カラーコード表

webページを作っているとページの配色って考えちゃいますよね。

Webページを作る際の配色にもルールというか、こうしたら見栄えがよくなるといったセオリーみたいなものがあります。

それが、「ベースカラー、メインカラー、アクセントカラー」です。

ベースカラー

最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。

メインカラー

その名の通りサイトの印象を決定づける主役の色です。

アクセントカラー

全体の5％と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。

この３色を効果的に決めてあげることで、Webページの見栄えがグッとよくなります。しかし、１色ならともかく３色それぞれどんな色を選んだらいいかいまいちわかりませんよね。一応セオリーみたいなのがあって、例えばメインカラーは明度を低くした暗めの色がいいです。逆にベースカラーは背景として使われることが多いので明度の高い色や淡い色が好まれます。アクセントカラーはそのなの通り目立つ色を使うといいです。

具体例でもう少しみてみましょう。ドットインストールというサイトはオレンジ系をメインカラーにしています。ロゴやリンクは少し濃ゆいオレンジですね。ベースカラーは白ですね。これは明度を極限まであげたと捉えていいでしょう。強調したいボタンはオレンジと反対の色である青を使用しています(ここでいう反対とは色相環の反対という意味です)。

このような配色にするとそのサイトのカラーを持ちつつ見やすい配色で強調するところはしっかり強調できています。

とはいえ、色の知識がないとここら辺の話を聞いても実践できないですよね。そこでカラーチャートなるページを作りました。このサイトは使いたい色のカラーコードを入力すると、その色の明度・彩度を１０段階で変化させた色の一覧と、反対の色の明度・彩度を１０段階で変化させた色の一覧を表示します。

あとはこの中から気に入った色のカラーコードをコピーして、CSSなりに貼り付ければOK!!カラーコード入力欄はドラッグで好きな位置に動かせます。

あくまで補助的なツールです。元々react.jsの練習で作ったもので、私もこれを作る過程でいろいろ知りました。これを気に色への理解を深めてもらうといいんじゃないでしょうか。