素敵な配色パターンを知りたい!おすすめ配色ツールのまとめ【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】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

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

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

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

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