【5分でできる！】カラーパレットの作り方

色は、あらゆるデザインの印象を大きく左右する要素です。そのためデザインで使う色やその組み合わせを決めた「カラーパレット」を決定するのは、デザイナーの重要な仕事といえます。

しかし色はほぼ無限に存在するもの。どの色を組み合わせればいいのか迷うデザイナーも多いでしょう。

そこで今回は、カラーパレットの作り方をご紹介します。色選びの基本を抑え、5分でカラーパレットを作れるようになりましょう。

コカ・コーラ社の事例からわかる色の影響力

筆者は以前、コカ・コーラ社のブランディングプロジェクトに携わっていました。担当したのは、夏に行われるイベントで使用するデザインです。

どのようなデザインにするか悩んでいると、マネージャーから「コカ・コーラ社らしい赤にしてみて」と助言されました。「それだけでコカ・コーラ社だと認識されますか？」と尋ねると、「それがコカ・コーラ社のカラーコードだからね」との返答。

そこで、赤を大胆に使用したデザインを採用したところ、イベントは満員御礼に。観客は赤という色だけでイベントがコカ・コーラ社のものだと認識し、参加を決めたようでした。

▲いくつかの色は特定の企業を連想させる（出典：Muzli）

色は、ロゴと同じくブランドを象徴するもの。使用するカラーパレットは、ブランドイメージに直結します。

カラーパレットの作り方

ここからは、カラーパレットの作り方について解説します。4つの簡単なステップで、カラーパレットを作ってみましょう。

ステップ1. ベースカラーを選ぶ

カラーパレットを作るにあたって、まずは土台となる色を選びます。

与えたい印象やブランドの方向性にあった色を選びましょう。他の企業を参考にするのも大切。競合となる企業のカラーパレットを知ることで、色の候補を絞りやすくなります。

▲出典：Reddoor Creative

今回はコカ・コーラ社のエピソードにちなんで、赤を選びました。

▲出典：Muzli

上図のカラーピッカーのうち、点線で囲まれた範囲から色を選ぶのがおすすめです。

彩度が高すぎたり、色が暗すぎたりしないように気をつけましょう。ここで選んだ最初の色をベースカラーといい、色選びの基準となります。

ステップ2. 明るい色を作る

ベースカラーが決まったら、色を調整してカラーパレットを作っていきます。

▲出典：Muzli

色を選ぶ基準になるのが、上図のように左上から右下にかけて白線で引かれたアーチです。

この白線のアーチの中から色を選んだあと、色相を調整するのがおすすめ。違和感のないカラーパレットが作りやすくなります。

▲出典：Muzli

まずはアーチのやや左上を選択し、かつ色相をすこし右に動かしました。

すこし明るい、オレンジ寄りの色ができましたね。

▲出典：Muzli

同様の方法で、ベースカラーよりも明るい色を3色作ります。

▲出典：Muzli

▲出典：Muzli

ベースカラーを含めて4色がカラーパレットに揃いました。

ステップ3. 暗い色を作る

ここからは、ベースカラーよりも暗い色を作っていきます。

明るい色を作る際とは逆に、アーチのやや右側を選択し、色相は左側に動かしましょう。

▲出典：Muzli

▲出典：Muzli

▲出典：Muzli

▲出典：Muzli

ベースカラーに加えて、明るい色3種類、暗い色3種類、合計7色のカラーパレットが完成しました。

ステップ4. ハードライトでバリエーションを増やす

ブレンドモードをハードライトに設定してレイヤーを重ねれば、色のバリエーションを増やせます。

今回は上の部分に#BABABA、下の部分に#525252を重ねました。

▲出典：Muzli

これで21種類の色ができました。ここから組み合わせる色を選びます。

色の組み合わせかたに絶対的なルールはありませんが、暗い色と明るい色を組み合わせ、そこにニュートラルな色を入れるのがおすすめです。

この21色で、以下のようなカラーパレットが作れます。

▲出典：Muzli

考えるより作ってみよう

さまざまな色を前にすると、どの色を選べばいいのか悩んでしまいがち。そんな時は、頭で考えるよりも手を動かして、まず色を作ってみましょう。

今回ご紹介した作り方なら、5分もあれば基本的なカラーパレットができます。人によってカラーパレットの作り方はさまざまですが、この方法を覚えておけば、いつでも簡単に色のバリエーションが増やせるはずです。

（執筆：Peter Javorkai　編集：Asuka Nakajima　編集：泉　提供元：Muzil）