配色に迷ったら…。カラー選定に役立つWebツール10選!

カラー選定で役立つWebサービス&ツール

サイトをデザインする際によく使うWebサービスと、便利なツールを紹介します。すべて無料のものなので、とりあえず触ってみて、自分に合うものをつかうとよいでしょう。

【1】flatuicolors
color01
近年流行している「フラットデザイン」によく用いられる色が掲載されています。色数は少ないのですが、その分迷うこともないので使いやすいサイトです。色をクリックすることで、その色の16進数をコピーすることができます。
【2】guidelinecolour
color02
大手Webサービス、ポータルサイトなどのメインカラーが載っています。「○○みたいなホームページにしてほしい」と依頼されたときなどに参考にします。
【3】colorschemedesigner
color03
メインカラーを入力することで、さまざまな配色パターンを調べることができます。最近、機能が強化されてより使いやすくなりました。
【4】Color of Book
color04
雑誌の表紙の配色を調べることができます。直接雑誌名を入力して調べることもできますし、ファッション誌、スポーツ誌、性別、年齢などで検索することもできます。
photoshop用カラーパレットをダウンロードすることができます。
【5】Web Color Data
color05
有名サイトがどのような配色を用いているのか調べることができます。URLを入力すると、そのサイトのデータを知ることができるので、競合サイトの分析などにも役立ちます。
【6】原色大辞典
color06
色の名前や16進数を調べることができます。地下鉄のメインカラーが掲載されていたり、ストライプを生成できるツールなど機能も充実しています。
言葉を入力して、色を分析する成分解析は、参考にはなりませんが、楽しくておススメです。
【7】adobe kuler
color07
adobe社のオンラインカラーツール。Webブラウザ上で、配色テーマを作成したり、他の人が作ったテーマを探すことができます。
オンライン版のカラーライブラリとでも言えばよいでしょうか。adobeなので、公開されているテーマをphotoshopやIllustrator用のスウォッチとして取り込むこともできます。
【8】Web Site Color Picker
color08
URLを入力することで、サイトの配色データを調べることができます。抽出した色をピックアップして、自分用のカラーパレットを作成し保存することもできます(twitterとの連携が必要)。
【9】ColorPick Eyedropper
color09
choromeの拡張機能。閲覧しているWebサイトの 色を16進数で取得することができます。photoshopやIllustratorなどで作業しているときに、このサイトのこの色を使いたい!というときにわざわざスクリーンショットを取る必要がなく、かんたんに色を拾えます。
【10】colorZilla
color10
firefoxのアドオン。閲覧しているWebサイトの色を調べられます。知りたい部分マウスを乗せると、RGB値や16進数を知ることができます。さらにクリックすると、16進数の値をコピーすることができます。
1 2

カテゴリーから記事を探す