COLOR HARMONY
Color Harmony — 配色ハーモニー生成ツール
基準色をひとつ決めるだけで、補色・類似色・トライアドなど9パターンの配色を自動生成。白文字・黒文字とのコントラスト比(WCAGの目安)もその場で確認できます。色の計算はすべてブラウザ内で行われ、外部サーバーへは送信されません。
🔒 このツールはブラウザ内で動作します。画像やPromptはサーバーに送信されません。
最終更新:
1. 基準色をえらぶ
タップした色が基準色になります:
文字コントラストの目安(WCAG)
目安: 通常の文字 AA 4.5 / AAA 7、大きい文字 AA 3 / AAA 4.5。あくまで参考値としてどうぞ。
2. 配色パターン
チップをタップするとHEXコードをコピーできます。
HOW TO
使い方
- 基準色を決めます。HEX入力・カラーピッカー・画像からの抽出、どれでもOK(3つは連動します)。
- 補色・類似色・トライアドなど9パターンの配色が自動で並びます。チップをタップでHEXコピー。
- 白文字・黒文字とのコントラスト比で、文字の読みやすさの目安を確認できます。
- 気に入った配色は HEX一覧・CSS変数・JSON・パレット画像 の好きな形式で持ち帰れます。
FAQ
よくある質問
補色やトライアドとは何ですか?
色相環(色を輪に並べたもの)の上での色の組み合わせ方です。補色は正反対(180度)、類似色はとなり(±30度)、トライアドは正三角形(±120度)の位置関係で、それぞれ雰囲気の違う調和が得られます。
コントラスト比はどう見ればいいですか?
背景色と文字色の明るさの差を表す数値で、大きいほど文字が読みやすくなります。WCAGでは通常の文字で4.5以上(AA)、7以上(AAA)が目安とされています。あくまで目安なので、実際の見え方もあわせて確認してください。
画像から基準色を拾えますか?
はい。画像をドロップすると主要8色を抽出するので、タップした色がそのまま基準色になります。画像全体のくわしい色分析は Color Palette Extractor をどうぞ。
生成した配色はどこかに送信されますか?
いいえ。色の計算・画像の色抽出・パレット画像の作成まで、すべてブラウザ内で完結します。外部サーバーへの送信は一切ありません。
AI IMAGE TOOLKIT
ほかのツール
MORE