こんばんわっ。あっという間に金曜日になってしまいました。
デザインにおいての配色は、そのサイトや広告、商品の第一印象やイメージを位置づけてしまうため色を選択するのには慎重になります。
フォントからの印象同様、目に入ってきたときの色の印象はその後の内容を「見る」「見ない」という行動の行き先を決めてしまうものだと思います。
数年前から人工知能のカラーツールがネット上でちらほら見かけるようになりましたね。
私も色で悩んだときや新しい発想を求めるときには、カラーパレットの参考サイトなどたくさんお世話になってます。
悩んだときに、参考を見るのは仕事を円滑に進めることになりますし、新しい発想が欲しいときはマンネリしている自分の脳に刺激を与えてあげるとその後の作業がスムーズになります。
ずっと悩んでることがいやなのですね･･･私。
そこで、よくお世話になっている人工知能を搭載したカラーパレットツールを2サイトご紹介します。人工知能のカラーツールは、自分の好きなカラーを選択していく作業もあるので煮詰まったときには気分転換にもつながります。
でもお仕事ではもちろん、いろいろなデザイナーさんが使用しているカラーパレット集も参考にしますし、映画などのイメージカラーをパレット化しているサイトもカラーリングの参考として利用させてもらってますよ。
目次
Khroma
2017年頃からでしょうか。結構有名になった人工知能のカラーリングツールです。
まずは人工知能に好きな配色を教えるために自分の好きな色を画面の色から50色選びます。
それを、学習して選んだ人が好むであろう配色でカラーパレットを作成してくれます。
人工知能って優秀！
トップページのPersonalizeで好きな色を50色選びましょう
いろんなカラーが並んでいる画面になるので、自分の好きだと思う色を50色選びましょう。ちょっと数が多いんですが、私はそのパレットを使いたい対象をイメージして色を選びました。
めげずに50色選んだら右上の「Start Training」というグリーンのボタンをクリック。ちなみに、私この解説用に1色多くクリックしてしまい51色選んでました笑
そこは見なかったことにしてもらい・・・
人工知能頑張って計算してくれてます。すごいなぁ・・・
すこし待つと、カラーパレットが出現します
Type
最初に表示されるページは、Type。テキストカラーと背景色の組み合わせを表示してくれます。
使ってみたい配色がある場合はカーソルをあわせ詳細表示をしてみると、カラーコードが出てきます。
HEX、RGBで表示されるので、用途にあった使い方をしてください。
Poster
二色の組み合わせの配色を選べます。コンテンツ背景などの分割にしたいときなどに使えそうですね。
こちらも詳細でカラーコードをコピーすることができます。
Gradient
2色グラデーションの配色を選べます。選んだ色をcss用にコピーすることができます。便利ですね
background: linear-gradient(rgb(230, 161, 164), rgb(153, 29, 18));
Image
人物画像との配色を選べます。
インパクトのある画像作成の際に使えそうですね。
Palette
こちら４色のカラーパレットを選択できます。全体で使用する配色バランスを選択すれば、カラーパレットを使用する対象の印象をセンスアップすることができそうですね。
Palettable
こちらはさらに直感的に好きなカラーを選んでいく人工知能カラーツールです。
サイトに訪問するといきなり好きか嫌いか尋ねられます。
Likeをクリックするとその色を保存して次の色へ。
Dislikeをクリックすると違うカラーが出てきます。
そして5色好きな色が決まると最後にExportボタンが出てくるのでクリック
URLかPNGで吐き出すことができます。
上のカラーのURLは
https://www.palettable.io/FFCB5E-F75E60-756355-9EDBA3-08CCBE
へ行くとカラーコードをコピーして使えます。
photoshopやillustratorその他のアプリでスポイトツールを使用して色をとりたいときは、PNGを使用するのがいいでしょう。
またクライアントや自分以外の人に資料としてカラーパレット共有するのも、円滑な作業進行になると思うのでぜひ使ってみてください。
