Advertisement

color-tool2015-top1-1

 

PhotoshopVIP編集部: 2016年8月22日に公開された記事を再編集し、前回より17個のツールやサービスが増え、合計36ツールをご紹介しています。

 

配色はあらゆるデザインの基本となる、とても重要な要素のひとつで、配色を選ぶときは細心の注意が必要となります。色彩理論に基づいたアプローチをすることで、人間の行動を変えてしまうこともできます。

 

苦手な人も多い配色えらびをより手軽に行うことができる、無料カラーツールをまとめて今回はご紹介します。直感選ぶだけで配色を決めることができ、デザイン制作で覚えておきたいツールが揃っています。

 

essential-color-tool-for-ux-designer-featured-image
配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にあります

 

 

配色デザインに迷わない!すごい無料カラーツール19個まとめ

 

Color Supply

補色や類似色、3色配色などウェブやグラフィックに活用できる効果的な配色を作成できるツール。グラデーションやアイコンイラストなどで色の確認ができる点もポイント。

color-supply

 

 

 

Random Material Palette

ページをクリックするだけで、デザイン制作に活用できる素敵な配色カラーパレットを、マテリアルデザインの中から自動で提案してくれるサービス。

randam-material-palette-generator

 

 

 

Grabient

ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在22種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。

grabient

 

screencapture-grabient-1501027289900-1
2017年のグラフィックやウェッブデザインを見ていると、発色の良い鮮やかなグラデーションカラーの利用されている機会が多く、今年の人気トレンドのひとつと言えます。

 

 

WebGradients

んなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペ可能。

webgradients

 

webgradients1
最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる

 

 

CoolHue

デザイナーの手作業でひとつずつキュレートされた、美しく幻想的なグラデーションカラーのまとめており、CSS3コードの他にPNGファイルも無料ダウンロードできます。

coolhue

 

 

 

ColorMind

ボタンをクリックするだけで、人工知能を利用して素敵な配色カラーパレットを自動生成できるツール。写真や映画、人気のアート作品をモチーフにした配色カラーパレット。

colormind

 

 

 

Ambiance

美しい配色カラーパレットを自動生成で表示してくれるので、直感的な色選びが可能なウェブサービスのひとつ。

ambiance

 

 

 

ColourCo

マウスカーソルを動かすだけで色を指定でき、さまざまな配色を選択できるだけでなく、SCSSやLESS、PNGファイルでダウンロードも可能です。

colourco

 

 

 

Cohensive Colors

統一感のある配色カラーパレットをボタンクリックのみで生成できるツール。色数を増減させたり、特定色をオーバーレイで重ねるなどシンプルで、効果的なツール。

cohensive-colors

 

 

 

PhotoCopa

画像イメージをアップロードすると、使われている色を自動で分析し、配色カラーパレットを生成してくれるWebサービス。

photocopa

 

 

 

Material Mixer

Googleのマテリアルデザイン配色をベースに、UIデザインなどで使いやすい類似色の提案を自動で行ってくれるツール。

material-mixer

 

 

 

Colorable

配色によるコントラスト具合を確認できるツールで、文字テキストを使った実践的な配色を決める最終チェックとしてどうぞ。

colorable

 

 

 

Palettr

入力したキーワードに合わせて、画像イメージより抽出された配色カラーパレットを提案してくれるWebサービス。コンセプトがはっきりと決まっているときに便利。

palettr

 

 

 

Color Library

通常の印刷に使われるCMYKでは表現できない色「スポットカラー」を選択し、色を確認できるカラープロファイル用のデータベース。

color-library

 

 

 

Canva Colors

ウェブサイトやグラフィックデザインに活用したい配色100種類以上を揃え、各色の詳しい意味合いを調べることができ、モノトーンや類似色、補色などの配色カラーパレットをまとめて確認できるオンライン配色カラー見本帳です。

canav-colors

 

canva-color-wiki
デザインで特に重要な配色は、誰もが一度は悩んだことがあるでしょう。 今回ご紹介する Canva Colors を利用すれば、色の意味合いだけでなく、一

 

 

配色パターン見本40選

「万人受けする配色」「親近感を感じさせる配色」などカテゴリー別に、アプリデザイン制作に役立つ素敵な配色カラーパレットがまとめられています。日本語サービスということで、使いやすさも◎。

saruswaka-color-tool

 

 

 

Palettable

何百万人のデザイナーの配色知識を詰めこんだツールで、組み合わせも考えられた色を、好きか嫌いを選ぶだけで直感的に探し出します。

