【CSS】複合的な配色の画像から、AIにメインカラー、アクセントカラーを聞いてみた

はじめに

現在スクールの卒業制作PFをしています。
この記事に書いている通り、今回アプリの背景に画像（background-image）を設定しました。
その画像が複数の色が混在しており、メインカラー、アクセントカラーを決めるのにchatGPT-4o miniを使用しました。
ChatGPTを今回のような使い方をしたことがなかったので、記事として投稿してみました。
参考になりましたら幸いです。

メインカラー、アクセントカラー、ベースカラーとは？

配色の基本テクニックとして知られているものです。
多くの色を使えば使うほど、全体の統一感を保つ難易度が高くなってしまいます。こちらの記事にもある通りベースカラー70%、メインカラー25%、アクセントカラー5%程度で決めると統一感があるデザインに仕上がります。

ベースカラーが単色であればメインカラー、アクセントカラーを決めるのにあまり苦労はしないかと思いますが、
今回ベースカラーが複合的な配色の画像のためChatGPTに聞いてみた次第です。
（ブラウザ上でも検索してみましたが、複合的な配色画像からメインカラー、アクセントカラーを決めるサイトを見つけられずChatGPTに確認をとりました。）

背景に画像（background-image）に使われている色を確認する

今回使用した背景画像は、淡い青や白、紺、グレーなどを基調とした数種類の色が重なり合っている画像です。
ChatGPTに聞くため、背景画像に具体的にどんな色が使用されているのかを確認すべく画像から色を取得するツールを使用しました。
該当の画像をアップロードした後、画像をクリックするとカラーコード・RGBを最大5色まで教えてくれます。
今回の背景画像が複合的な配色のため、できるだけ色が被らないようカラーの確認を行いました。

色を取得した後にchatGPT-4o miniに投げてみる

今回わたしがchatGPT-4o miniに下記のように問いかけました。

カラーコード #B8D8E5 / RGB rgb(184,216,229)
カラーコード #ADC4D6 / RGB rgb(173,196,214)
カラーコード #ACB4C7 /RGB rgb(172,180,199)
カラーコード #C3C3CF / RGB rgb(195,195,207)
カラーコード #F1F3F0 / RGB rgb(241,243,240)
現在上記の色をメインに数種類が複合的に混ざっている色を背景画像として採用しています。背景画像がベースカラーになるかと思いますが、メインカラー、アクセントカラーはどんな色を持ってくればいいですか？

この質問をしたときはきちんと答えが返ってくるか少し心配でしたが、私個人的には予想以上の回答が返ってきました。

chatGPT-4o miniからの回答

上き問いに対し、chatGPT-4o miniからは下記内容が返ってきました。

---

現在使用している背景カラーの組み合わせを考慮して、メインカラーとアクセントカラーを選ぶ際のアプローチを説明します。背景の色合いが柔らかく、クールなトーンであるため、それに調和しつつ引き立たせるカラーを選ぶと良いでしょう。

背景カラー

背景色の選択肢を整理すると、以下のようになります：

1. #B8D8E5 (柔らかい青)
2. #ADC4D6 (淡い青)
3. #ACB4C7 (やや青みがかったグレー)
4. #C3C3CF (中間的なグレー)
5. #F1F3F0 (淡いグレー)

メインカラーとアクセントカラーの選び方

1. メインカラー
メインカラーは、背景色と調和し、全体のデザインに一貫性を持たせるために選びます。以下のような色を考慮してみてください：

• ダークブルー: 背景の淡い青に対して強調をつけるために、深い青やネイビーブルーを選ぶと良いでしょう。例：#003366 (ダークブルー) や #00274D (ネイビー)。
• チャコールグレー: 淡い背景色に対して落ち着いた印象を与えることができるチャコールグレーも良い選択です。例：#4A4A4A (チャコールグレー) や #333333 (ダークグレー)。

2. アクセントカラー
アクセントカラーは、デザインに動きを加え、目を引くために使用します。以下のような色を考えてみてください：

• コーラルオレンジ: 背景色と対照的な暖かいトーンで、活気を加えることができます。例：#FF6F61 (コーラルオレンジ)。
• ミントグリーン: 青系の背景に対してフレッシュな印象を与えるために、淡いグリーンもおすすめです。例：#98FF98 (ミントグリーン)。
• ゴールド: 豪華で目を引くアクセントカラーとして、ゴールドも良い選択です。例：#FFD700 (ゴールド)。

例

1. メインカラー: #003366 (ダークブルー)
2. アクセントカラー: #FF6F61 (コーラルオレンジ)

背景が青系で柔らかい色調なので、ダークブルーで強調し、コーラルオレンジで活気を加えるデザインが考えられます。

---

こんなにちゃんと返ってくると思わず、びっくりしました...。
メインカラー、アクセントカラーともに複数提示し、またその色の理由も回答してくれています。

最後に

今回、複合的な配色の画像から、AIにメインカラー、アクセントカラーを聞いてみたという内容で記事を書いてみました。
私自身はデザインに関して学習途中のため、このAIの回答が正しいのか判断しかねますが、実際にメインカラー、アクセントカラーを使用してみて現在は違和感なくUIを調整できております。

最近は就職活動の添削、アプリ開発のPF内容の相談などで使用してきましたが、配色の提案もわかりやすく行ってくれることを知ることができ良かったです。
最後までご覧いただき、ありがとうございました。