必要なツールを、すぐ使えるように

カラーハーモニージェネレーター

基準色を入れると、色相環の上で決まった角度だけ離れた色を選び、7つの配色をまとめて表示します。色相環の点をドラッグして回したり、彩度・明度のバーで雰囲気を変えたりすると、すべての配色が一緒に変わります。選んだ配色は60・30・10の比率の例の画面に当てはめ、色ごとに白い文字と黒い文字のどちらが読めるかをコントラスト比で確かめてから、HEX・CSS変数・PNGで持ち帰れます。

最終更新 2026-10-20計算はブラウザ内だけで処理

HEX（#E07A5F）・rgb(224 122 95)・hsl(13 68% 63%) の形式で入力できます。色相環の点をドラッグしても基準色が変わります。

最近の基準色
    色相環

    点をドラッグするか、この円を選んで矢印キーで回します（Shiftキーで10°ずつ）

    7つの配色を一覧選ぶとその配色に切り替わります
    60・30・10で当てはめてみる

      比率はこの例での面積です。コントラストはWCAG 2.2の基準で、小数第2位以下を切り捨てて表示します。

      最終更新 2026-10-20入力値は保存しません

      ROBERINの基準必要なツールを、
      すぐ使えるように。
      • ひと目で分かる画面入力と結果の位置をはっきり分けます。
      • 結果が先主要な結果を先に示し、過程は必要なときだけ。
      • 求めない登録や不要な入力なしですぐ使えます。

      基準色1色から7つの配色を作る。色相環で回して、画面に当てはめて確かめる

      配色ジェネレーターは、決めておいた1色を基準に、色相環の上で一定の角度だけ離れた色を選んで配色を作ります。補色・類似色・トライアド・スプリット補色・スクエア・レクタングル・単色の7つを1画面に並べて表示するので、1つずつ切り替えなくても、どの配色がイメージに近いかを見比べられます。

      色を選んだあとに残るのは、その色を実際にどう配分して使うかという問題です。そこで、広い背景に60%、カードに30%、ボタンに10%を割り当てた例の画面もあわせて表示し、各色の上に白い文字と黒い文字のどちらを置けば読めるかを、コントラスト比で示します。

      どんなときに使うか

      • 色が1色すでに決まっているとき: 会社のロゴや学校のチームカラーのように変えられない色があると、残りの色を選ぶのはかえって難しくなります。配色のルールは色相環上の角度で候補を絞ってくれるので、膨大な色の中で迷わずに出発点を決められます。
      • 1か所だけ目立たせたいとき: プレゼン資料の結論の1行や、ポスターの申し込みボタンのように視線を集めたい場所が1つなら、基準色の正反対にある補色や、その両隣のスプリット補色をアクセントカラーにすると使いやすくなります。
      • 区別できる色が複数必要なとき: グラフの系列やスケジュールの分類のように3〜4種類を見分けさせたいときは、色相角が120°や90°ずつ離れたトライアドやスクエアが、色同士の取り違えを減らします。ただし色だけで分けると色覚が異なる人には見分けにくいので、文字や模様もあわせて置きます。
      • 2色がなぜ合うのかを説明したいとき: クライアントやチームに「この2色は色相環で正反対なのでコントラストが強い」のように根拠を話せます。手持ちの色を基準色として入れ、ほかの色がどの角度に来るかを見るだけです。

      使い方

      1. 基準色を入れます。「色を選ぶ」ボックスを選ぶか、テキスト欄にHEX（#E07A5F）、rgb(224 122 95)、hsl(13 68% 63%) のいずれかを入力します。色相環の点をドラッグしても、基準色の色相角が変わります。
      2. 7つの配色を一覧でストライプを見比べ、気に入った配色を選びます。上の見本と色相環の点が、その配色に切り替わります。
      3. 彩度・明度のバーで全体の雰囲気を決めます。2つの値は配色のすべての色に同時に適用されるので、色同士の角度関係はそのままに、パステルのように淡くしたり、暗く落ち着いた感じに変えたりできます。
      4. 60・30・10で当てはめてみるで「メインを変える」を押し、どの色が広い背景を担当するかを選びます。右側のリストで、各色の上に置く文字の色とコントラストを確認します。
      5. 持ち帰ります。見本を選ぶとその色のHEXがコピーされ、下のボタンからHEX一覧・CSS変数・PNG画像・リンクを持ち帰れます。最近使った基準色12色は、このブラウザにだけ保存されます。

      7つの配色と角度

      このツールは、基準色のHSL値から色相角（H）だけをルールどおりに回し、彩度（S）と明度（L）はそのままにします。単色の配色だけは、色相角を固定して明度を20ずつ変えます。下の表は、基準色 #E07A5F（hsl 13° 68% 63%）で実際に作った結果です。

      配色基準から回す角度色数#E07A5F を基準にした結果向いている使い方
      補色180°2#E07A5F#5FC5E0強調を1か所に絞る、コントラスト最大
      類似色−30°、+30°3#E05F85#E07A5F#E0BB5F穏やかにつながる画面、背景グラデーション
      トライアド120°、240°3#E07A5F#5FE07A#7A5FE0区別しやすい3つの分類
      スプリット補色150°、210°3#E07A5F#5FE0BB#5F85E0補色よりぶつかりにくい強調
      スクエア90°、180°、270°4#E07A5F#85E05F#5FC5E0#BB5FE04つの分類、活気のある画面
      レクタングル60°、180°、240°4#E07A5F#C5E05F#5FC5E0#7A5FE0暖色側と寒色側の2グループ
      単色角度はそのまま、明度 −20・+203#B64223#E07A5F#F1C1B41色で作る段階、表の行の色

      単色の配色は、基準の明度が75%を超えるとさらに明るくする余地がないため、暗い側にだけ2段（−40・−20）を作り、25%未満なら明るい側にだけ2段（+20・+40）を作ります。以前の版のように、白や黒の近くで同じ色が2回出ないようにするための取り決めです。

      補色がサイトによって違う理由: 色相環は1種類ではありません

      同じ赤を入れても、ツールによっては水色系を、本によっては緑を補色と呼びます。どちらかが間違いなのではなく、基準にしている色相環が違うのです。米国の国立美術館（NGA）の美術教育資料は、絵の具の3原色を赤・黄・青、テレビやパソコンの画面で使う光の3原色を赤・緑・青として別々に紹介し、絵の具の色相環では赤と緑、黄と紫、青とオレンジを補色の例として挙げています。

      色相環主な使い道赤の正反対
      画面の色相環（RGB・HSL、このツール）モニターやスマートフォンの画面、CSSのhsl()#00FFFF シアン（青緑）
      画家の色相環（RYB）絵の具の混色、美術教育緑
      マンセル色相環（10色相）色を記号で表す表色系（例: 7.5YR）青緑（BG）

      このツールが画面の色相環を使うのは、結果をHEXやCSSとして持ち帰り、画面で使うからです。W3CのCSS Color 4はhsl()の色相角で0°を赤、120°を緑、240°を青と定義しており、このツールの角度もその定義に従っています。マンセル表色系は、赤（R）・黄（Y）・緑（G）・青（B）・紫（P）の5つの主要色相と、その間の YR・GY・BG・PB・RP の5つの中間色相を環状に等間隔に並べるので、この順に円を描くとRの正反対にBGが来ます。絵の具や印刷物に移す色を選ぶなら、画家の色相環の補色とは結果が異なる場合があることを念頭に置いてください。

      日本で広く知られるPCCS（日本色研配色体系）の色相環は、心理4原色（赤・黄・緑・青）の向かい側にそれぞれの心理補色を置いて作られています。

      同じ明度の数値でも、目に見える明るさは違います

      HSLの明度（L）が同じでも、人の目には同じ明るさには見えません。明度50%の黄 #FFFF00 と青 #0000FF に白い文字を置いてWCAGのコントラストを測ると、結果は大きく分かれます。

      色HSL白い文字のコントラスト
      #FFFF00hsl(60 100% 50%)1.0:1
      #0000FFhsl(240 100% 50%)8.5:1

      そのため、色相角だけを回した配色では色ごとに明るさの感じ方が違い、配色の色同士のコントラストが低くなることが多くあります。標準の例であるスプリット補色（#E07A5F・#5FE0BB・#5F85E0）では、色同士のコントラストは1.8:1、1.2:1、2.1:1で、いずれも3:1に届きません。一方、この3色の上に黒い文字を置くと、それぞれ7.1:1、12.8:1、5.9:1となり、読むのに十分です。配色の色同士を文字と背景に重ねるより、背景は配色の色で塗り、文字は白か黒にしておくほうが安全です。

      60・30・10で当てはめてみる

      色をすべて選んでも、同じ広さで塗り分けると画面は落ち着きなく見えがちです。インテリアで広く使われる60・30・10のルールは、最も広い面にメインカラー60%、次にサブカラー30%、小さなポイントにアクセントカラー10%を使うことを勧めています。このツールの例の画面は、背景（メイン）・カード（サブ）・下のバンドのボタン（アクセント）の面積がちょうど60・30・10になるように描いています。

      • 2色の配色は、アクセントのバンドなしで、背景70%・カード30%に分けます。
      • 4色の配色は、カードの下側の小さなバンドを4色目で塗り、60・25・10・5に分けます。
      • 2色・4色の比率はこのツールが決めた取り決めです。60・30・10のルール自体も出発点にすぎず、必ず守るべき数値ではありません。

      「メインを変える」を押すと、同じ色が担当する役割だけが1つずつ回ります。同じ3色でも、どの色が背景を占めるかで画面の印象は大きく変わるので、何度か押して見比べてから決めるとよいでしょう。

      配色の上に文字を置くとき

      右側のリストは、各色の上に白い文字と黒い文字のうちコントラストが大きいほうを選び、WCAG 2.2の基準で判定します。コントラスト比は小数第2位以下を切り捨てた値で表示するので、4.48:1を4.5:1に切り上げて合格にすることはありません。

      • 本文に使える: 4.5:1以上です（1.4.3 コントラスト（最低限））。
      • 大きな文字のみ: 3:1以上4.5:1未満です。大きな見出しには使えますが、本文には足りません。
      • 文字には不足: 3:1未満です。
      • ボタンと背景: ボタンのように操作する要素は、すぐ隣の色と3:1以上ないと形が区別できません（1.4.11 非テキストのコントラスト）。足りなければ枠線や下線を加えます。

      コントラストが十分でも、色だけで意味を分けてはいけません。WCAG 1.4.1は色を情報伝達の唯一の手段にしないよう定めているので、赤はエラー、緑は正常のように分けるときも、文字やアイコンをあわせて置きます。

      よくある間違い

      • 白・黒・グレーを基準にする場合: 無彩色には色相角がないので、どのルールを選んでも同じ色しか出ません。グレーなら彩度のバーを上げ、白・黒なら明度のバーも100%と0%の間に動かしてください。明度だけを変える単色の配色も使えます。
      • 4色を同じ広さで塗り分ける場合: スクエアやレクタングルの配色は色数が多いので、1色をメインに決めて残りを小さく使わないと、視線が留まる場所がなくなります。
      • 補色同士を文字と背景に使う場合: 色相の対比は強くても明るさが近いと文字がにじんで見え、コントラスト比も低くなります。文字は白か黒にしてください。
      • ほかのサイトの補色と違うのでエラーだと思う場合: 画面の色相環と画家の色相環では、正反対の色が異なります。まずどの色相環かを確認してください。
      • 画面用のHEXをそのまま印刷所に渡す場合: 印刷はCMYKインクで色を出すため、画面の鮮やかな色がそのまま出ないことがあります。RGB CMYK変換で印刷の予想色を先に確認しましょう。

      限界と注意

      • 配色のルールが決めるのは、色相角の関係だけです。調和を保証するものではないので、最終的な判断は実際に使う画面で行ってください。
      • 彩度と明度を基準色と同じにしているため、目に見える明るさは色ごとに異なり、色同士のコントラストが低くなることがあります。
      • 単色の配色はHSLの明度だけを変え、彩度はそのままにします。非常に明るい段階や暗い段階では、色が元よりくすんで見えたり濃く見えたりすることがあります。
      • 同じHEXでも、モニターの設定、画面の明るさ、ダークモード、周囲の照明によって見え方が変わります。
      • コントラストの判定は、WCAG 2.2の比率だけを見ています。実際の文字の大きさや太さ、色覚の違いは反映していません。色覚によって配色がどう見えるか気になる場合は、色覚テストのシミュレーションもあわせてご覧ください。

      基準日 CSS仕様・WCAG・美術教育資料・DICの解説は2026年10月20日に確認しました。表のHEXとコントラスト比は、このツールの計算ルールで直接求めた値です。

      出典

      よくある質問

      同じ色を入れたのに、ほかのサイトと補色が違います。

      基準にしている色相環が違うためです。このツールは画面の色を扱うRGB・HSLの色相環を使っており、赤 #FF0000 の正反対はシアン #00FFFF になります。絵の具を混ぜる画家の色相環（RYB）では赤の補色は緑なので、美術の教材や一部のツールとは結果が異なることがあります。

      7つの配色のうち、どれを選べばよいですか。

      1か所だけ目立たせたいなら補色かスプリット補色、穏やかにつながる画面にしたいなら類似色か単色、区別できる色が3〜4色必要ならトライアド・スクエア・レクタングルが向いています。7つの配色を一覧でストライプを見比べ、60・30・10の例の画面に当てはめてから決めるとよいでしょう。

      配色の色同士を文字と背景に重ねて使ってもよいですか。

      ほとんどの場合はおすすめしません。このツールは彩度と明度を基準色と同じにするため、配色の色同士はコントラストが低いことが多くあります。例のスプリット補色は色同士のコントラストが1.2:1〜2.1:1で、本文の基準である4.5:1を大きく下回ります。背景は配色の色で塗り、文字はリストが示す白か黒にしてください。

      彩度・明度のバーを動かすと何が変わりますか。

      配色に含まれるすべての色の彩度や明度が一緒に変わります。色同士の角度関係はそのまま残るので、同じ配色を淡いパステルや暗く落ち着いたトーンに移すときに使います。単色の配色は、明度のバーで基準の明度を決めると、その上下に20ずつ段階を作ります。基準の明度が75%を超えると暗い側だけに、25%未満なら明るい側だけに2段作ります。

      60・30・10の比率は必ず守る必要がありますか。

      いいえ。60・30・10はインテリアで広く使われる経験則で、広い面を1つ決めて画面が散漫にならないようにするための出発点です。このツールの例の画面は面積をちょうどその比率で描いており、2色は70・30、4色は60・25・10・5に分けるのはこのツールが決めた取り決めです。

      リンクで共有すると何が含まれますか。

      基準色のHEXと配色ルールだけがアドレスに含まれます（例: ?c=E07A5F&r=split）。リンクを開いた人には、同じ配色と同じHEXが表示されます。例の画面のメインの順番と最近の基準色の一覧はリンクに含まれず、最近の基準色はこのブラウザにのみ保存されます。

      ここで作った色をそのまま印刷物に使ってもよいですか。

      そのまま使うと色が変わることがあります。HEXは画面の光（RGB）で決めた色で、印刷はCMYKインクで色を出します。特に彩度の高いシアンや黄緑は印刷の範囲を外れやすいので、RGB CMYK変換で印刷の予想色を先に確認してください。

      白やグレーを入れると、なぜすべての配色が同じ色になるのですか。

      白・黒・グレーのような無彩色は彩度が0で、色相角がありません。色相角をいくら回しても同じグレーになるので、彩度のバーを上げて色味を持たせるか、明度だけを変える単色の配色を選んでください。白（明度100%）と黒（明度0%）は彩度を上げても変わらないため、明度のバーもその間に動かしてください。

      ランダムパレットジェネレーター色を固定しながら3〜15色のパレットを引き、画面の例に当てはめて文字のコントラストまで確認します。配色パレット作成ツール基準色1色から配色と50〜900の明度ステップを作り、文字のコントラストと色覚タイプ別の見え方を確認します。色覚テスト点描プレートで赤–緑・青–黄の3軸の色の見分けを段階ごとに確かめる色覚テストです。RGB CMYK変換ツールHEX・RGBとCMYKを印刷条件(ICCプロファイル)別に変換し、4版の網点・印刷予想色・総インキ量まで表示します。