素敵な配色パターンを知りたい!おすすめ配色ツールのまとめ【2022年版】

  • このエントリーをはてなブックマークに追加

初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』
今回はそんな配色のヒントを得られるサイトをご紹介します。

Color Drop

Color Drop

4つの色の組み合わせがずらっと用意されているサイトです。
気になる色をクリックすると右側にカラーコードが発行されるので、あとはコピーするだけ。
用意されている色に限りはありますが、シンプルなものを求めている方におすすめです。

実は地味に画像から色を抽出したりカラーコードの相互変換やグラデーションツールなどもあるので、必要に応じて使ってみてください。


SchemeColor.com

SchemeColor.com

こちらもずらっと配色パターンを表示してくれているサイトです。


気になる配色をクリックすると、色の一覧が表示されます。
各色にカーソルを置くと、カラーコードをコピーできたり色の調整ができたりします。
もとから決まった色が多めにほしい方におすすめです。


Colormind

Colormind

いわゆる人工知能を使って配色パターンをランダムで生成してくれるサイトです。
サイトを開くとすぐにある『Generate』のボタンを押すとすぐに生成してくれます。

色のすぐ下にある鍵のマークをクリックした後に『Generate』のボタンを押すと、それを基準にして色を選択してくれます。
また、右端にある矢印で順番を入れ替えることで提案される配色のパターンが違うものになります。

カラーパレットで好きな色も指定できるので、そこから配色パターンを生成することもできます。

Color Hunt

Color Hunt

Color Dropと同じように4色の組み合わせがすでに用意されているので、色にカーソルを当ててカラーコードをコピーするだけで使用できます。

注目したい点は配色パターンとカテゴリーわけの豊富さ。気に入るものがきっと見つかると思います。

Khroma

Khroma

Khromaでは自分がいいなと思った色を50色選ぶことで、自分の好みの配色パターンを提案してくれます。
TOPから『Get started』をクリックします。

遷移した画面の先でいいなと思った50色を地道に選択していきます。

選択をした後は、人工知能が配色パターンを生成してくれます。
自分で選んだ色を参考にしていますが、こういう配色もあるのか!と結構参考になります。


Pigment

Pigment

顔料と光量の調整で2色の配色パターンを確認することができます。

画面の左側にあるアイコンで、バーを上下に動かすことで顔料・光量の調整ができます。

配色パターンをクリックすると、それぞれの色の左側にある明度の違う色が表示されます。
そこをクリックすることでさらにほかのパターンの確認もできます。


PALETTABLE

PALETTABLE

ベースになる色を自分で選び、下の『Like』を押すと右側にほかの配色が提案されていきます。

もしあまり気に入るものでなければ『Dislike』を押すとほかの色をどんどん提案してくれます。

どちらかというとベースで使いたい色が決まっている人向けのツールです。


Hello Color

Hello Color

2色をベースに、画面をクリックしていくと次々と色が表示されていきます。

画面下には地味に中間色なども表示されているので、2色だけじゃ…という場合も参考にできます。



Colors

Colormind

Colorsは一見シンプルですが、様々な配色のカスタマイズを行うことができます。
TOPページにある青いボタン『Start the generator!』をクリックします。

そうすると配色パターンの画面が開きます。
この画面で『spaceボタン』を押すと色々な配色パターンを表示してくれます。

色と色の間をクリックすると、中間色を表示してくれます。

色の中にカーソルを当てると、色コードをコピーできたりロックしたりお気に入りにできたり…などの機能が出てきます。

画面右上にも様々な機能があります。
例えば『Adjust palette』をクリックすると、ベースから色相などを変えて比較・そこから使用することができます。
初心者から中級者まで色々とかゆいところに手の届くツールだと思います。


Adobe Color

Adobe Color

ご存じAdobeが提供している配色ツールです。
自分で色を選んだりすることが前提なので少々中級者向けかもしれません。
例えば一色を選んだら左側の項目から類似色を選んだり補色を選んだり…などができます。

また、参考にしたいと思った画像をアップすることで色を抽出できる機能もあります。

ほかにも『アクセシビリティツール』が用意されており、コントラスト比の合格・不合格のチェックをしてくれます。






執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】古いWordPressで絵文字を使えるようにするお話

WordPressはLAMP環境で動くCMSとして昔から有名ですが、昔から使われているサイトの場合、絵文字が使えないことがあります。 今回はそういう場合の絵文字を使えるようにしてみましょう 目次1 MySQLのバージョンを調べる2 テーブルの照合順序を変更する3 最近の事情 MySQLのバージョンを調べる 使えるようにしましょうといいつつ、実は大前提があります。 それはMySQLのバージョンが5.5以降であることです。 それ未満のバージョンは「utf8mb4」にできないため、 […]

Webサイト制作

【さくらのレンタルサーバー】環境ごとにPHPのバージョンを変更するお話

最近何かとAI関係で話題の「さくらインターネット」ですが、レンタルサーバーはコスパもよく、かなり使いやすいサービスだと思います。 特にWordPressなどのLAMP環境に最適化された環境であり、PHPもいろいろなバージョンを選ぶことができます。 変更方法も簡単でコンパネからボタン一つでできるので楽ちんですね。 ただ当然なのですがマルチドメインで運用している場合もすべての環境にPHPのバージョンが一斉に反映されてしまいます。 それはそれで便利なのですが、例えばこの環境のみバー […]

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。