ファンサイトに戻る

COLOR HARMONY

Color Harmony — 配色ハーモニー生成ツール

基準色をひとつ決めるだけで、補色・類似色・トライアドなど9パターンの配色を自動生成。白文字・黒文字とのコントラスト比(WCAGの目安)もその場で確認できます。色の計算はすべてブラウザ内で行われ、外部サーバーへは送信されません。

🔒 このツールはブラウザ内で動作します。画像やPromptはサーバーに送信されません。

最終更新:

1. 基準色をえらぶ

画像から色を拾う(ドロップ・タップで選択) 画像はブラウザ内でのみ処理されます

文字コントラストの目安(WCAG)

目安: 通常の文字 AA 4.5 / AAA 7、大きい文字 AA 3 / AAA 4.5。あくまで参考値としてどうぞ。

画像全体の色分析は 🎨 Color Palette Extractor へ →

2. 配色パターン

チップをタップするとHEXコードをコピーできます。

HOW TO

使い方

  1. 基準色を決めます。HEX入力・カラーピッカー・画像からの抽出、どれでもOK(3つは連動します)。
  2. 補色・類似色・トライアドなど9パターンの配色が自動で並びます。チップをタップでHEXコピー。
  3. 白文字・黒文字とのコントラスト比で、文字の読みやすさの目安を確認できます。
  4. 気に入った配色は HEX一覧・CSS変数・JSON・パレット画像 の好きな形式で持ち帰れます。

FAQ

よくある質問

補色やトライアドとは何ですか?

色相環(色を輪に並べたもの)の上での色の組み合わせ方です。補色は正反対(180度)、類似色はとなり(±30度)、トライアドは正三角形(±120度)の位置関係で、それぞれ雰囲気の違う調和が得られます。

コントラスト比はどう見ればいいですか?

背景色と文字色の明るさの差を表す数値で、大きいほど文字が読みやすくなります。WCAGでは通常の文字で4.5以上(AA)、7以上(AAA)が目安とされています。あくまで目安なので、実際の見え方もあわせて確認してください。

画像から基準色を拾えますか?

はい。画像をドロップすると主要8色を抽出するので、タップした色がそのまま基準色になります。画像全体のくわしい色分析は Color Palette Extractor をどうぞ。

生成した配色はどこかに送信されますか?

いいえ。色の計算・画像の色抽出・パレット画像の作成まで、すべてブラウザ内で完結します。外部サーバーへの送信は一切ありません。

AI IMAGE TOOLKIT

ほかのツール

MORE

あわせてどうぞ