2色・3色・多色、色の組み合わせ方が分かる配色に便利なオンラインツールのまとめ
Post on:2015年12月8日
sponsors
デザインやイラスト、プレゼンなどのデータ、そしてファッションや料理など、色の組み合わせ・配色は非常に重要です。
指定した色をベースに、その色に合う組み合わせが分かる配色に便利なオンラインツールを紹介します。
2色を選択して、ミックスした際の色の割合
Pantoneにインスパイアされたさまざまなカラーの組み合わせ、グラデーションなどを試したり、編集できます。選択したカラーは右パネルに登録され、中央パネルで色の組み合わせや比較やミックスさせることができます。
FlatのUIデザインにマッチするカラーのコレクション。レッド、ピンク、オレンジ、ブルー、グレーなど、色ごとにまとめられているので便利です。
シンプルな操作でカラーの色相・明度・彩度を変化させて、カラーをストックできます。色相はマウスを左右に、明度はマウスを上下に、彩度はスクロール。
Photoshopからも利用できる「Adobe Color テーマ」はブラウザ上でも「Adobe Color CC」として利用できます。使い方は同じで、作成したカラーパレットはAdobe IDを介して同期できます。
ヒートマップやデータのビジュアル化など、複数の色相・単一の色相のカラーパレットを作成できます。
参考: 棒グラフや円グラフなど、データをビジュアル化した際に効果的な配色
棒グラフなどのデータで複数のカラーを使用する時に、HCLカラースペースから分かりやすく見やすいカラーを選択できます。
色の判別がはっきり分かるカラーを使った美しいカラーパレットを生成します。
左の「Color space」でカラースペースを決め、右の「Make a palette」でパレットを作成します。見やすい色がどんな感じなのか、アニメーションで楽します。
指定したカラーを元に、色相環を使った配色セオリーに基づいたカラーパレットを簡単に作成できます。
清潔感・可読性を追求したスイス スタイルのカラーパレットのサンプル。ソリッドカラーはかわいい組み合わせが多いですが、右上のアイコンからノイズを加えると一味違った面白いカラーが楽しめます。
最後はPantoneカラーを使ったクリエイティブな作品。
Pantoneカラーを再現するスムージーのレシピ集。レシピも写真も非常に美しく仕上がってします。
sponsors
