A8.netのコンテンツのことや
デザイナーのお役立ち情報などを発信します

  • 2023/5/26
  • WEB制作

制作時、配色に困ったら?役立つ配色サイト5選

  • みやち

こんにちは、みやちです。

webデザイナーとして10年以上業務にあたっております。
ご覧になっているみなさまに少しでもお役立ていただける記事を書ければと思っております。
よろしくお願いしますm(__)m

サイト制作時レイアウトを作成している際
良く出てくる悩みとして配色の問題があるかと思います。

なんだかしっくりこない…
色合いが合わない…

そんな時は感覚で選別するよりも配色サイトに頼ってみましょう!
自分が普段使用しているサイトや便利そうなサイトを5サイト紹介したいと思います。

Adobe Color CC

https://color.adobe.com/ja/explore/?filter=most-popular&time=month

Adobeユーザーなら必見!
日本語でイメージを検索でき、5色の配列を提案してくれます。
またその5色を使用したイメージなどもありかなり制作には役立つのではないでしょうか。
Adobe CCのアカウントを持っていれば、「ライブラリ」に登録できるので、PhotoshopやIllustratorに反映することも可能です!

ColorDrop

https://colordrop.io/

4色の配色パレットを提案してくれる使いやすいサイトです。
表示されたカラーはクリックでカラーコードを即表示してくれるので設定するのにとても便利!
グラデーションジェネレーターもあるのでcss設定の際は、ソースを貼り付けるだけでOK

Color Supply

https://colorsupplyyy.com/app

カラーチャートを動かすことで配色を選んでくれる便利なツールです。
キーカラーを選ぶと補色も自動的に選択してくれるのでweb制作には非常に便利!
簡単なアイコンで確認ができるのでイメージもつきやすいかと思います。

Brand Colors

https://brandcolors.net/

ブランド(主に海外ブランド)を検索して使用しているカラーがわかるというサイトです。
ロゴを拾ってきてスポイトで調べるのも大変。。ということで一発調べることができるお役立ちサイトです。
主にロゴ制作に役立つと思います。

Palette Maker

https://palettemaker.com/app

好きな配色をクリックするだけで、制作サンプルを確認することができるサイトです。
気に入った配色があればそのまま使用することが可能です

まとめ

いかがでしたでしょうか。
配色サイト自体は数多くあるのですが定番からちょっと変わったものまで紹介させていただきました。

気に入ったものがあればブックマークして是非ご活用ください!

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません

注目コンテンツ