1. 色の3属性
色には色味を示す「色相」、明るさを示す「明度」、鮮やかさを示す「彩度」の3つの属性があります。
a. 色相
b. 明度
c. 彩度
色の鮮やかさの度合いを示し、彩度が高ければ高いほどビビッドで目を惹く印象になります。
人が色彩に対して抱く感情は、単純な色と色の組み合わせだけでなく、この「トーン」が大きく作用しているといえます。
色相が違っていてもトーンが同じだと統一感が出る効果があります。
- Vivid（ビビッド）：各色相において最も彩度が高い色＝純色の色調です。鮮やかで派手な印象を与えます。
- Bright（ブライト）：ビビッドよりも少し明度を高くし、彩度を落とした色調です。ビビッドほど力強い印象にはならず、健康的、華やかというイメージを与えます。
- Deep（ディープ）：ビビッドよりも彩度と明度を少し落とします。ブラックの色味が加わるので、落ち着いた上品な印象です。シーズンカラーでいうと秋冬を示します。深みがある配色なので、和の演出に使われることもあります。
- Light（ライト）：ブライトから彩度を落として明度を上げることで白が混ざります。パステルカラーといえばイメージしやすいでしょうか。春夏のイメージで、女性らしさが強いので、男性向けのサイトへは不向きな配色です。
- Dark（ダーク）：ビビッドに黒を多く混ぜてできる、澄んだ調子の暗い色調です。格式の高い印象で、大人っぽい落ち着いたイメージを与えます。
2. カラーコードとは
色の表し方には様々な方法がありますが、ここではWEBデザインにおいてよく使われる「HEX」「RGB」「RGBA」の3つについて解説します。
a. HEX値
16進数で6桁の英数字から表される形式を「HEX値」と呼びます。
「0-9」「A-F」の合計16種類の記号を用いて6つの英数字から構成されます。
最初の2桁がレッド、中央の2桁がグリーン、最後の2桁がブルーを表します。
赤、緑、青は光の3原色のことです。
すべての色はこれら3原色の組み合わせで表現されます。
【00】が光の量が一番小さく、【FF】が光の量が最大と定義されています。
これを計算すると1桁目が0~Fで16通り、2桁目も0~Fで16通りあるため、「16 * 16 = 256通り」となります。2桁の数字を作るのに256通りあることがわかります。
そのためレッドで256通り、グリーンで256通り、ブルーで256通りあるため、6桁のカラーコードにおいては「256×256×256＝16777216色」あることが分かります。
これだけ膨大な色があるとは驚きですよね。
- HEX値では「#000000」のように先頭に#をつけて表現するルールとなっています。
- 6桁の英数字は小文字でも機能します。
- 「#FFCC00」のような場合は、「#FC0」と3桁で表現することも可能です。 レッド、グリーン、ブルーそれぞれの2桁の値が同一数値の場合（例：FF, CC, 00）、それぞれ1文字で表すことができるルールになっています。
cf. 基本色のカラーコードは抑えておこう
- 黒 = #000000 3つともすべて光の量が最小の時黒になります。
- 白 = #FFFFFF 3つともすべて光の量が最大の時は白になります。
- レッド = #FF0000
- 補色「シアン」= #00FFFF
- グリーン = #00FF00
- 補色「マゼンタ」= #FF00FF
- ブルー = #0000FF
- 補色「イエロー」= #FFFF00
上記のような基本色のカラーコードは抑えておくとよいでしょう。
カラーコードにさらに詳しくなるとカラーコードから色を見極められるようになりますが、この段階でそこまでやる必要はないと思います。
b. RGBとは
rgb(255,255,255)のように表されるのがRGB形式です。
HEXにおいては00-FFの16進数で表していたものを単純に00を0として最大のFFを255と1つずつ増えていく256通りの数値によって、R,G,Bをそれぞれ表したものになります。
HEXかRGBでカラーを表すことが多いので、この2つを抑えておけば大抵の場合大丈夫です。
c. RGBAとは？
rgba(255,255,255,0.5)のように4つ目の数値が新たに増えて、4つの数値で表現できるようになります。
4つ目の数値は透明度を表しており、０～１の数値で表現されます。0であれば完全に透明になり１であれば完全な不透明になります。
d. カラーコードを変換したいときはツールを使おう ~COLOR CONVERTER~
たまにカラーコードを変換したい時があります。
ツールによってHEXのみ受け付けていたり、RGB表記のみ受け付けていたりという場合が存在するからです。
そういう場合はいちいち自分で計算して変換したりはせず、必ずツールを利用しましょう。
「カラーコード 変換」などと検索すれば色々ツールは出てきますが以下のツールはおすすめなので紹介しておきます。
3. 配色の基本ルール
ベースカラー70%、メインカラー25%、アクセントカラー5%です。
a. ベースカラー
一般的には白やライトグレーなどが使われることが多いです。メインカラーの妨げにならないように気をつけて選びましょう。
メインカラーやアクセントカラーの引き立て役です。
b. メインカラー
メインカラーはその名の通り、デザインの主軸となる肝心な色です。全体の印象を左右する主役となる色なので、最初に決めるとよいでしょう。
自分の好きな色を選ぶのではなく、どのような雰囲気にしたいのか、ターゲットイメージに合っているのかなどを検討し、色の印象を考えながら選びます。
キャッチフレーズなど文字として使用される場合もあるので、明度が低い色が読みやすくておすすめです。
c. アクセントカラー
アクセントカラーは強調色なので、面積は最も小さい扱いですが、配色の中では一番目立つキーカラーです。
メリハリを出したい部分や主張したいところに使用し、全体色調を引き締めたり、視点を集中させる効果があります。 メインカラーと反対色を選ぶと、鮮やかな印象が引き立ちます。
4. 代表的な8色が持つイメージ
▼ 赤色
【パワフル、情熱、勝利、警告】
販売においては「セール品」のイメージも強く、購買意欲を増す効果があります。
広告などでよく「SALE」の文字や「割引された価格」が赤字で表現されます。
▼ 橙色
【喜び・温かい・家庭的・安価】
ポジティブな印象が強く、コミュニケーションやエンターテインメントなどに適しています。ポップでカジュアルな印象が強いので、安っぽい・大衆的というイメージを与える場合もあります。
▼ 黄色
【幸福・利益・若さ・注意】
黄色は明るい印象が強いので、希望や幸福を表す色として使われます。
▼ 緑色
【自然・安らぎ・調和・健康】
木の葉や植物に見られる自然の色なので、エコや環境と結びつきます。
普段から身の回りに感じられる色という点から、親しみや安心感を得やすいです。
▼ 青色
【知的・清潔感・誠実・寒さ】
青は寒色の代表色です。男性が着用するスーツやシャツには、誠実な印象を与えるネイビーや水色といった青系が多いです。
▼ 紫色
【高貴・神秘的・嫉妬・下品】
二面性を持ち合わせたミステリアスな雰囲気があります。日本では古くから地位の高さを象徴する色として用いられてきたので、高貴な印象が強いです。
もしくは占い・スピリチュアルでもよく使われ神秘的な雰囲気も持っています。
▼ 黒色
【高級感・男性・恐怖・死】
無彩色の代表格である黒は、明度も彩度も持たないことから、硬さや重さを感じさせます。そのため、男性が持ち合わせる威厳や、都会的な洗練された印象も与えます。
▼ 白色
【清潔・純粋・神聖・新しい】
白は何色とも相性が良い万能カラーといえます。清潔感、安心感の印象が強いです。
5. 配色選びに役立つサイト
カラーの配色の引き出しを増やすには下記のような様々なカラーツールを駆使して、良い色の組み合わせをたくさん自分の中で持っておくことが大切です。
▼ 原色大辞典
例えば「赤といえば真っ赤な色くらいしか思いつかない」という方は、まずはこのサイトで引き出しを増やすのがよいでしょう。赤だけでも左写真のように本当に様々な色があります。
WEB色見本 原色大辞典 - HTMLカラーコード
▼ Color Hunt
センスの良い組み合わせからインスピレーションを受けることができる、
シンプルなカラーパレットのサイトです。
Color Palettes for Designers and Artists - Color Hunt
▼ Coolors
どういう色味がよいのかゼロからアイデアが欲しい時に便利でしょう。
また固定したい色があったらそれを固定した上で合う色を提示してくれます。
チュートリアルがあるので是非やってみてください。
▼ NIPPON COLORS
NIPPON COLORS - 日本の伝統色
▼ HELLO COLOR
良いコントラストに出会いたい！というときに見るとよいでしょう。
▼ Color Supply
使いたい色が1つは決まっているけど補色で何を使うか決まらない...という時などに使用するとよいでしょう。
▼ Pigment
良い配色を探したいというときに見ていると様々なインスピレーションが湧くのでおすすめです。
明度と彩度によってトーンが作られると前述しましたが、このツールを使うと、トーンが揃っていると色相が違っていても統一感が出るというのが肌で実感できると思います。
Pigment by ShapeFactory | Simple Color Palette Generator
▼ COLORABLE
TEXTとBackgroundにカラーコードを設定すると合格かどうかを表示してくれます。
画像のように、Aa7.84AAAなどとAAAと表示されていたらOKです。
AAAの部分がFailのようになっていると問題ありなので変更した方がよいでしょう。
Failの時はコントラストがなさすぎて見づらいということを意味します。
6. カラー特定ツール
★ 「カラーピッカー：ドロッパー」を使用する。
そんな時はこのツールを使ってすぐに色を特定しましょう！
STEP1. まずはChrome拡張機能を追加しましょう
青い「Chromeに追加」ボタンを押して拡張機能を追加しましょう。
STEP2. よく使う機能なのでピン留めして使いやすくする
②のピンの箇所をクリックするとピンが青く変化します。
そうすると③の箇所に今後表示されるようになり、それをクリックするとすぐにこの拡張機能を使用可能になります。
反映されない方はピン留め状態になっているか確認した上でサイトをリフレッシュしてみてください。
STEP3. 実際に使用してみる
ピン留めが完了している方は①のようにアイコンがバーに表示されるはずです。
反映されていない方はピン留め状態になっているか確認した上でサイトをリフレッシュしてみてください。
②Pick Colorのボタンを押します。
③カーソルを好きな箇所に合わせてクリックするとHEX値のカラーコードが取得できます！
今回は「Google」の「e」の文字色を抽出しました。
和のテイストのデザインを作る時には必須で活用すべきだと思います。