Adobe Colorの使い方　無料でカラーパレットを作成・画像から色を抽出

Adobe Colorは、カラーホイールや写真からカラーパレットを作成できる無料の配色ツールです。

使いたい色を一つ決めると、色相環の関係に沿った色の組み合わせを作れます。

色覚や文字のコントラストも確認でき、作成した配色はIllustratorやPhotoshopなどのアプリ内からも利用できます。

Adobe Colorとは？無料で使える配色ツール

Adobe Colorはブラウザで使える配色ツールです。

ソフトをインストールせず、ブラウザ上でカラーパレットの作成や画像からの色抽出を行えます。

Adobe Colorでは目的に応じて、次の機能を使い分けます。

機能	向いている場面
カラーホイール	使いたい色やブランドカラーが決まっている
カラーテーマの探索	配色の方向性が決まっていない
画像からテーマを抽出	写真の雰囲気に合う色を使いたい
画像からグラデーションを抽出	写真に含まれる色で背景を作りたい
アクセシビリティツール	色覚や文字の読みやすさを確認したい

Adobe Colorは無料で利用できる

Adobe Colorは無料で使うことができます。

会員登録も不要ですが、ライブラリへ保存するときはAdobeアカウントでログインする必要があります。

Adobe Colorの使い方

Adobe Colorはカラーホイールで色相環から配色パターンを作る方法、ベースカラーから作る方法、既存のテーマから探す方法、画像から抽出する方法などさまざまな方法で配色を作成できます。

カラーホイールでカラーパレットを作成する

カラーホイールでは、次の流れで5色のカラーパレットを作成します。

配色パターンごとの違いは後述します。

メインカラーから配色を作成する

使いたいメインカラーが決まっている場合は「 メインカラー」を選びHEXコードを入力します。

カラーホイール上のポイントをドラッグして、色相や彩度を調整してもかまいません。

メインカラーを選んだ状態で右上の「ランダムに生成」をクリックするとメインカラーに合わせた配色を無限に作成することができます。

画像からカラーパレットを抽出する

写真やイラストをアップロードすると、画像に含まれる色からカラーパレットを作成できます。

写真を中心にデザインを作る場合は、写真内の色を使うと全体をまとめやすくなりますよ。

自動で選ばれた色が合わない場合は、画像上のポイントを好きな場所へドラッグして移動することができます。

カラーテーマを保存・ダウンロードする

作成した色はカラーコードをコピーして使用することもできますが、「ライブラリに保存」でAdobe Libraryに保存しておくとPhotoshopやIllustratorなどのAdobeソフト内で使用することができるようになります。

保存したテーマはCreative Cloudへ同期され、対応するAdobeアプリの「ライブラリ」パネルから開けます。

隣りにあるダウンロードボタンをクリックするとjpg画像として作成した色リストをダウンロードすることができます。

既存のカラーテーマを検索する

配色の方向性が決まっていない場合は、テーマ検索ページから既存のカラーテーマを探せます。

タイトルやタグのほか、色やHEXコードでも検索できます。気に入ったテーマはライブラリへ保存できます。

画像からグラデーションを抽出する

「カラーグラデーションを編集」では、画像に含まれる色から滑らかにつながるグラデーションを作成できます。

必要に応じて画像上のポイントで使用色を選び、停止点の位置を動かして色の切り替わり方を調整します。

背景に使う場合などは5色では主張が強すぎることがあるので、右側のパレット内のゴミ箱アイコンを押して色数を調整してください。

カラーホイールで配色ルールを選ぶ

カラーホイールでは、色相環上の位置関係をもとに調和しやすい色を選ぶことができます。

次の9種類を使い分けながら、目的に合うカラーパレットを作成します。

フリー配色

フリー配色は、色相環上の規則に固定せず、それぞれの色を自由に選ぶ方法です。

使用する色が決まっている場合や、ブランドガイドラインに合わせる場合に向いています。

自由度が高いため、色同士の区別や文字の読みやすさは最後に確認してください。

類似色配色

類似色配色は、色相環上で隣り合う色を組み合わせる方法です。青、青緑、緑のような色が該当します。

明度や彩度ではなく、色相環上の位置が近い色を指します。複数色でもまとまりやすく、落ち着いた印象に向いています。

補色

補色配色は、色相環の反対側にある色を組み合わせる方法です。

青とオレンジ、赤と緑のように色の差が大きく、互いの鮮やかさが強調されます。

一方をメインカラー、もう一方をアクセントにすると、強いコントラストを扱いやすくなります。

分割補色

分割補色配色は、補色そのものではなく、その左右にある2色を使う方法です。

トライアド配色

トライアド配色は、色相環を3等分した位置にある3色を組み合わせる方法です。ポイントは正三角形に近い形で配置されます。

カラフルで印象に残りやすい反面、3色を同じ強さで使うと騒がしくなります。メインカラーを一つ決めると扱いやすくなりますよ。

正方形（スクエア）

