迷ったらAdobe Color 簡単カラー配色術

デザイン制作していると、「配色が上手く決まらないな〜」ってことがよくあります。

DTPなどのグラフィック、WEBデザイン問わず、配色って悩みますよね。
そんなときに便利なのが「Adobe Color」
カラールールによるバリエーションや、写真から色をピックアップできるので、配色に迷ったら使ってみるのもおすすめですよ。

Adobe Color

Adobe ColorはAdobeが提供するカラーピックアップツールです。
ベースとなるカラーを選択すると、カラーハーモニールールに基づき様々なカラーパターンを提案してくれます。

使用にあたって、CreativeCloudなどのアカウントは必要ありませんので、簡単に始められます。

カラーホイールから色を抽出する

カラーホイールによるピックアップ方法を説明します。
ベースとなるカラーを決定後、左側の「カラーハーモニールール」からバリエーションを選択します。

カラーホイールの設定項目には、以下7つのルールがあります。

  • 類似色
  • モノクロマティック
  • トライアド
  • 補色
  • コンパウンド
  • シェード
  • カスタム

類似色

類似のテーマは、カラーホイール上で隣接する色を使用します。同系統色をバランス良くセレクトします。

モノクロマティック色

単色の彩度と明るさのバリエーションです。同じ色相で彩度と輝度が異なる5つの色をピックアップします。うまく調和し、統一感のあるカラーセレクトです。

トライアド

カラーホイール上の3つの等距離点に均等に間隔を置いた色を使用します。このカラールールは、カラーホイールの最初のポイントとは異なる彩度と明度の値の2色を提供します。トライアドの色は、一緒に使用した場合に調和を保ちながら、対照的である傾向があります。

補色

カラーホイールで設定した1点の反対側の色(補色)をセレクトします。補色は非常に高いコントラストを与え、一緒に使用すると目を引く配色になります。

コンパウンド

補色と類似色の混合。ベースカラーを類似色の濃淡で、ボタンカラーやキーカラーは補色を使用するなど、実際のレアウトに反映しやすいですね。

シェード

同じ色相で明るさは変えたカラーパターンを提案。「類似色」「モノクロマティック」と似ていますが、よりダークなカラーセレクトが特徴です。

カスタム

ルールを制御することなく、パレットのカラーホイールで色を手動で選択します。

画像から抽出する

実は僕がおすすめしたいのがこの機能。

色を決めるときって、ざっくり「こんなイメージ」というのが頭の中にありますよね?
具体的な風景であったり、物やイラストであったり。

この「画像から抽出」ツールでは、それら写真素材からいい感じで色を抽出してくれる便利機能です。
結構使えるので、おすすめです。

さっそくやってみましょう。
例えば、こんなカフェの写真をアップロードすると…

いい感じで、色を抽出してくれます。

次は、色数の少ないちょっと意地悪な素材をアップロードしてみます。

結構いい感じにピックアップしてくれます。

というように、十分に色の候補として使えますよね。
カラーに迷ったときは使ってみてはいかがでしょうか。

以上Adobe Colorの紹介でした。

最新記事