# 補色ジェネレーター

この補色ジェネレーターで、どんなベースカラーの補色も見つけられます。3桁または6桁の16進数コードを入力すると、彩度と明度を保ったまま、HSLカラーホイール上で色相を180度回転させ、ベースカラーとその補色を16進数コードで返します。ボタン、ハイライト、チャート、ブランド画像にコントラストの高いアクセントカラーが必要なデザイナーや開発者に最適です。

## よくある質問

### 補色ジェネレーターでは何が生成されますか？

6桁の小文字の16進数コードで2色を返します。色1は入力したベースカラー、色2はその補色で、カラーホイール上で正反対に位置する色です。

### 補色はどのように計算されますか？

ツールは入力した16進数コードをHSLに変換し、色相に180度を加え、彩度と明度はそのまま保ちます。回転後の値をRGBに戻して16進数コードで出力するため、補色はベースカラーと同じ鮮やかさと明るさになります。

### どの色形式を入力できますか？

\#ff5733、FF5733、#f00など、先頭の#の有無を問わず、大文字または小文字の3桁か6桁の16進数コードを入力してください。RGBおよびHSLの表記や色名には対応していないため、先にカラーコンバーターで16進数に変換してください。

### 色1が入力した16進数コードと少し違うのはなぜですか？

ベースカラーを色相、彩度、明度が整数のHSLに変換してから16進数に戻すため、いずれかのチャンネルが1段階ずれることがあります。たとえば、#ff5733は#ff5833になり、その補色は#33daffです。

### 純粋な赤の補色は何ですか？

\#ff0000の補色は#00ffff、シアンです。このツールでは画面で使われるRGBベースのHSLホイールを使用するため、従来の画家向けホイールのように赤と緑ではなく、赤とシアンが組み合わされます。

### 黒、白、グレーの場合はどうなりますか？

無彩色は彩度がゼロなので、色相を回転させても変化せず、どちらの結果も同じグレーになります。目に見える補色が必要な場合は、ある程度彩度のあるベースカラーを選んでください。

### デザインで補色の組み合わせをどう使えばよいですか？

大部分の面には一方の色を使い、行動喚起、ハイライト、目立たせたいデータには補色を控えめに使います。両方を同じ割合で高彩度のまま使うと視覚的にちらつきやすいため、広い面にはどちらかに色を足すか暗くした色を使ってください。

### このツールはテキストのコントラストをチェックしますか？

いいえ。色の組み合わせを計算するだけです。補色はベースカラーの明度を保つため、2色の輝度が近くなり、テキストにはコントラストが不足することがあります。一方の色をもう一方の色の上で使う前に、WCAGコントラストチェッカーで確認してください。

### 一度に複数の色を入力できますか？

いいえ。1回の実行で扱えるのは16進数コード1つだけです。複数行や余分なテキストを含む入力はエラーメッセージとともに拒否されるため、ベースカラーごとにツールを実行してください。

### 結果はカラーパレットジェネレーターと同じですか？

はい。このツールはカラーパレットジェネレーターの「補色」オプションと同じ計算を行うため、同じベースカラーからは、どちらのツールでも常に同じ2つの16進数コードが得られます。

ここに広告を掲載しませんか？

[メールでお問い合わせ](mailto:hi@dennn.is?subject=OneClick%20Pro%E3%81%A7%E3%81%AE%E5%BA%83%E5%91%8A%E6%8E%B2%E8%BC%89)

[広告 WordPress向けのエージェント対応プラグインスイート。](https://sleekwp.com/?ref=oneclickpro)