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