palettable

 

 

 

Hello Color

スペースキーをクリックして、2色の組み合わせを決めるだけで、一緒に活用できる類似色や補色を表示してくれるお手軽配色ツール。

hellocolor1 hellocolor2

 

 

 

Material UI Colors

Googleデザインガイド「マテリアル・デザイン」の配色をまとめて確認できるオンラインカラーパレット。主要カラーとアクセントカラーが一度に表示されるので、デザイン制作もスムーズです。

Material UI Colors

 

 

 

Brand Colors

海外の大企業やスタートアップで使用されている、ブランディングカラーをアルファベット順にまとめたサイト。気に入ったカラーリングはASE、SCSS、LESS、CSSスタイルでダウンロードすることができます。

brand-color

 

 

 

Coolors

キーボードのスペースキーを押すたびに、スタリッシュな5色のカラーパレットを自動作成してくれるお手軽ツール。生成された配色は、個別で調整することも可能です。

Coolors

 

 

 

Paletton

デザインの目的に合った配色を行うための設計を手助けするカラースキームを、悩まずにマウス操作のみで決めることができます。実際にツールを利用した、具体的で手軽な配色の選び方も参考にどうぞ。

Paletton

 

 

 

Color Lisa

世界の偉大な画家が描いた作品をモチーフに、配色カラーパレットをまとめたサイト。ピカソやダビンチ、エッシャー、モネなど日本でもよく知られているアーティストの作品も多数収録されています。

color-lisa

 

 

 

LOL Colors

現役デザイナーがウェブサイト制作の参考に集めている、美しい配色カラーパレットギャラリー。クリックでHEX値をコピーすることができ便利。

lolcolors

 

 

 

Colorhunt

ユーザーが自由に配色カラーパレットを投稿できるサイトで、人気順やランダムに美しい配色を選ぶことができます。

colorhunt

 

 

 

Colorion

2000種類以上の配色カラーパレットを集めたモンスターサイトで、ワンクリックで色をコピーをできたり、人気順に並べたりと作業が快適になる機能ばかりです。

colorion

 

 

 

Adobe Color CC

iPhoneやiPadで撮影した写真をもとに配色カラーパレットを作成したり、他のAdobeサービスと同期して利用できるアプリツール。

Adobe-Color-CC

 

 

 

Coleure

水平方向に並べられたカラーパレットを選択すると、白&黒抜きテキストと白黒テキストを合わせて確認でき、異なるカラーパレットと色比較することも可能です。

Coleure

 

 

 

ColorHexa

お好みの色を入力すると細かい色の説明や情報に加え、RBGやCMYK、HSL、HSV などさまざまな値に変換してくれます。

Color-Hex

 

 

 

Hues

世界的な大企業やスタートアップのブランドロゴカラーを集めた配色パレット。暖色系や自然系などカテゴリー毎に表示できる点もポイントです。

Hues-Les-Teintes

 

 

 

Bada55

アルファベットと数字を使って表示されるユニークな英単語(英: leet)の配色カラーパレットを集めているサイト。ちなみにサイト名Bada55は、「Badass(たちの悪い、かっこいい)」を意味しています。

BADA55-io

 

 

 

Pictaculous

イメージ写真をアップロードすると使われている色の配色マルチカラーパレットを瞬時で作成してくれます。

Pictaculous

 

 

 

Color Palette Generator

イメージ写真をアップロードするとそれに合った配色マルチカラーパレットを作成、提案してくれます。クライアントやブランドイメージが決まっているときに便利なアイテム。

Color-Palette-Generator

 

 

 

Impalette

画像ファイルを読み込むだけで、使われている配色カラーパレットを自動生成してくれるWebサービスで、明るさと彩度を調整することで、目に優しい配色にカスタマイズできます。

impalette

 

 

 

Palette for Google Chrome

インストールしておくことでページに表示しているイメージ写真の配色カラーパレットを作成してくれる、Google Chrome拡張機能ツール。

Palette-for-Google-Chrome

 

 

 

Nippon Color

日本独自に伝わる伝統の色をデザイン制作に活用したいときは、こちらのサイトがオススメ。見やすいカラーチャートに、美しいアニメーションが素敵なツール。

japan-color
f

 

 

配色アイデアに困ったら使いたい、無料オンラインツールまとめ

2014年紹介したエントリーで、フラットデザインのカラーリングに困ったときに役立つツールなどが揃っています。

bestcolor_top

 

 

参照元リンク : Best Color Tools and Articles for Designers – CSSAuthor