デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer

色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。

カラーのセンスがなくても、デザイン的に合った組み合わせが分かります。

サイトのキャプチャ

Color Designer

Color Designerの使い方は、簡単です。
登録など、面倒なことも一切不要です。

サイトのキャプチャ

Color Designer

まずは、ベースになるカラーを決めます。
基本7色のスウォッチ、カラーピッカー、16進数でカラー設定でき、画像にも対応予定です。

サイトのキャプチャ

ベースになるカラーを決める

ブルーで試してみました。
生成したカラーパレットはURLも発行されるので、同じカラーパレットを何度でも利用できます。

サイトのキャプチャ

ブルーの配色

生成されたカラーパレットを見てましょう。
ますは、ブルーの明るい色合い。上部のバーで、色合いの数を変更できます。

サイトのキャプチャ

ブルーの明るい色合い

最近のUIデザインでは、同一色相のカラーを使用するケースが多いので、明るい色合いと暗い色合いは便利ですね。

サイトのキャプチャ

ブルーの暗い色合い

色の組み合わせのセオリーもさまざまなものが用意されています

サイトのキャプチャ

色の組み合わせ

補色: Complementary
ある色とカラーホイールの反対側の色との組み合わせ。
同一色相: Monochromatic
ある色とその色のバリエーションとの組み合わせ。
類似色: Analogous
ある色のカラーホイールで隣接している3つの色の組み合わせ。
分裂補色: Split complementary
ある色とその補色の両隣の2つの色との組み合わせ。
3色配色: Triadic
カラーホイールを3等分した位置の色の組み合わせ。
4色配色: Tetradic
カラーホイールを4等分した位置の色の組み合わせ。

プレゼンテーションモードにすることもできます。

サイトのキャプチャ

プレゼンテーションモード

sponsors

top of page

©2019 coliss