カラーハーモニージェネレーター
色相環の幾何を確認
カラーハーモニージェネレーターの全結果は同じ色相環にピンで表示されます。180度、120度、90度、分裂補色の間隔が目で分かるため、なぜその色同士が関係するのかをチームに説明できます。
ブラウザで動くインタラクティブ色相環
カラーハーモニージェネレーターと色相環
カラーハーモニージェネレーターで、1つの基準色から補色、類似色、トライアド、分裂補色、テトラードのパレットを作れます。色相環をドラッグし、HSBを調整し、画面上の役割をプレビューしてから、データをアップロードせずにCSSをコピーしたりラベル付きPNGを保存したりできます。
2026年7月29日更新
カラーハーモニージェネレーター
このカラーハーモニージェネレーターでできること
このカラーハーモニージェネレーターは、基準の色相を360度の色相環に置き、明示した角度差から関連色を計算します。補色は180度、類似色は−40度と＋40度、トライアドは120度間隔、分裂補色は150度と210度、テトラードは90度間隔です。最初の比較で色相だけの構造が分かるよう、カラーハーモニージェネレーターは彩度と明度を維持します。その後、各HEX、CSS変数、PNGを出力したり、最初の前景色と背景色をコントラストチェッカーへ渡したりできます。
カラーハーモニージェネレーター
理由を説明できる配色
カラーハーモニージェネレーターは、無名の色見本を並べるのではなく、ルール、角度、値、想定する役割を一緒に示します。
カラーハーモニージェネレーター
実際の役割でプレビュー
カラーハーモニージェネレーターは、生成色をトゥーン調カードの面、主役色、アクセント、操作色へ割り当てます。これは階層を見る短い試験であり、すべての生成色がそのまま使えるという保証ではありません。
カラーハーモニージェネレーター
制作に渡せる値
1色、カラーハーモニージェネレーターのパレット全体、CSSカスタムプロパティをコピーできます。ラベル付きPNGにはルールと値が残るので、デザインレビュー、ムードボード、実装引き継ぎに使えます。
ブラウザ内で動く色相環とパレット
カラーハーモニージェネレーターを使う
色相環をドラッグするかHEXとHSBを編集すると、カラーハーモニージェネレーターがピン、色見本、役割、書き出しをすぐ更新します。
346°
基準色と150度、210度の対向近接色
生成したハーモニーパレット
基準#E8335D
- RGB
- 232, 51, 93
- HSB
- 346°, 78%, 91%
- ΔH
- +0°
補助#33E863
- RGB
- 51, 232, 99
- HSB
- 136°, 78%, 91%
- ΔH
- +150°
アクセント#33B8E8
- RGB
- 51, 184, 232
- HSB
- 196°, 78%, 91%
- ΔH
- +210°
トゥーン配色の実地テスト
実際の絵や部品へ移す前に、色の階層が明確かを確認します。
:root {
--harmony-1: #E8335D; /* 基準 · 346° */
--harmony-2: #33E863; /* 補助 · 136° */
--harmony-3: #33B8E8; /* アクセント · 196° */
}この2色を測る
この2色を測る最初の色を前景、最後の色を背景として送ります。
カラーハーモニージェネレーター
使えるハーモニーを作る手順
カラーハーモニージェネレーターの結果は、各色に意図した役割を与え、コントラストを測り、実際の文脈で少し調整したときに役立ちます。
カラーハーモニージェネレーター
1. 本当の基準色から始める
圧縮された画面写真を目で推測せず、承認済みのブランド、キャラクター、UIのHEXを入力します。カラーハーモニージェネレーターはその色相を最初のピンとして保ち、残りの色を同じ基準から導きます。
カラーハーモニージェネレーター
2. 雰囲気より先に関係を選ぶ
強い対比は補色、近い連続感は類似色、3つの均衡した色群はトライアド、抑えた緊張感は分裂補色、広い体系はテトラードを試します。カラーハーモニージェネレーターは比較中も正確なルールを表示します。
カラーハーモニージェネレーター
3. 役割を決めてから値を調整
1色を主役にし、ほかを補助、アクセント、対比役にします。カラーハーモニージェネレーターで構造を選んだ後、すべてを同じ強さにせず、彩度と明度を変えて視覚的な階層を作ります。
カラーハーモニージェネレーター
4. 実装した組み合わせを測る
カラーハーモニージェネレーターから文字と背景に使う候補をコントラストチェッカーへ送ります。色相環の角度差だけでは読みやすさや意味の伝達は決まらないため、通常、ホバー、フォーカス、選択、無効状態を確認します。
カラーハーモニージェネレーター
5つの色相環ルールを比較
カラーハーモニージェネレーターは固定された再現可能な角度差を使います。表は芸術的な調整をする前の幾何、初期色数、用途、注意点を示します。
| ルール | 色相の角度差 | 向いている出発点 | 注意点 |
|---|---|---|---|
| 補色 | 0°、180° | 主役と操作・警告アクセントの明確な対比 | 同じ彩度では強すぎるため片方を主役にする |
| 類似色 | −40°、0°、+40° | 穏やかな場面、重なる面、関連する細部 | 近い色相には明度差が必要になる |
| トライアド | 0°、120°、240° | 広い色相を持つ3つの役割 | 1色か2色を弱めて主役を明確にする |
| 分裂補色 | 0°、150°、210° | 基準色と直接的すぎない2つの対向アクセント | 2アクセントを大面積にすると競合する |
| テトラード | 0°、90°、180°、270° | 大きなシステム、チーム、グラフ、複数状態のUI | 4色の強度を保つなら明度の整理が必要 |
カラーハーモニージェネレーター
書き出し前の6項目
このカラーハーモニージェネレーターの確認手順で、見栄えのよい色相環の結果を記録可能で試験可能なパレットへ変えます。
- 基準HEXが古い画面写真ではなく、現在の正式な資料から来ているか確認する。
- 彩度や明度を変える前に1つのルールを選び、色相の角度差を記録する。
- 同じ面積で使わず、主役、補助、アクセント、対比役を割り当てる。
- 実際の文字と背景、重要な部品境界をコントラストチェッカーで測る。
- 色だけが重要な意味を伝える場所へ、ラベル、形、模様、位置の手掛かりを追加する。
- カラーハーモニージェネレーターのCSSかPNGを保存し、実際の部品や絵で試す。
カラーハーモニージェネレーター
計算方法、測定値、限界
このカラーハーモニージェネレーターは、再現できる色相環の幾何とアクセシビリティ判断を分けます。明示角を使い、デジタル色相とコントラストはW3C仕様を参照します。
- 補色は基準から正確に180度、トライアドは120度ずつ、テトラードは90度ずつ進みます。これは2026年7月29日に確認したカラーハーモニージェネレーターのアルゴリズムを直接測った値です。
- W3C CSS Color Module Level 4はHSLの色相を角度として定義し、色相環上の正規化を説明します。カラーハーモニージェネレーターもHSB計算に0度から360度の同じ慣例を使います。
- WCAG 2.2の達成基準1.4.3は通常文字に4.5:1、大きな文字に3:1を求めます。色相間隔から適合は判断できないため、カラーハーモニージェネレーターは2色を測るチェッカーへ接続します。
W3Cは通常文字のしきい値を次のように示します。
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
カラーハーモニージェネレーター
次のパレット作業へ進む
カラーハーモニージェネレーター
カラーハーモニージェネレーターの質問
初心者に向くハーモニーはどれですか？
落ち着いた配色なら類似色、明確なアクセントなら補色から始めます。カラーハーモニージェネレーターは基準色を固定するので、切り替えるだけで差を確認できます。どちらでも1色を主役にし、最後の前景色と背景色を測ってください。
このツールはHSLとHSBのどちらを使いますか？
Toon Toneが色相、彩度、明度を使うため、カラーハーモニージェネレーターはHSBを計算し表示します。色相は360度の角度として動きます。ブラウザやデザインツールへ渡せるよう、各HSB結果をHEXにも変換します。
生成した配色はアクセシブルなコントラストを保証しますか？
保証しません。カラーハーモニージェネレーターは色相関係を示しますが、WCAGのコントラストは特定の前景色と背景色の相対輝度で決まります。実際の文字、状態、境界を測り、意味を色だけに依存させないでください。
単色モードがないのはなぜですか？
単色配色は異なる色相を色相環へ配置せず、1つの色相の彩度と明度を変えます。このカラーハーモニージェネレーターは、段階数、トゥーン影、コントラスト、CSS、PNGを扱う専用シェードツールへ案内します。
入力した色はアップロード、保存されますか？
いいえ。カラーハーモニージェネレーターは現在のブラウザタブで角度と色を計算し、コピーとPNGもローカルで処理します。共有URLには基準HEXとモード名が含まれるため、公開してよい値だけを共有してください。