色について３

色を定量化できると言う事は、他人に色を伝える時に正確に伝えられると言う事を意味します。

それで？

そう、ここで皆さんに「それで？」と言う疑問を持って欲しいのです。色を定量化できて、他人に正確に伝えられる様になった事の何が嬉しいんでしょう？

実際、定量化できただけでは何も嬉しくありません。また、確かに定量化は他人に正確に色を伝えるのにも役立ちますが、本来はもっと別な用途に使います。
では、色が定量化できて何が嬉しいのかを見ていきましょう。
#配色
##配色とは
配色とは、色を配置・構成することで、色の科学的な基本を十分に考慮し、感覚面での効果・作用に注意して行われます。
配色を考えると言う事は、即ち色の組み合わせ方を考えると言うことで、感覚面での個性を踏まえると同時に、色の三属性である色相・彩度・明度が異なる無限の組み合わせの中から選択するという事です。
##色に対する一般的な印象
色は様々な感情を表現したり、事物を連想させます。国や文化によって違いはありますが、例えば赤が具体物であれば、「太陽・血・炎」などを連想させ、象徴物としては「情熱・危険・暑い」などを連想させます。
##色の三属性が表す心理的効果
###色相
暖色・寒色という言葉がすぐに思い起こされる様に、色相は色の寒暖に直結します。
一般に、色相環上の赤・オレンジ・黄色を暖色、青・青紫を寒色に、緑・紫を中性色にする考え方が一般的です。
###彩度
彩度は、色の派手・地味との関わりが深いと言われています。色が人目を引く作用の事を誘目性といいますが、彩度が高く且つ暖色系であることが誘目性を高める条件になっています。
###明度
明度は色の軽・重感です。明度の高い色ほど軽く感じ、低い色ほど重たく感じるとされています。
また、色の硬・軟感にも影響します。明度が高い方が軟らかく感じ、低い方が硬く感じます。
明度は色の明るさの尺度ですので、そのまま色の心理的効果としての明暗感に直結しています。
##配色ルールの例
###ドミナント
ドミナントとは「支配的な」「優勢な」と言う意味で、配色全体の印象を支配する色です。主調色・支配色ともいいます。
全体の支配色を色相でとらえる「ドミナントカラー」とトーンでとらえる「ドミナントトーン」の二つの考えがあります。
####ドミナントカラー
ドミナントカラー配色は、全体を同じ色相で統一した多色配色です。同じ色相でまとめて、トーンで変化を付けます。
例えば夕焼けの風景は全体的にオレンジががっていますので、オレンジがドミナントカラーです。
![DominantAutumn.png](https://qiita-image-store.s3.amazonaws.com/0/32681/7cc2cf51-4d9c-cff5-f112-29a6e0ee2148.png "DominantAutumn.png")
初夏の山などでは新緑の季節にあたり、緑がドミナントカラーになります。
![DominantEarlySummer.png](https://qiita-image-store.s3.amazonaws.com/0/32681/c46f5084-2494-0c54-890f-88310a05414d.png "DominantEarlySummer.png")
####ドミナントトーン
トーンとは、明度を彩度をまとめ一緒にした性質を持ちます。同じトーンの色は、色相が変わってもそのトーンから受ける感情効果は共通していると言われます。
例えば、「明るい赤」と言う表現の中には、明度の高さだけではなく、鮮やかさの印象が含まれています。また、「薄い緑」という表現には、明度が高く彩度が低いという印象があります。
同じトーンでまとめて、色相で変化をつけます。
#####ディープトーン
![DeepTone.png](https://qiita-image-store.s3.amazonaws.com/0/32681/2122ae88-eb54-5e63-2533-7e68c3cf45fd.png "DeepTone.png")
####ペールトーン
![PaleTone.png](https://qiita-image-store.s3.amazonaws.com/0/32681/d38a71b1-529c-779b-eb22-e7a091873cb1.png "PaleTone.png")
###グラデーション
グラデーションとは色を規則的に変化させぼかしていくことです。 色相・明度・彩度・トーンを規則的に変化させることにで、美しいグラデーションができます。
虹や夕焼けの空の変化もグラデーションと言えるでしょう。 段階的に色が変化するのでリズム感が生まれ、見る人に安心感を与えます。
また、隣り合う色では、色相やトーンが類似した関係になっています。

両端の色同士は、どちらかというと反対の要素を持っていることもあります。
このように、グラデーション配色は、似ている要素も反対の要素も含まれているので調和しやすいといえます。 グラデーション配色には、 
1. 色相のグラデーション
2. 明度のグラデーション
3. 彩度のグラデーション
4. トーンのグラデーション
があります。
####色相のグラデーション
色相のグラデーションとは、明度と彩度が同じで色相だけが変わっていくグラデーションです。ポイントは「色相順」に並べる事です。
![HueGradation.png](https://qiita-image-store.s3.amazonaws.com/0/32681/fd2891f8-eba2-add0-67bb-8737d2108655.png "HueGradation.png")
####明度のグラデーション
明度のグラデーションとは、明るい方から暗い方へ、暗い方から明るい方へというように明暗が少しずつ変化するグラデーションです。
![BrigtnessGradation.png](https://qiita-image-store.s3.amazonaws.com/0/32681/72be1f78-ee24-9c77-fc53-ae0978f24e77.png "BrigtnessGradation.png")
####彩度のグラデーション
彩度のグラデーションとは、鮮やかな色から徐々に濁っている色へ、低彩度の色から徐々に鮮やかな色へと変化するグラデーションです。 
![SatulationGradation.png](https://qiita-image-store.s3.amazonaws.com/0/32681/9b156995-46c5-bc02-b5f9-e0329be6af98.png "SatulationGradation.png")
####トーンのグラデーション
トーンのグラデーションとは明度と彩度の両方が段階的に変化するグラデーションです。色相は変化しません。
![ToneGradation.png](https://qiita-image-store.s3.amazonaws.com/0/32681/0cb424a2-2090-d014-cb90-a069b2554c77.png "ToneGradation.png")
###セパレーション
セパレーションとは「分離」「引き離す」と言う意味があります。 配色の中に入れて二つの色を分断する色をセパレーションカラーと言います。セパレーションカラーにより新たな調和を取る配色技法です。
この手法の特徴は、元の配色を活かしながら、さらに配色にインパクトを与えてより魅力的する事です。
また、強烈すぎる配色を和らげたり、弱すぎる配色を引き締めたりできます。
セパレーションカラーには、白・灰色・黒などの無彩色かまたは彩度の低い色を使います。
####補色配色の中間に白を加えると２色の関係がクリアになる。
![SeparationWhite.png](https://qiita-image-store.s3.amazonaws.com/0/32681/c606cdbd-e31d-6f47-5e16-751ef6363769.png "SeparationWhite.png")
####補色配色の中間に灰色を加えると２色の関係をやわらげる。
![SeparationGray.png](https://qiita-image-store.s3.amazonaws.com/0/32681/ff460fc6-db13-64aa-8886-b06cbcb68c47.png "SeparationGray.png")
####補色配色の中間に黒を加えると２色の関係を引き締める。
![SeparationBlack.png](https://qiita-image-store.s3.amazonaws.com/0/32681/151fe903-f103-ea9e-8abe-258db8837b38.png "SeparationBlack.png")
####低い明度による引き締め
茶色を加えることによりピンク色がいきてくる。
![AddLowBright.png](https://qiita-image-store.s3.amazonaws.com/0/32681/200d6a45-502f-2912-f8f3-1e06a1fedb48.png "AddLowBright.png")
####高明度によるスッキリ感
重くなりがちな配色が中間に高明度の色を加えることによりすっきりとした印象になる。
![AddHighBright.png](https://qiita-image-store.s3.amazonaws.com/0/32681/d6b768f3-aaa7-13ae-1463-1834990e9b7a.png "AddHighBright.png")
###キーカラー
キーカラーとは、配色をする際にターゲットのイメージに最も近い色の事です。配色はこのキーカラーを中心に行って行く事になります。 例えば、今回はキーカラーとして
![KeyColor.png](https://qiita-image-store.s3.amazonaws.com/0/32681/83b406a1-f189-cd40-d0df-f8d7a490605e.png "KeyColor.png")
を使って説明します。
この色は

- R:105 G:189 B:131
- Hex:69BD83
- H:139 S:44 V74

です。
####色相(Hue)による配色の例
![Hue1.png](https://qiita-image-store.s3.amazonaws.com/0/32681/461ad4de-7d42-47a2-a1db-d5578d3d4651.png "Hue1.png")
![Hue2.png](https://qiita-image-store.s3.amazonaws.com/0/32681/1f4debb8-1415-d691-cbed-a86709b3e31b.png "Hue2.png")
![Hue3.png](https://qiita-image-store.s3.amazonaws.com/0/32681/78c3d981-5b61-96ec-0a36-1482cc152849.png "Hue3.png")
![Hue4.png](https://qiita-image-store.s3.amazonaws.com/0/32681/ebf2f68c-2e94-8e4b-72ac-d6d307e25e47.png "Hue4.png")
![Hue5.png](https://qiita-image-store.s3.amazonaws.com/0/32681/0f6325dc-9666-f527-6291-bdc2500b4d81.png "Hue5.png")
![Hue6.png](https://qiita-image-store.s3.amazonaws.com/0/32681/c3f46a93-68db-3350-f595-c8026f64b822.png "Hue6.png")
![Hue7.png](https://qiita-image-store.s3.amazonaws.com/0/32681/2472ef91-926c-10a5-8fef-eec1eefab7a0.png "Hue7.png")
![Hue8.png](https://qiita-image-store.s3.amazonaws.com/0/32681/6a3d6870-e611-ca4e-f883-f3a21e51934d.png "Hue8.png")
![Hue9.png](https://qiita-image-store.s3.amazonaws.com/0/32681/40ee4760-675d-6fbb-2a1f-1459ad64a741.png "Hue9.png")
![Hue10.png](https://qiita-image-store.s3.amazonaws.com/0/32681/6e88ed0b-0ddb-d13b-6cb9-0df7578f6ab8.png "Hue10.png")
![Hue11.png](https://qiita-image-store.s3.amazonaws.com/0/32681/7c483d59-0d50-12cc-9d3e-582b3e3829e5.png "Hue11.png")
####彩度(Saturation)による配色の例
![SatulationColorScheme.png](https://qiita-image-store.s3.amazonaws.com/0/32681/92ef832b-811e-4f0f-839d-40c75dc7d778.png "SatulationColorScheme.png")
####明度(Value)による配色の例
![BrightbessColorScheme.png](https://qiita-image-store.s3.amazonaws.com/0/32681/aaa68ff8-9b11-0f7e-d29c-15a4172efc6f.png "BrightbessColorScheme.png")
####色相環の角度による配色
色相環上で色を選択して配色する方法です。色相環上で選ぶので、明度と彩度は変わらない事に注意してください。
ここでは12分割した色相環で説明します。
#####Identity
同じ色相内での配色です。色差が少ない為に控えめなイメージを作ることができます。
![Example-Identity.png](https://qiita-image-store.s3.amazonaws.com/0/32681/05069f60-317e-203a-b1ba-6c496fd6e4a9.png "Example-Identity.png")
#####Analogy
色相環で隣り合った色で作る配色で、柔らかい印象になります。
![Example-Analogy.png](https://qiita-image-store.s3.amazonaws.com/0/32681/02644dff-c82e-70ee-cfba-78b66a66573c.png "Example-Analogy.png")
#####Intermediate
色相環を四等分したうちの２色を使った配色で、コントラストのバランスが良好で安定感のある色彩配置になります。
![Example-Intermediate.png](https://qiita-image-store.s3.amazonaws.com/0/32681/70bd291e-48a7-8d95-cb68-2cac74b00feb.png "Example-Intermediate.png")
#####ComplementaryまたはDyad
補色による色の組み合わせで、力強さがうまれます。
![Example-Complementary-Dyad.png](https://qiita-image-store.s3.amazonaws.com/0/32681/329b10d7-58b8-0b37-327e-3eaae5da0a1a.png "Example-Complementary-Dyad.png")
#####Opornent
色相環を三等分したうちの２つの色を使った配色で、２色で収まりが良くなります。
![Example-Opornent.png](https://qiita-image-store.s3.amazonaws.com/0/32681/b7e4ea51-934d-d16a-3ab8-9dec6e7d92d8.png "Example-Opornent.png")
#####Split Complementary
補色の両隣の色を使った３色配色で、補色の関係よりも調和が取れます。
![Example-Split-Complementary.png](https://qiita-image-store.s3.amazonaws.com/0/32681/a6785211-d2fb-352c-e4bb-51aa3cf71c85.png "Example-Split-Complementary.png")
#####Triad
色相環上を３分割する位置の３つの色相を用いた配色のことをいいます。色相環上を正三角形にとるので、安定感のある配色になります。
![Example-Triad.png](https://qiita-image-store.s3.amazonaws.com/0/32681/289ecef4-eb65-9c73-e5aa-2ccb36b7699f.png "Example-Triad.png")
#####Tetrad
色相環を四等分した位置にある色により４色の配色で、２組の補色同士なので、カラフルになります。
![Example-Tetrad.png](https://qiita-image-store.s3.amazonaws.com/0/32681/d9041982-46f1-32c7-0d34-f7064dc6f6e6.png "Example-Tetrad.png")
#####Pentad
色相環を５つに分けた色またはTriadに白と黒を加えた５色の配色です。
![Example-Pentad.png](https://qiita-image-store.s3.amazonaws.com/0/32681/99d6d57b-c726-0752-c4d3-909fcc53b243.png "Example-Pentad.png")
#####Hexad
色相環を正六角形に分けた６色もしくはTetradに白と黒を加えた６色の配色です。
![Example-Hexad.png](https://qiita-image-store.s3.amazonaws.com/0/32681/56b31e62-5160-e190-e298-775d5d09bb4c.png "Example-Hexad.png")
####ベースカラーとアソートカラー
ベースカラーは表現するイメージの中で最も大きい面積を占める色で、２番目に広い面積の色がベースカラーを引き立てるアソートカラーになります。
![BaseAndAssort1.png](https://qiita-image-store.s3.amazonaws.com/0/32681/5aca9ffb-e0bd-394a-58d2-6eff0b106a27.png "BaseAndAssort1.png")
![BaseAndAssort2.png](https://qiita-image-store.s3.amazonaws.com/0/32681/aa3e7244-c643-3be3-289b-a82b7dcfd14a.png "BaseAndAssort2.png")
####アクセントカラーとワンポイントカラー
基調となる色と明度・色相の差が大きな対照的な色を少し加えると、配色全体にメリハリが生まれて全体を引き立てます。
色の面積に大小をつける事で、小さき面積の色がアクセント（ワンポイント）カラーになります。
![AccentAndOnepoint1.png](https://qiita-image-store.s3.amazonaws.com/0/32681/3df1c497-c584-dd75-0c71-6ed8e97d1916.png "AccentAndOnepoint1.png")
![AccentAndOnepoint2.png](https://qiita-image-store.s3.amazonaws.com/0/32681/62ae1938-dd3e-25e7-b984-10dc9c169c08.png "AccentAndOnepoint2.png")
#最後に
色々な例を見せてきました。もちろん、これ以外にも様々な配色ルールは存在しますし、そもそも「基調色」を決めないとどんな配色ルールも使えません。
←[色について２](http://qiita.com/JR8TQH/items/ae76da203878a7145111)