配色の決め方｜補色・類似色・トライアドを用途で選ぶ

Web画面や発表資料で使う色を決めるときは、色の役割を割り当て、候補を作り、文字と背景を検査する順で進めます。パレット生成ツールでは基準色1つと方式を選びます。赤#ff0000の補色がシアン#00ffffになる例から試せます。

補色・類似色・トライアド・モノクロームを比較する

類似色の両端はHSL明度を35%・65%へ変更します。同じ色相の回転だけで作る一般的な例とは、生成結果が異なることがあります。各候補はHSLを整数に丸めて計算するため、元のHEXからの微差も確認してください。無彩色では彩度0%なので、色相を回しても色の違いが出ません。

色数を決めてから役割へ割り当てる

60・30・10%は広い面・補助面・アクセントの配分を試す目安として使えます。面積の比率だけで読みやすさは決まりません。文字の組み合わせは[コントラスト比ガイド](/blog/contrast-ratio-guide/)で対象と基準を選び、[チェッカー](/tools/contrast-checker/)で測ります。

生成結果をコピーして制作ファイルへ残す

カードにはHEX・RGB・HSLが表示されますが、コピー操作はHEXを対象にします。[色変換ツール](/tools/color-converter/)へ貼り付ければ別形式でコピーできます。[色変換ガイド](/blog/color-conversion-guide/)にはHSLの丸めと透明度の扱いをまとめています。3桁・6桁のHEXを入力でき、透明度付きHEXは扱いません。

公開前に通常・ホバー・エラー・ダーク表示を確認する

各状態で文字色と背景色を一組ずつ記録します。ガラス調の半透明カードや背景画像では、重なり先によって見える色が変わるので、最も読みにくい場所も確認してください。リンクは下線、グラフはラベルや線種を使い、色以外からも情報を読み取れるようにします。

便利ツールカテゴリからも開けます。お気に入りは同じブラウザでツールを開き直すためのショートカットです。基準色や制作パレットは自分のファイルに保存してください。

Tools Hub編集部が2026年11月8日に生成角度・色数・コピー形式・比率例を照合しました。

よくある質問

4つの配色方式は何色を生成しますか？

本ツールは補色2色、類似色3色、トライアド3色、モノクローム5色です。モノクロームには元の色と明度25・45・72・88%の候補が含まれます。

生成色をそのままボタンの文字色に使えますか？

文字と背景の組で比率を測ってから決めます。例えば#3b82f6背景と白文字は約3.68:1なので、通常文字のAA基準4.5:1には届きません。

生成結果のコピー形式は何ですか？

各カードのボタンはHEXだけをコピーします。RGB・HSLは表示されます。別形式のコピーが必要なら、HEXを色変換ツールへ入力してください。

60・30・10%の面積配分は守る必要がありますか？

配色を試すための目安です。WCAGの合否条件ではありません。背景・本文・操作要素を置いた実画面で、情報の区別とコントラストを確認してください。

@misc{tools_hub_color_scheme_guide_2026,
  author = {{Tools Hub編集部}},
  title = {配色の決め方｜補色・類似色・トライアドを用途で選ぶ},
  year = {2026},
  url = {https://the-tools-hub.net/blog/color-scheme-guide/}
}