補色ジェネレーター

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

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

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

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

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

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

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

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

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

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