白と黒のバリエーション

2019年7月24日

今回は、グレーを使った白と黒のバリエーションのようなものを紹介したいと思います。

白と黒

こちらは白と黒です。

白(255,255,255)

黒(0,0,0)

白と黒の組み合わせはコントラストが高く、はっきりくっきりしています。
明確な主張をするときにはぴったりです。

一方、はっきりくっきりしすぎて「ギラギラしてる」、「堅すぎる」といったイメージもありませんか。

そこで白と黒をちょっと柔らかくするためにグレーを使ってみたいと思います。

グレー

真っ白、真っ黒ではなくちょっとだけ明るさを変えたもの。

白っぽい色(246,246,246)

黒っぽい色(30,30,30)

色の選択ウィンドウです。

ウィンドウ右側、円になっているのが色相です。
その中にある四角形は縦軸に明度、横軸に彩度をとっています。

左上の角が白です。そこから下へちょっとだけずらします。RGB(246,246,246)と、ほんの少し暗くなりました。

左下の角が黒です。白とは反対に少しだけ上にずらします。RGB(30,30,30)と、ほんの少し明るくなりました。

ほんのちょとしかずらしていないのに、白は違いが出ますね。
黒は、白ほど変化はない感じ。

白黒とも更にグレー寄りにしてみました。
トゲトゲしさがなくなって、だいぶ柔らかくなった印象です。

白っぽい色(236,236,236)
黒っぽい色(60,60,60)

グレーのパレット

グレー(128,128,128)を基準に明るさを変えたグラデーションを作ってみました。
色調補正で明るさを10ずつ変えています。

グレーのパレットを作って、その中から白と黒の代わりになる色を選びます。

隣り合う色で低めのコントラストをつけたりもできますね。

応用

白っぽい色(246,246,246)と黒っぽい色(32,32,32)にほんのちょっと色を加えます。
こちらもグレーとは違った白黒の代用です。

白っぽい色は黄色を少し足しました。
黒っぽい色は青色を少し足しました。

黄色味がかった白は暖かさが出ますね。
黒に青を足すと、万年筆のインクのような味が出ます。

グレーをベースにコントラストをつけた例。
白黒ほどはっきりさせたくないときには、明度をいじってグレーにするのもありではないでしょうか。

いかがだったでしょうか。
グレーを上手に使えると格好いいなと思いながら、ポスターとかwebサイトなどを見て回っていました。

気に入ったデザインを見つけたら、是非スポイトで色情報を見てみてください。

スポンサーリンク