オンライン補色ツール

補色とは何か、このツールの役割

補色とは、色相環で正反対に位置する2色の組み合わせです。このツールは、HSL色相モデルに基づき、選択したベースカラーの色相に180度を加えた色を自動的に計算します。例えば、ベースカラーとして赤（#FF0000）を選ぶと、その補色としてシアン（#00FFFF）が生成されます。これは、HSLの色相を180度回転させた結果であり、RGBの各チャンネルを255から引く方式（いわゆる反転）とは異なります。

実際の使い方と具体例

デザインでベースカラーとアクセントカラーの組み合わせを検討する際に役立ちます。例えば、ベースカラーに青（#3B82F6）を設定して計算すると、補色としてオレンジ系の色が表示されます。生成された2つのスウォッチは独立して編集可能で、編集後は表示テキストが更新されますが、補色の関係が保たれるとは限りません。

計算の仕組みと制限事項

計算はすべてブラウザ内で行われ、画像やデータのアップロードは一切ありません。AIによる処理も行われません。補色の色相は固定されており、調整することはできません。また、補色の組み合わせが自動的にアクセシブルなコントラスト比を保証するわけではありません。前景と背景のコントラストを確認する場合は、別途テストを行う必要があります。

よくある質問

Q1: ベースカラーをHEX以外の形式で入力できますか？

はい、詳細パネルではRGB、HSV、HSLの各形式でも入力できます。ただし、結果の表示はHEXコードで行われます。

Q2: 生成された2色は常に補色の関係ですか？

初期生成時は補色の関係にありますが、スウォッチを個別に編集すると、その関係は保証されません。編集後は表示されたテキストが更新されるだけで、補色の再計算は行われません。

Q3: モバイル端末でも利用できますか？

はい、モバイルブラウザでも動作します。ベースカラーを選択して計算ボタンを押すだけで、2つのスウォッチとHEXコードを確認できます。

チェックリスト

• ベースカラーを選択する
• 計算ボタンをクリックする
• 生成された2色のHEXコードを確認する
• 必要に応じてスウォッチを編集する
• クリアボタンでリセットする