「配色えらびのベストな方法が知りたい」
「イメージにあった色をもっと手軽に選びたい」
「色がなかなか決まらない」
「配色えらびにAIを活用してみたい」
この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。
２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。
リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。
配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。
- 普段使いできる便利ツール（17個）
- ワンクリック、人工知能系ツール（20個）
- マテリアルデザイン系ツール（4個）
- Webデザイン・UIデザイン関連ツール（21個）
- 写真から抽出系ツール（2個）
- インスピレーション系ツール（14個）
- グラデーション関連ツール（29個）
- 配色カラーパターン関連リソースまとめ（5個）
普段使いできる便利ツール
色に困ったときにまず参考にしている、普段使いにもぴったりな便利ツールをセレクト。
配色パターンをPhotoshopと同期できるツールや、ウェブデザインだけでなくDTP紙デザインにも利用できるもの。さらには、写真から自由自在に色を抽出できるもの。
日本伝統の和柄を集めたサイトなど、あらゆるニーズにも応えてくれます。
カラーホイールを利用した配色えらび、画像からグラデーションを抽出し、カラーグラデーションとして保存できるなど、色に困ったときはまずはここ。
写真から配色カラーパレットを作成したり、PhotoshopやIllustratorなど、Adobe CCツールとの配色の同期もでき便利。
美しい配色カラーパレット、グラデーションを作成したり、カラーホイールによる配色選び、配色コントラストチェック、トーンツールなどの機能がずらりと揃い、あらゆるプロジェクトに最適な配色を手軽に見つけることができます。
Pigment（顔料）とLighting（光量）を調整して、使いやすいナチュラルな配色カラーパターンを探すことができるオンラインツール。右上の検索ボックスより写真をベースに配色を探すこともでき、DPT紙デザインでも重宝します。
290+ Branding Color Palette Examples (Hand-Curated)
ロゴデザインなど、ブランディングに向いている配色290パターン以上を、現役デザイナーが一つずつ手動で集めたカラーライブラリ。
とにかく大量のカラースキームを公開しているウェブサイトで、その数は軽く1万種類以上。配色の編集やダウンロードもでき、細かいソート機能が多すぎる配色パターンからお好みの組み合わせを見つけやすくしてくれます。
「Brightness」で色の明るさを決め、右側のカラーホイールで色をクリックすると、選択した色に合うものだけが残っていくので、お好みの色で自由なカラーパレットを作成できます。ページ下より選択した色のHEX値をまとめて確認できます。
ワンクリック、人工知能系ツール
ここでは人工知能、AIをつかった自動配色サービスや、クリックのみで難しいこと不要のお手軽ツール、膨大な美しい配色カラーパレットをコレクションしているサイトなどをピックアップ。
「色のアイデアが全く浮かばない」そんなときにも役立つツールを揃えています。
用意された12色の中からお好きな色を2色選ぶだけで、関連するカラーパレットを1万以上も提案してくれるオンラインカラーアプリ。気に入ったカラーパレットは、SVGやSASS、CSSで無料ダウンロードできます。
美しい4色のカラーパレットを集めたサイトで、ダークモードを適用することで背景を変更したり、ソートやフィルタリングなどの機能が豊富なツールです。表示されたカラーコードをクリックでさくさくコピーできます。
マテリアルデザイン系ツール
Googleのマテリアルデザインで採用されている配色をつかったツールをまとめています。
ランダムに色を提案してくれたり、UIデザインなどで使いやすい類似色の提案なども行ってくれ、HEX値をコピー＆ペースト可能。
Color Tool from Material Design
Googleが公式にリリーしている、UIデザイン向けのカラーツーで、配色パレットの作成や共有から、文字の可読性を保つ、アクセシビリティチェックもできます。
Googleデザインガイド「マテリアル・デザイン」の配色をまとめて確認できるオンラインカラーパレット。主要カラーとアクセントカラーが一度に表示されるので、デザイン制作もスムーズです。
Webデザイン・UIデザイン関連ツール
Webデザイン制作で利用する機会の多いツールを中心にセレクトしています。
色をCSSやSassファイルとして利用できる機能やコントラスト確認ツール、HEX値をRBGやCMYKに変換してくれるものなど、より使いやすさにこだわる配色を実現できます。
Accessible Color Palette Generator
WCAG（Web Content Accessibility Guidelines）に準拠した、配色を手軽に作成できるブラウザアプリ。
使いやすさや読みやすさなどのアクセシビリティに配慮した、魅力的な配色カラーツール。ソースコードはGitHubで公開されており、MITライセンスでだれでも自由に利用できるオープンソース。
色覚異常のひとでも、テキストと背景の適切なコントラストを認識できる、WCAGコントラストに沿った配色カラーパレットを自動生成してくれるツール。
お好みの色を選択すれば、純色に白を混ぜた色「ティント（英: Tint）」と純色に黒を混ぜた色「シェード（英: Shade）」を段階的に生成できるツール。
メインカラーを一色選ぶだけでセカンダリーカラーやアクセントカラーなど、モバイルアプリUIデザイン向け配色を提案してくれるツール。色の組み合わせやトーン、色合い調整など色にまつわるツールがぎっしり。
写真から抽出系ツール
お好みの画像をアップロードすることで、使われている色を自動で分析し、美しい配色カラーパレットを生成してくれるサービスをまとめています。
デザインの雰囲気やコンセプトが決まっているときに便利です。
イメージ写真をアップロードするとそれに合った配色マルチカラーパレットを作成、提案してくれます。クライアントやブランドイメージが決まっているときに便利なアイテム。
インスピレーション系ツール
ページをスクロールするだけでアイデアが湧いてきそうな、インスピレーション系配色ツールを集めています。
歴史にまつわる配色や海外の大企業、スタートアップで使用されているブランドカラーを集めたもの、NBAやMLBなどのチームカラーを一覧にしたリスト、面白い名前の色などどれもユニークなものばかりです。
一度は見たことのある有名絵画やポスター、クレオパトラの棺など歴史的な美術品で使われていた色を集め、年代ごとにタイムラインで確認できるプロジェクト。収録されている色数はあまり多くありませんが、「ロマンを感じる」サイトとなっています。
世界の偉大な画家が描いた作品をモチーフに、配色カラーパレットをまとめたサイト。ピカソやダビンチ、エッシャー、モネなど日本でもよく知られているアーティストの作品も多数収録されています。
作品ごとに使われている、美しい配色カラーパレットを調べてみました。
千と千尋の神隠しにはじまり、となりのトトロや魔女の宅急便、思い出のマーニーなど15作品をピックアップ。
クリエイティブな分野で活躍する人に向けた、配色のデザインツールとデータベース。さまざまな色の組み合わせが紹介されていますが、どれもオシャレな色合いばかりなので、配色に迷ったときにもオススメ。
海外の大企業やスタートアップで使用されている、ブランディングカラーをアルファベット順にまとめたサイト。気に入ったカラーリングはASE、SCSS、LESS、CSSスタイルでダウンロードすることができます。
モバイルアプリやウェブツールなど、最新のテクノロジー関連プロダクトの情報やユーザーの口コミなどをチェックできる、Product Hunt に登場したアイテムの配色カラーパレットを集めています。
「万人受けする配色」「親近感を感じさせる配色」などカテゴリー別に、アプリデザイン制作に役立つ素敵な配色カラーパレットがまとめられています。日本語サービスということで、使いやすさも◎。
ウェブサイトやグラフィックデザインに活用したい配色100種類以上を揃え、各色の詳しい意味合いを調べることができる Canva Colors。モノトーンや類似色、補色などの配色カラーパレットをまとめて確認できるオンライン配色カラー見本帳です。
グラデーション関連ツール
美しい色の組み合わせを楽しむことができる、グラデーションの配色パターンツールをまとめています。デザイントレンドとしてウェブデザインだけでなく、グラフィックデザインやパッケージデザインなどにも広く活用されている配色です。
グラデーションの人気の秘密や実用的な使い方を知ることで、より魅力的なデザインを表現できます。
複雑なCSSカラーグラデーションを作成できるオンラインツール。あらかじめ用意されたプリセットの他、ミッドポイントを活用したより美しいグラデーションを表現でき、作成したコードもそのままコピペで利用可能。
Gradients Mass Driver Workshop
２つのお好みの色を決め、抽出サンプルポイント数を指定することで、よりなめらかなCSSカラーグラデーションを作成、コードを自動生成してくれます。
CSSのみで表現できる美しいBlobデザインを作成、カスタマイズできるオンラインツール。20色以上のスキンカラーも用意されており、作成したCSSコードをコピペでそのまま利用可能。
Animated Gradient Background Generator
アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整できます。アイデアが浮かばないときは、「Random」ボタンをクリック。
どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけでCSS3コードをコピペ可能。カラーサンプル、まとめてます。
ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在22種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。実際にツールをつかってみた感想も
ひとつの色を決めるだけで素敵な配色カラーパレットを自動生成してくれるオンラインツール。3色をつかったグラデーションも作成でき、CSSコードもそのままコピペできる便利な機能ばかり。
2つ以上の色をなめらかにブレンドしたCSSグラデーションを作成できる新しいツール。これまでのツールとの違いは、線形や放射状グラデーションの他に、特定のポイントカラー放射状に色が広がるなどユニークな効果も可能。
選択した2色を直感的に混ぜてグラデーションを作成できる配色ツール。ナビメニューより「Get CSS for this Gradient」でCSSソースコードをコピーできます。また、配色のアイデアが欲しいときは「Gradient Gallery」をクリックすれば、美しいグラデーションをまとめて閲覧、編集することもできます。
お好みの色を2色選び、スライダーを左右に「0〜40」まで動かすことで、段階的なグラデーションを自動生成できるツール。
他のグラデーションとは一線を画す、ユニークなCSSグラデーションを集めたサイト。ストライプ柄やチェック柄、サンバースト柄などあまり見かけないものばかり。クリック一発でCSSコピペできます。
軽量でカラフル、レスポンシブにも対応したグラデーションカラーをコレクションしたサイトで、他では見かけないアート性の強い作品が中心に揃います。個人及び商用利用で利用できます。
美しく色が変化するアニメーション付きCSSグラデーションをその場で作成し、CSSコードをコピーできるオンラインツール。Spaceキーでランダムに色を変更できます。
ウェブサイトの背景やボタンな、使い勝手の良いグラデーションカラーを揃えたライブラリ。ボタン一発でコピペでき、Auto-Prefixにも対応、RGBとHEX値の切り替えもできます。
放射状や直線グラデーションなどをつかったグラデーションが中心で、人気別やランダム別での表示もできる嬉しい機能も。
グラデーション関連の配色ツールは数も多いので、別の記事でまとめて紹介しています。
配色カラー関連リソースまとめ
当サイトでも配色の参考にできるカラーパレットを集めています。特に写真から抽出したものが多く揃っているので、直感的に色を選びやすいかもしれません。
・ 【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
・ 和の配色アイデア見本帖46選！日本の風景による美しいカラーパレット【保存版】
・ アイデア広がる！秋の配色カラーパレット見本14選 2017年度
・ 配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ
・ Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
