現役WEBデザイナーが選ぶ!配色選びに役立つオンラインツール9選

デザイン

現役WEBデザイナーが選ぶ!配色選びに役立つオンラインツール9選

2018年11月28日 8:00 

現役WEBデザイナーが選ぶ!配色選びに役立つオンラインツール9選

おはようございます!社員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つの色を抽出してくれます。

また、カラーテーマを一から作成したり、作成済みのカラーテーマを編集するなどの高度な機能が備わっています。

 color.adobe.com 
https://color.adobe.com/ja/create/color-wheel/
https://color.adobe.com/ja/create/color-wheel/

 

Grabients

最近のデザイントレンドになっているカラフルグラデーションを見ることが出来ます。

公開されているグラデーションをベースにカスタマイズしたり、カラーコードをコピーしたり、さらにはCSSのソースコードまでコピーできるというすぐれもの。

 



CoolHue

こちらのサイトも美しいグラデーションを揃えているサイトです。

カラーコードのコピー・CSSのコピー・pngをダウンロードできます。

 

まとめ

複数のデザインを同時進行していると、色に煮詰まることが結構あります。

「この前この色使ったな…」とか「あんまり得意なカラーの配色じゃない!」というときに上記のオンラインツールを活用すれば、ユーザーが投稿したパレットを参考にしたり、スペースキーだけで自由に配色を作れたりするのでとても便利です。

最近はグラデーションもトレンドなので、より一層デザインセンスが問われますが、そんな時にも活用出来ると思います。

また、CSSをコピーできるサイトも多かったのでコーダーさんにとっても便利ですね。

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!