ベースカラーに合うカラーパレットの自動作成ツール

Blog Single

みなさん、こんにちは。

業務中、デザインを考えている時に配色で悩んだ事はありませんか?
私はあります。文字の色、背景色、ボタンの色…etc 色々悩みます。
長時間悩んで色をつけたけど結局ダサくて考え直すなんて事はしょっちゅうあります。

そこで今回紹介は、ベースカラーを選ぶだけでその色に合う色を自動で選んでくれるツールを2つ紹介します。

■Plax

1つ目は、Plax というツールです。
Plax は、指定したカラーコードに合うフルスペクトルのカラーパレットが作成してくれるツールです。

試しに弊社のロゴのオレンジの部分で試してみましょう。
Base Color に #DE7B39 を指定します。

すると、下図のようにBase Colorに指定した色に合うフルスペクトルのカラーパレットが作成されます。

grayからredまでのカラーパレットが作成されました。
grayの中でも薄いグレーから濃いグレーまで、幅広いスペクトルで作成されている事が分かります。
あとはその中から好きな色を選んで組み合わせるだけです。

次は PANTONEColor of the Year に選んだ Ultra Violet(カラーコード : #5C4D89) でも試してみます。

先ほどのオレンジと違い、grayのパレットが2種類作成されています。

■HUE/360

2つ目は、HUE/360 というツールです。
HUE/360 は円形に並んだ色の中からベースカラーを選ぶと、選んだ色に合わない色が消え、ベースカラーと相性の良い色だけを表示するツールです。

今回はUltra Violetのみで試してみます。

上図のように相性の悪い色が消え、相性の良い色のみが残っている事が分かります。
ここからさらに複数色を選び、左下のPrint User Colorをクリックすると、選んだ色のカラーコードを見る事が出来ます。

■まとめ

これらのツールを使う事で、私は色で迷う時間がグッと減りました。
しかし、これらのサイトの結果が全て正しいわけではありません。
良いデザイン、悪いデザインは使う時々によって変わって来るものです。
しかし、1つの指標になる事は確かなので、色で迷った時に使ってみてはいかがでしょうか。
合う色を見ているだけでもセンスは磨かれていくかと思います。

Posted by ShibuyaYuuki
今はPHPで開発を行なっているエンジニア。 就職してから体重が15キロ増えました!!

Other Posts: