一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ

コーポレートカラーなど、一つのカラーをベースに配色セオリーからカラースキームを設計したり、同系色やグラデーションを作りだしたりできるオンラインツールを紹介します。
またカラーのストックを増やしたり、カラーをベースにしたムードボード作りに役立つツールもいくつか。

最初は、国産のツールから。

サイトのキャプチャ

配色の見本帳 | キーカラーで選ぶ配色パターン

一つのカラーをベースに、さまざまな色の法則から配色パターンを表示します。
上は緑みの青(#0099CE)をベースにしたもの。キャプチャの他に、彩度や明度による配色、色相環による配色など、さまざまな配色を表示します。説明付きなのも嬉しいポイントです。

サイトのキャプチャ

colourcode

シンプルな操作で直感的にカラーを楽しむことができ且つ実用的、もちろん指定したカラーから配色を設計できます。
使い方は下記ページを参考に、UIが少し変わりましたね。

サイトのキャプチャ

0to255

一つのカラーをベースに明度を変更したバリエーションを表示します。同色系やグラデーションなどの作成に便利。

サイトのキャプチャ

HUE / 360

マンセル色空間とM&S配色理論を使って、彩度控えめのカラーで調和のとれた配色を作成できます。

サイトのキャプチャ

Hex Color

指定したカラーに、ホワイトとブラックを加えてカラーパレットを作成できます。
使い方は下記ページを参考に。

サイトのキャプチャ

Color Munsell

マンセル色空間とPantone Goe coatedを使い、新しいパレットを作成したり既存のパレットを参照できます。

サイトのキャプチャ

iOS 7 colors

iOS 7にインスパイアされた美しいグラデーションのサンプル集。

サイトのキャプチャ

Nippon Colors -日本の伝統色

日本の伝統色がインタラクティブに楽しめます。右端の「Munsell」をオンにするともっと楽しめます。

サイトのキャプチャ

Design Seeds

写真をベースにしたカラースキームのコレクション。女性が作成しているためか優しい雰囲気のものが多いです。

サイトのキャプチャ

Spectrum

カラーと単語をベースに画像をShutterstockから検索します。キャプチャはブルーとクリスマス。

top of page

©2017 coliss