初心者だと何を選んだらいいのかわからなくなったり、そこそこ経験のある人でも同じようなものを選んでしまったりで悩んでしまう『配色』。
今回はそんな配色のヒントを得られるサイトをご紹介します。
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が提供している配色ツールです。
自分で色を選んだりすることが前提なので少々中級者向けかもしれません。
例えば一色を選んだら左側の項目から類似色を選んだり補色を選んだり…などができます。
また、参考にしたいと思った画像をアップすることで色を抽出できる機能もあります。
ほかにも『アクセシビリティツール』が用意されており、コントラスト比の合格・不合格のチェックをしてくれます。
