モダンで都会的な印象をユーザーに与えるコンプレックス配色tips

Ads

color
デザイナーさんなら当たり前の知識
かもしれませんが、配色の種類の中で
コンプレックス配色という都会でモダン
なイメージを表現できる配色が凄く
気にいっているのでRGBコードも
一緒にご紹介します。

もともと知ったのは大分前に買った「ちゃんと知りたい配色の手法 」という本で、この記事もその中の一部です。

コンプレックス配色とは?

コンプレックス配色と対を成す配色がナチュラル配色と言いますが、ナチュラル配色とは
植物の緑や木の茶色等を指すのではなく、「太陽光によって色相と明度が変化する」性質
を応用した配色で、コンプレックス配色はその逆を指します。オリンパスのロゴなんかは
ナチュラル配色に当たります。

コンプレックス配色は自然では見られる事が少ない色の関係で、人工的、都会的な印象を
与える事が出来ます。以下にそのコンプレックス配色の例を作りましたので宜しければ
ご覧下さい。画像は保存形式の関係上なのか、RGBコードと誤差が生じていますorz

complex-color01
背景:145-204-180
テキスト:121-86-80


complex-color02
背景:115-149-170
テキスト:43-0-0


complex-color03
背景:145-155-195
テキスト:101-87-94


complex-color04
背景:179-215-221
テキスト:121-86-80


complex-color05
背景:194-223-209
テキスト:248-91-129


complex-color06
背景:196-215-62
テキスト:190-104-84


complex-color07
背景:179-226-227
テキスト:217-239-127


complex-color08
背景:215-193-179
テキスト:121-148-191


complex-color09
背景:254-230-230
テキスト:217-210-204


complex-color10
背景:179-181-185
テキスト:179-226-205


テキストも文字サイズも位置も同じですが、与える印象が違うのがよく分かります。

tes

気分転換にWebサイトのカラーを少し変えてみるのもいいかもしれませんね^^

コンプレックス配色と他の配色はカラーコーディネーター試験入門ガイドさんが一番参考になりそうでした。また、ColorJackというツールも配色に拘ったWebツールですのでぜひ使ってみて下さい。GIGAZINEに使い方が書かれています。どうしても良い配色が思いつかない場合はKulerで人気の配色を見てインスピレーションを向上させるのも手ですね。

コンプレックス配色のWebデザインギャラリー

一部、コンプレックス配色を利用したWebデザインをご紹介。

odosketch

complex-color14

odosketch

13 Creative

complex-color15

13 Creative

Rafael Macho

complex-color16

Rafael Macho

emilie chollat

complex-color17

emilie chollat

Vivid Copy

complex-color18

Vivid Copy

ちゃんと知りたい配色の手法 には他にも3色、4色を使ったデザインが紹介されています。DTP系ですが、色々と参考になるので興味のある方はご一読されてはいかがでしょうか。

タイトルとURLをコピーしました