色選びに迷ったら使いたいカラーパレットツール「ColorSpace」

カラーパレット・グラデーション生成オンラインツールColorSpace

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

ウェブサイトの印象を大きく左右するのが色。

サイトの内容や対象者にあわせて選ばないと、サイトの目的を達成できない恐れがあります。

でも、色選びは難しいもの。特に色の組み合わせには、すごく悩みます。

そこで使いたいのが「 ColorSpace 」。

指定した色と相性の良い色を何パターンも教えてくれるオンラインツールです。

豊富なカラーパレットを提案

ColorSpace は、無料で使えるカラーパレット生成のオンラインツールです。会員登録は不要。アクセスすれば、すぐに使えます。

また、使い方がとても簡単です。

最初にするのは基本となる 1 つの色を選ぶこと。あとは Generate ボタンをクリックするだけです。

基本色を選ぶ実例

すると 25 種類のカラーパレットを作ってくれます。

生成されたカラーパレット

それぞれのカラーパレットには特徴があり、一般的なグラデーションや相性の良いグラデーション、アクセントカラーが 1 色あるパレット、明るめのグラデーション、自然なグラデーションなどなど、使用用途に合わせて選べます。

きっとお気に入りの色や組み合わせが見つかるはずです。

自然なグラデーションを作成

ColorSpace は、カラーパレットを生成するだけではありません。グラデーションを作る機能も持っています。

サイト右上にある「 Gradient 」メニューをクリックすると、グラデーションを生成するページに移動します。

メニューのGradient

こちらも使い方は簡単。

まずグラデーションの角度を矢印アイコンで選びます。最後の回転矢印は、放射状のグラデーションです。

次にグラデーションに使いたい 2 色を選び、 Generate ボタンをクリック。

すると CSS を生成してくれます。あとはスタイルシートに、そのまま貼り付ければ終わりです。

グラデーション生成の操作方法

ColorSpace が優れているのが、自然なグラデーションを作ってくれること。

例えば、赤の #f44336 と青の #2196f3 でグラデーションを作ってみます。

そのまま単純に指定すると、下のグラデーションに。

反対色であるため、どぎついグラデーションです。

一方、 ColorSpace が作るグラデーションを指定すると、下のグラデーションに。

とても自然。先ほどのグラデーションとは、まるで違います。

グラデーションに使う色は、通常は近似色を選びます。しかし、反対色であっても、ここまでのグラデーションにしてくれるのは、 ColorSpace ならではです。


ウェブデザイナーやグラフィックデザイナー、エンジニアは、何かしらお気に入りのカラーパレットツールを持っています。

私の場合には ColorSpace 。ほとんど毎日使っています。

あとはマテリアルデザインの推奨色を選べる Color Tool

この 2 つさえあれば、ほとんど色選びに迷いません。

和風のサイトを作る時には、 NIPPON COLORS も便利です。