ブログ

BLOG

【2022年版】おすすめカラーパレットツール10選

2022.7.28

  • ホームページ制作

ホームページにとってカラーはとても重要な要素の1つです。

印象がガラッと変わる「カラー」の選び方で、ホームページのカラーが与える印象と選び方を説明しましたが、いざ選ぶとなると、なかなか難しいと思います。

そこで今回は配色を提案してくれたりコレクションしたりしているツールを紹介します。

ノンデザイナーの方でも素敵な配色を見つけられるツールばかりなので、ぜひホームページのカラー選びの参考にしてください。

Adobe Color CC

Adobe Color CC

Adobe Color CC

Adobe製のツールで、トレンドカラーやキーワードからカラーパレットを探すことができます。カラーハーモニー(色同士の関係性)から配色を生成することもできます。

カラーハーモニーは以下から切り替えられます。

・類似色
・モノクロマティック
・トライアド
・補色
・コンパウンド
・シェード
・カスタム

画像からカラーパレットやグラデーションを生成できるなど機能も充実おり、ログインするとカラーパレットを保存することもできます。

Color Supply

Color Supply

Color Supply

2~4色の組み合わせから、さまざまなパターンの配色を探すことができます。
類似色やトライアドなどからも配色を見つけられる使いやすいツールです。

Hue 360

Hue 360

Hue 360

色相、彩度、明度を選択しながら配色を作成できます。Brightnessのボックスをクリックするとカラーホイールの基準の明るさが変わります。
メインの色を選択すると配色バランスのいい色だけ残るので、自分で色の組み合わせを探すのに向いています。

Nippon Colors

Nippon Colors

Nippon Colors

日本の伝統色が250種類用意されており、和テイストのホームページを作るときに重宝します。
全然知らない色も多く、見ているだけでも楽しめます。

Color Kitty

Color Kitty

Color Kitty

イメージ画像をアップロードするとカラーパレットが生成され、お勧めの配色を提案してくれます。
ブランドやサービスのイメージが決まっているときに役立ちます。ナンバーが付いているピンを動かすと、さまざまなパターンを見ることができます。

ColorDrop

ColorDrop

ColorDrop

4色の配色が集められています。画面上部のプルダウンで人気順に見ることもできます。

Farbvelo

Farbvelo

Farbvelo

画面右下のリロードボタンをクリックするだけで美しい配色を提案してくれます。
色数やカラーモードなど詳細設定もでき、クリックでカラーコードもコピーできます。

Color Leap

Color Leap

Color Leap

世界中の有名絵画や美術品、ノスタルジックなポスターに使われている色が集められています。ほかのツールとは毛色の違う面白みがあります。
作品などを時代を追って見ることができ、見ているだけでも楽しめます。

uiGradients

uiGradients

uiGradients

美しいグラデーションがランダムで表示され、左右の矢印をクリックすると切り替わります。
左上の「Show all gradients」のボタンをクリックするとグラデーションを一覧で見れ、ベースの色を選択できます。
クリックするだけでCSSや画像をダウンロードできます。

HELLO COLOR

HELLO COLOR

HELLO COLOR

画像をクリックすると2色が更新されます。複雑なパターンを探すことはできませんが、何となく眺めているとアイデアが浮かんでくるかもしれません。

素敵な配色を見つけてください

今回紹介したのは、数あるツールのほんの一部です。

「カラーパレットツール」などで検索すれば、他にもたくさんのツールが見つかります。
ツールをまとめたブログもたくさん出てくるので、チェックするのもいいと思います。

いろいろなツールを使って、ぜひ素敵な配色を見つけてくださいね。