配色で困った時に！色を作る上で必要なこと

# 色がもつイメージについて

## 赤色

### 色のもつ効果
パワー、愛、情熱、革命、生命力
### プラス面
刺激を与える、興奮させる
### マイナス面
激しさ、怒り、頑固、疲労
### メモ
停止、危険や禁止を表す標識やサインによく使われる
アクティブな色である一方、じーっと見ていると疲れる色
ファーストフード店などでよく使われており、空腹時には食欲を増進させ、食事が終わると早く出たい気持ちになる

## ピンク
### 色のもつ効果
優しさ、ロマンチック、愛、幸福、フェミニン、可愛さ、夢
### プラス面
若く見える、女子力
### マイナス面
無邪気、軽薄
### メモ
ピンクは刺激が少なく、かわいらしさや健康を連想させる
ロマンチックや夢といった前向きなイメージもある
花の甘い香りにピンクをイメージする人が多く、幸福感を感じさせることもできる
のびのびとした感性を育てるとして子供部屋のなどのインテリアに人気だが、集中したい部屋には不向き

## オレンジ
### 色のもつ効果
快活、活発、陽気、元気、開放的、賑やか
### プラス面
食欲増進、興奮させる
### マイナス面
短期、子供っぽい
### メモ
活動的でバイタリティ溢れる色で、車やスポーツウェアなどで人気
色の中で最も暖かいと感じられる色はオレンジ色という結果が近年の調査で出ている
赤よりも強さが薄れ、暖かみを感じさせることから親しみやすさを与えることができる

## 黄色
### 色のもつ効果
エネルギー、軽快、明るさ、楽観的、朗らか、暖かさ
### プラス面
喜びを与える、テンションをあげる
### マイナス面
臆病
### メモ
注意を引きたいときに使うにはピッタリの色
ヒマワリなど花の色などの幸せのイメージもあるが、スズメバチや黄色いカエルなど毒々しいイメージもあるので、印象がガラリと変わることもあるので、使用には注意する。

## 緑
### 色のもつ効果
自然、忠誠、平和、安全、静寂、永遠、新鮮さ
### プラス面
リラックス、ストレス解消
### マイナス面
平凡
### メモ
人が安心感を抱く、安全で信頼できるイメージの色で見ていて疲れない色。
癒しを与えたり、興奮を抑えたりする効果もあります。

## 青
### 色のもつ効果
爽やか、落ち着き、冷静、誠実、気品、信頼、清涼
### プラス面
落ち着かせる、集中力を高める
### マイナス面
冷たさ、ゆううつ感
### メモ
日本人の多くの人が好むとされている色。ストレスの解消だったり、鎮静の効果あり。
いっぽ後ろに引いたように見える青は「ブルーな気分」という言葉に表されるように気の晴れない様子やネガティブなイメージを与えることもある。

## 紫
### 色のもつ効果
高貴、神秘、魅力、神聖、厳粛、エキゾチック
### プラス面
無心になれる、自分を見つめ直す
### マイナス面
自惚れ、気取り
### メモ
冷静と情熱、ポップで厳かなど2つの相反するイメージを持つ色
紫が赤色に近づいていくほど、赤色の情熱的なドラマチックさのイメージになる
青色に近づいていけばフォーマルな、高貴さのイメージなる

## 茶
### 色のもつ効果
落ち着き、ぬくもり、堅実、実用的、安定、円熟、ノスタルジック
### プラス面
心を慰める
### マイナス面
地味、野暮、古臭い
### メモ
落ち着いたぬくもりと安定感を与える色
重厚な感じのダーク系のブラウンとナチュラルなイメージのライト系のブラウンでは受ける印象も全く違うものになる

## 白
### 色のもつ効果
純真、無垢、清潔、シンプル、クリーン、神聖
### プラス面
清める、浄化する
### マイナス面
殺風景、冷たさ、無機質
### メモ
白は光によって明るくなった環境を表す色であることから、純粋で清潔なイメージを与えることができる
明るく広く見えるというという効果も
ほかのどの色とも大抵組み合わせることもできる

## 黒
### 色のもつ効果
権威、保守的、都会的、重厚感、気品、荘厳、厳粛、ダイナミック
### プラス面
権威を高める、気品を与える
### マイナス面
威圧、悲しみ、犯罪
### メモ
白と比較した場合にネガティブなイメージを受ける
豪華さや高級感を与えたいときによく使用される
白と同様にどんな色とも比較的相性が良く、特に暖色系の背景としてピッタリな色
白に比べると見た目に感じる重さが1.78倍になるというデータもある

## 灰色
### 色のもつ効果
控えめ、協調性、洗練、大人っぽさ、シャープ、品位
### プラス面
スッキリ見せる、強調する
### マイナス面
曖昧、没個性、寂しさ、憂鬱
### メモ
白でも黒でもないはっきりとしない色で、不安を感じさせ、陰気なイメージを与える
また、ソフトな色合いで落ち着きや控えめな印象を与えることもある
白、黒と同じく他の色と強調性がとれ、ほかの色の魅力を引き出す器用な一面を持つが、単体で使うと飽きられてしまうことも。

