サイトカラーに最適な色&グラデーションを生成する「ColorSpace」

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

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

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

指定した色と相性の良い色を何パターンも教えてくれるカラーパレット生成ツールです。また、グラデーションを生成する機能もあります。

指定した色に合った色を豊富に提案

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

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

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

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

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

サイトカラーに最適なアクセントカラーを見つけたい時などに非常に便利です。

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

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

2 色から生成する「Gradient」

サイト右上にある「Gradient」メニューから、グラデーションを生成するページに移動できます。

こちらも使い方は簡単。

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

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

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

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

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

単純にこのような CSS を指定すると…。

.example {
  background-image: linear-gradient(to right top, #f44336, #2196f3);
}

不自然なグラデーションになってしまいます。

一方、ColorSpace は、このような CSS を生成します。指定した #f44336#2196f3 の間に、別の 3 色が入ります。

.example {
  background-image: linear-gradient(to right top, #f44336, #f93a80, #d95bc1, #967eea, #2196f3);
}

すると、このような自然なグラデーションのできあがり。

反対色であっても自然なグラデーションにしてくれるのは、ColorSpace ならではです。

3 色から生成する「3-Color-Gradient」

メニューの「3-Color-Gradient」からは、3 色を使ったグラデーションを生成できます。

使い方は 2 色を指定する「Gradient」と同じで、任意の 3 色を指定し Generate ボタンをクリックすると CSS を生成してくれます。

例えば、左から赤の #f44336・紫の #9c27b0・青の #2196f3 の順番で入力してみます。

すると、ColorSpace は、このような CSS を生成します。#f44336#2196f3 は最初と最後にありますが、#9c27b0 はなくなりました。代わりに 10 色を生成しています。

.example {
  background-image: linear-gradient(to right top, #f44336, #f3244f, #ec0067, #dd007f, #c70096, #b62aaa, #a13fbc, #864fcb, #7164db, #5a77e7, #3f87ef, #2196f3);
}

この CSS を指定したのが、下のグラデーションです。とてもきれい。

ColorSpace は、サイトに合ったグラデーションを作るのに非常に重宝します。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。