正方形配色は、色相環を4等分した位置から色を選ぶ方法です。

テトラード配色やスクエア配色とも呼ばれ、2組の補色を含みます。

明るくカラフルな印象に向きますが、中心となる色を一つ決めるとまとめやすくなります。

コンパウンド（複合色）

コンパウンド配色は、ベースカラーに近い色と、色相環の反対側にある色を組み合わせる方法です。

類似色のまとまりと補色のコントラストを、両方取り入れられます。

複数の色を使いながらも、補色だけより落ち着いた印象に仕上げやすい配色です。

シェード配色

シェード配色は、一つの色へ黒を加えながら明るさを変えていく方法です。

同じ色相の濃淡で構成されるため、統一感のある深い色合いを作れます。

モノクロマティック

モノクロマティック配色は、一つの色相を基準に明度や彩度を変えて作る方法です。

同じ色を中心に構成するため、全体へ統一感を出しやすくなります。

ブランドカラーを崩さず、色のバリエーションを増やしたい場合にも向いています。

アクセシビリティツールで配色を確認する

Adobe Colorでは、色覚による見え方の違いと、文字と背景のコントラストを確認できます。

色覚シミュレーターでD型・P型・T型の色の見分けにくさを確認する

色覚には個人差があり、人によっては違いがまったくわからない色の組み合わせがあります。グラフの系列、地図、ボタンの状態などを色だけで区別しているデザインでは特に注意が必要です。

Adobe Colorの色覚シミュレーターでは作成した配色がD型・P型・T型の色覚でどの程度区別しやすいか一覧で確認することができます。

三角形の不一致アイコンが表示された色は、その色覚タイプではパレット内の別の色と区別しにくくなる可能性がある色です。

使用予定の色がどうしてもエラーになってしまう場合は、「赤＝エラー、緑＝正常」のように色だけで意味を伝えるのではなく、文字、アイコン、線種など色覚に頼らない判別手段も組み合わせましょう。

この「不一致」は、パレット内の色同士を見分けられるかを確認する判定です。文字色と背景色の読みやすさは次のコントラストチェッカーで行いましょう。

コントラストチェッカーで文字の見やすさを確認する

文字色と背景色を指定すると、コントラスト比とWCAGの判定が表示されます。

失敗になった場合は、文字色と背景色の明度差を広げてください。

AAを満たす目安は、通常サイズの文字で4.5：1以上、大きな文字で3：1以上です。

文字の種類	AAの目安
通常サイズの文字	4.5：1以上
大きな文字	3：1以上

「コントラストに関する提案」や「コントラスト比を設定」のタブに切り替えることで、適切なコントラストに合わせた色を自動で提案してくれます。

細い書体や小さすぎる文字はコントラストが弱いと読めなくなることがあるため、「小さな文字」の判定は大きな文字よりコントラストを強くする必要があります。

最終的には色だけでなく実際に使うフォント、文字サイズ、太さでも見え方を確認しましょう。

Adobe Colorの配色をIllustrator・Photoshopで使う

ライブラリへ保存したカラーテーマは、IllustratorやPhotoshopへ自動的に同期されます。

以前の「Adobe Colorテーマ」パネルはサポートを終了しています。

現在はAdobe ColorのWeb版でテーマを作り、各アプリの「ライブラリ」パネルから使用します。

IllustratorでAdobe Colorを使う方法

PhotoshopでAdobe Colorを使う方法

ライブラリを使わない場合は、ASEファイルを各アプリの「スウォッチ」パネルから読み込めます。

Adobe Colorのよくある質問

Adobe Colorで作成した配色は商用利用できますか？

Adobe Colorで作成したカラーは、Webサイト、広告、印刷物などの商用デザインへ使用できます。

Adobe StockやBehanceの画像を使う場合は、配色とは別に各画像の利用条件が適用されます。

Adobe Colorは生成AIを使っていますか？

カラーホイールによる配色作成は、生成AIを使用していません。

色相環上の関係をもとに、選択した配色ルールへ沿った色を組み合わせます。

スマートフォンやタブレットでも使えますか？

Adobe Colorは、スマートフォンやタブレットのブラウザからも利用できます。

細かな色調整や複数の色を比較する場合は、画面の広いパソコンのほうが操作しやすいです。

作成したカラーテーマを共有できますか？

公開テーマは、Adobe ColorのテーマURLで共有できます。

非公開のテーマは、Creative Cloudライブラリへ共同編集者を招待して共有します。

Adobe Colorの配色を印刷物にも使えますか？

配色自体は印刷物にも使えますが、画面上の色と印刷結果は同じになりません。

印刷用データではCMYKへ変換し、使用する用紙や印刷条件に合わせて色を確認してください。

配色が決まらないときは、使いたい色か参考画像を一つ選び、カラーパレットを作ってみてください。

作成後に色覚とコントラストを確認することもでき、Creative Cloudライブラリへ保存してAdobeソフトで使うこともできてとても便利ですよ。