# 配色を意識する上で必要な配色パターン

## コンプリメンタリー
![コンプリメンタリ―カラー.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/ab97066c-ffeb-5cba-5136-9f9a68c0bc84.jpeg)

* 対局にある色の組み合わせ
* コントラストがはっきりするのでインパクトを強くできる
* デザインを強調したいポイントに対局の色を使うと効果的

## アナロガス
![アナロガスカラー.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/75787ad1-aaed-5e85-d284-ef751d8da4df.jpeg)
* 近い色同士の組み合わせを使う
* 視覚的に柔らかい雰囲気をつくることができる

## トリアディック
![トリアディックカラー.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/cd7078a1-922f-e77a-fdc6-fc981592abc2.jpeg)
* カラーウィール上で３つに色を使って、正三角形になるように配色
* 最も基本的な配色方法

## スプレットコンプリメンタリー
![スプリットコンプリメンタリーカラー.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/d0b8b0f5-765a-5aa2-88b5-c23729109445.jpeg)
* 対局の色の組み合わせの強いコントラストを少し柔らかく見せる手法

## レクタンギュラー
![レクタンギュラ―.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/a8224637-5189-8d55-96ba-23605fa9940c.jpeg)
* コンプリメントカラーを２つ組み合わせる配色パターン
* 色彩が豊な表情をつくることができる

## スクエア
![スクエアカラー.jpg](https://qiita-image-store.s3.amazonaws.com/0/214546/88e45401-d03f-d692-5051-4bddb3d28fbb.jpeg)
* カラーウィール上で四角形になるように配色されるパターン
* かなり強いインパクトを与えたい時に使う
* 使い方を間違えると、ごちゃごちゃするだけの印象なるので、使用注意！

# 配色するときにおすすめなwebサービス
## coolors
スペースキーを押すだけでいい感じの色を5色くらい持ってきてくれる。
色の固定もできるので、色とのイメージを確認しながら行うこともできる。
[Generate - Coolors.co](https://coolors.co/e2d4b7-9c9583-a1a499-b0bbbf-cadbc8)
<img alt="スクリーンショット 2018-08-08 22.37.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/06e02b74-a732-b75b-28e3-cfe771a811cc.png">


## LOLCOLORS
いい感じの4色を見ることができる。
どういうイメージにしようか考えるときにオススメ。
[LOL Colors - Curated color palette inspiration](https://www.webdesignrankings.com/resources/lolcolors/)
<img alt="スクリーンショット 2018-08-08 22.38.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/c3894133-cf38-bb1b-46e5-295182fde7c9.png">

## ColorDrop
LOLCOLORSより多い種類の4色のバランスをみることができる。
検索エリアから大まかな色の検索(`red`など)もできる。
[ColorDrop](https://colordrop.io/)
<img alt="スクリーンショット 2018-08-08 22.40.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/9ed43315-f5ac-3424-fd55-f26dece2fc9a.png">


## 0to255
色の検索(`#bbe7a4`など)をかけることで類似の色を見ることができる
似た色が欲しいときにオススメ
[0to255 – A color tool for finding lighter and darker colors based on any color](http://www.0to255.com/)
<img alt="スクリーンショット 2018-08-08 22.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/7a561a83-97c6-edd3-7e0c-873fbcf3d149.png">

<img alt="スクリーンショット 2018-08-08 22.42.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/112a2ba8-acd2-ad76-8f69-f3a0b397adf2.png">

## ColorHexa
色の検索(`#bbe7a4`など)をかけると、
* その色の情報
* 2・3・4色でその色に合ったもの
* その色のグラーション(類似・黒系・白系など)
を取得してくれる
個人的に使ってみて一番使いやすかった
[Color Hex - ColorHexa.com](https://www.colorhexa.com/)
<img alt="スクリーンショット 2018-08-08 22.44.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/72e4ed2a-c3d0-7f75-35e7-ac67e3c39df3.png">

## shade
グラデーションを簡単に作ることができるwebサービス。
右下にある`linear-gradient(-90deg, #FF00A1, #F6FF00) `の部分をコピーすればcssの背景色としても使用することができる
[shade](http://jxnblk.com/shade/)
<img alt="スクリーンショット 2018-08-08 22.45.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/e6816576-3dce-a453-c5a7-43cab16cc480.png">

## Adobe Color CC
類似色やトライアドなど1色を選ぶだけで5色の色を取得することができる
探索の場所から他の人が作ったカラーを見ることもできる
[Adobe Color CC](https://color.adobe.com/ja/create/color-wheel/)
<img alt="スクリーンショット 2018-08-08 23.03.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/15338c84-0082-50fd-22fb-aabd4721ea4e.png">

<img alt="スクリーンショット 2018-08-08 23.03.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/f15fcee2-5b3e-f26d-e38f-69cb2564a7b2.png">



## colorhunt
4色の配色を見ることができるwebサービス。
chromeの拡張機能もあり、入れるとchromeのtopからも配色を見ることが可能
[colorhunt](https://colorhunt.co/)
<img alt="スクリーンショット 2018-08-08 22.56.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/214546/2c3cfe1e-03df-d39c-a76e-20ceccecba58.png">