2色・3色・多色、色の組み合わせ方が分かる配色に便利なオンラインツールのまとめ

デザインやイラスト、プレゼンなどのデータ、そしてファッションや料理など、色の組み合わせ・配色は非常に重要です。
指定した色をベースに、その色に合う組み合わせが分かる配色に便利なオンラインツールを紹介します。

サイトのキャプチャ

2色を選択して、ミックスした際の色の割合

サイトのキャプチャ

Coleure

Pantoneにインスパイアされたさまざまなカラーの組み合わせ、グラデーションなどを試したり、編集できます。選択したカラーは右パネルに登録され、中央パネルで色の組み合わせや比較やミックスさせることができます。

サイトのキャプチャ

Flat Color Picker

FlatのUIデザインにマッチするカラーのコレクション。レッドピンクオレンジブルーグレーなど、色ごとにまとめられているので便利です。

サイトのキャプチャ

color.hailpixel

シンプルな操作でカラーの色相・明度・彩度を変化させて、カラーをストックできます。色相はマウスを左右に、明度はマウスを上下に、彩度はスクロール。

サイトのキャプチャ

color code

color codeは人気のカラーツールですが、どんどん進化を重ねています。
各カラーをどんどんストックできるのは上記のツールと似ていますが、左パネルの色相環を使った配色でもカラーを変化させ、直感的ながら緻密な配色設計ができます。

サイトのキャプチャ

Adboe Color CC

Photoshopからも利用できる「Adobe Color テーマ」はブラウザ上でも「Adobe Color CC」として利用できます。使い方は同じで、作成したカラーパレットはAdobe IDを介して同期できます。

サイトのキャプチャ

ColorBrewer 2.0

ヒートマップやデータのビジュアル化など、複数の色相・単一の色相のカラーパレットを作成できます。
参考: 棒グラフや円グラフなど、データをビジュアル化した際に効果的な配色

サイトのキャプチャ

Colorpicker for data

棒グラフなどのデータで複数のカラーを使用する時に、HCLカラースペースから分かりやすく見やすいカラーを選択できます。

サイトのキャプチャ

i want hue

色の判別がはっきり分かるカラーを使った美しいカラーパレットを生成します。
左の「Color space」でカラースペースを決め、右の「Make a palette」でパレットを作成します。見やすい色がどんな感じなのか、アニメーションで楽します。

サイトのキャプチャ

Color Calculator

指定したカラーを元に、色相環を使った配色セオリーに基づいたカラーパレットを簡単に作成できます。

サイトのキャプチャ

Swiss Style Colors

清潔感・可読性を追求したスイス スタイルのカラーパレットのサンプル。ソリッドカラーはかわいい組み合わせが多いですが、右上のアイコンからノイズを加えると一味違った面白いカラーが楽しめます。

サイトのキャプチャ

Pantone Smooties

最後はPantoneカラーを使ったクリエイティブな作品。
Pantoneカラーを再現するスムージーのレシピ集。レシピも写真も非常に美しく仕上がってします。

sponsors

top of page

©2018 coliss