FirstLayout

カラーパレットとグラデーションの生成ツールColorSpace

カラーパレット

ウェブサイトの印象を大きく左右するのが色。サイトの内容や対象者に合わせて選ばなければ、サイトの目的を達成できない恐れがあります。

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

そこで使いたいのが 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 は、サイトに合ったグラデーションを作るのに非常に重宝します。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール