デザイン
現役WEBデザイナーが選ぶ！配色選びに役立つオンラインツール9選
2018年11月28日 8:00
おはようございます！社員Aです👩
今回は、現役WEBデザイナーが選ぶ！配色選びに役立つオンラインツールをご紹介します。
デザインをしている時に、レイアウトは仕上がったけど配色でしっくりこないスランプが訪れたりするのですが、そんな時に活用している配色選びを助けてくれるオンラインツールがあります。
Photoshopとにらめっこしながら配色に悩むよりも時短になるのはもちろんのこと、結果として制作物のクオリティが上がるので配色でお悩みの方は必見です！
もくじ
coolors
スペースキーを押すだけでランダムにカラーパレットが表示される配色ツールです。
しっくり来る色が見つかるまでスペースを押すだけで良いので、直観的に選べるのが魅力で私もよく使っています。
全色使わなくても単色でクリックするとカラーコードをコピーできるのでそのままデザインに反映できます。
また、メインとなる色を固定してその色に合わせた配色を試すという機能もあるのでかなり重宝します。
Palettr
こちらの配色サイトはちょっと変わっていて、キーワードやテーマを入力するとそれに合わせた配色を提案してくれるオンラインツールです。
サイトのコンセプトやキーワードが決まっている場合に役立つこと間違いなしです。
Color Lisa
Color Lisaは、ゴッホやモネなどの芸術家の名画から配色を集めたサイトです。
作品名をクリックすると、元になっている絵画を見る事ができます。
ColorHunt
ユーザーが投稿したカラーパレットを見ることが出来ます。
ざっと一覧を見られるので、気に入ったパレットがあればお気に入りに保存しておくことでいつでも見返すことが出来ます。
トレンド色を使ったカラーパレットも豊富にあるので、配色に迷っているときにも重宝しますね。
COLOURlovers
ユーザーが作成した配色パターンを閲覧・利用することができます。
とにかく投稿された配色パターンの多さが魅力で、数えきれないほどのパターンがあります。
配色パターンごとにカラーコードを見ることも出来ます。
Material Design Palette
マテリアルデザインのカラーパレットに特化したサイトで、2色選ぶと残りの色を選んでくれます。
CSS、SASS、LESS、SVG、XML、PNGの形式でダウンロード可能です。
Adobe Color CC
Adobe Color CCは、写真やイラストをアップロードするだけで5つの色を抽出してくれます。
また、カラーテーマを一から作成したり、作成済みのカラーテーマを編集するなどの高度な機能が備わっています。
Grabients
最近のデザイントレンドになっているカラフルグラデーションを見ることが出来ます。
公開されているグラデーションをベースにカスタマイズしたり、カラーコードをコピーしたり、さらにはCSSのソースコードまでコピーできるというすぐれもの。
CoolHue
こちらのサイトも美しいグラデーションを揃えているサイトです。
カラーコードのコピー・CSSのコピー・pngをダウンロードできます。
まとめ
複数のデザインを同時進行していると、色に煮詰まることが結構あります。
「この前この色使ったな…」とか「あんまり得意なカラーの配色じゃない！」というときに上記のオンラインツールを活用すれば、ユーザーが投稿したパレットを参考にしたり、スペースキーだけで自由に配色を作れたりするのでとても便利です。
最近はグラデーションもトレンドなので、より一層デザインセンスが問われますが、そんな時にも活用出来ると思います。
また、CSSをコピーできるサイトも多かったのでコーダーさんにとっても便利ですね。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
