色の三属性と明度について解説します。
感覚だけで配色できる天才もいますが、知識として理解しておくとロジカルに解決できるシーンは何気にあります。
明度とは
![イラスト 虫眼鏡を使ってよく見ようとする女性](http://digit-tool.com/wp-content/uploads/2022/08/イラスト 虫眼鏡を使ってよく見ようとする女性-450x270.jpg)
色の明るさ
明度とは、色の明るさを表す属性です。
カラーだと白っぽいor黒っぽいを表す指標だと思ってれば大丈夫。
色味のないグレースケールでチェックしてみると違いも分かりやすいです。
\白っぽいと高明度/
![明度 グレースケール](http://digit-tool.com/wp-content/uploads/2023/08/cde4ba3f598fc3df1eb4dfe94d3fab23.jpg)
色味がついてるとこんな感じです。
![明度 レッドスケール](http://digit-tool.com/wp-content/uploads/2023/08/0a7ea6bd837564851d4f025d8a25d88b.jpg)
![明度 グリーンスケール](http://digit-tool.com/wp-content/uploads/2023/08/ca0cd6383f72fc3db427b42a8bcec00c.jpg)
明度は写真などにも適用できます。
明度だけを調整した場合でも、画面の印象は大きく変わります。
![明度の違い 画像で比較](http://digit-tool.com/wp-content/uploads/2023/08/8192485092a9a4b28e94b058929dafbd-e1692267748407.jpg)
色相 明度 彩度
![波長 色 対照表](http://digit-tool.com/wp-content/uploads/2023/08/50fc25b0bf8ef079f541c428c3b4c855-e1692268994417.jpg)
色の三属性
色を定義づけしているのが、色相・明度・彩度の三属性です。
◎色相とは
色相とは、赤・青・黄といった色のことです。
◎明度とは
明度は色の明るさを表す属性です。
![明度 レッドスケール](http://digit-tool.com/wp-content/uploads/2023/08/0a7ea6bd837564851d4f025d8a25d88b.jpg)
色味が黒っぽいor白っぽいかで高低を見分けます。
- 高明度:高くなるほど白に近づく。明るい印象。
- 低明度:低くなるほど黒に近づく。暗い印象。
◎彩度とは
彩度とは色の鮮やかさを表す属性です。
![彩度 高低の比較](http://digit-tool.com/wp-content/uploads/2023/08/2a00791d6546a3b576dee7d8d2051641.jpg)
高くなるほど鮮やかになり、低くなるほど色が濁り、落ち着いた印象になります。
- 高彩度:ビビットのような鮮やかな色味。
- 低彩度:混色したような落ち着いた色味。
明度と彩度の違い
![2つの選択肢で悩む女性のイラスト](http://digit-tool.com/wp-content/uploads/2022/07/2つの選択肢で悩む女性のイラスト -e1687662545939-450x370.jpg)
明度と彩度の違い
明度と彩度は、同じ色グループ(色相)の中で相互比較しながら色を評価する属性です。
色相と違い、明度と彩度を切り離して考えることはできません。
\明度×彩度で評価したパラメータが色を定義づけているってコト/
![彩度 明度の比較](http://digit-tool.com/wp-content/uploads/2023/08/d21f1f6531bbbf0b1be945124fd1a323.jpg)
明度と彩度の違いで比較的分かりやすいのは、高or低時の色の変わり方かなー、と思います。
- 明度:高ければ白に近づき、低ければ黒に近づく。
- 彩度:高ければ鮮やかになり、低ければ無彩色(白、黒、灰色)になる。
ちなみに、高明度×高彩度のカラーはビビットか白です。
逆に、低明度×低彩度は黒です。
色彩と色調の違い
![イラスト クエスチョンマークを頭に浮かべる男女](http://digit-tool.com/wp-content/uploads/2022/07/イラスト クエスチョンマークを頭に浮かべる男女-450x277.jpg)
色彩と色調の違い
色彩と似た言葉に、色調があります。
色彩は色を理論的に分解するための要素の一つなのに対し、色調は色彩と明度を含めた感覚的な色の見え方を指します。
あくまでも感覚的なものなので、三原色と違って厳密な分類やパラメータなどは持っていません。
明度とは まとめ
![カラーホイール](http://digit-tool.com/wp-content/uploads/2023/08/fb83e762e6646d5acbf90bab175f3427.jpg)
明度・彩度・色相の三属性は色を定義づけるためのパラメータです。
それぞれの属性が、以下を度合を評価します。
- 明度:明るさの強弱。
- 彩度:鮮やかさの強弱。
- 色相:色の違い。
分かりにくいとされるのは明度と彩度。
同じカラースケールの中に存在してて、どっちから見ても似たような色調変化があるからです。
厳密には違うモノですが、分かりやすいのは次の変化です。
- 明度:高ければ白に近づき、低ければ黒に近づく。
- 彩度:高ければ鮮やかになり、低ければ無彩色(白、黒、灰色)になる。
![彩度 明度の比較](http://digit-tool.com/wp-content/uploads/2023/08/d21f1f6531bbbf0b1be945124fd1a323.jpg)
上記を押さえておくと、デザイン関連で色のハナシを振られてもそう困らないと思います。
![adobe cc セール](https://digit-tool.com/wp-content/uploads/2021/01/adobe-cc-セール-320x180.jpg)
![フォトショップ 価格](https://digit-tool.com/wp-content/uploads/2022/07/フォトショップ 価格-320x180.jpg)
![イラストレーター 値段](https://digit-tool.com/wp-content/uploads/2022/07/イラストレーター 値段-320x180.jpg)
![プレミアプロ 値段](https://digit-tool.com/wp-content/uploads/2022/07/プレミアプロ 値段-320x180.jpg)
![デジハリ adobe](https://digit-tool.com/wp-content/uploads/2022/07/デジハリ adobe-320x180.jpg)
![adobe 学割](https://digit-tool.com/wp-content/uploads/2022/07/adobe 学割-320x180.jpg)
![adobe cc クラック](https://digit-tool.com/wp-content/uploads/2021/02/adobe-cc-クラック-320x180.jpg)