カラーホイール
無料でオンラインで利用可能 カラーホイール インストール不要のツール
カラーホイールについて
このツールは HTML キャンバスに 360 分割の色相リングを描画し、リング上のクリックまたはドラッグで色相を選択できます。彩度と明度はスライダーで設定し、選択した色は見本として表示され、コピー可能な HEX、RGB、HSL 文字列が提供されます。Reset ボタンは色相を 0、彩度を 100、明度を 50 に戻します。
使い方
1. 色付きリングの内側をクリックまたはドラッグして色相を設定します。リングは現在の彩度と明度で描画されます。 2. スライダーまたは数値入力で Hue（0-360）、Saturation（0-100）、Lightness（0-100）を調整します。 3. Preview 見本とリング上のインジケーターがリアルタイムで更新されるのを確認します。 4. Color Values カードのボタンを使って HEX、RGB、HSL をコピーします。 5. Reset をクリックしてデフォルトに戻します。
ホイールの挙動とインジケーター
ホイールは 260px のキャンバスで、デバイスピクセル比で描画されて鮮明さを保ち、外側に色相リング、内側は空になっています。ポインタイベントがキャプチャされるため、ドラッグはカーソルを追跡します。内側の穴や外側の縁のクリックは無視されます。選択された色相の位置に円形のインジケーターがあり、現在の色で塗りつぶされます。色相は中心に対するポインターの角度から導出され、0deg が上になります。彩度と明度はリングの各セグメントの色を変化させるだけで、ジオメトリは変わりません。
▶ホイールの中心をクリックしても何も起こらないのはなぜですか？
色付きの外側のリングのみがインタラクティブです。内側の半径（許容範囲を引いた値）より内側や外側の半径より外側のポインタイベントは無視されるため、中空の中心のクリックは効果がありません。
▶ホイールで彩度や明度を選択できますか？
いいえ。ホイールは角度による色相の選択のみを行います。彩度と明度はホイールの下にあるスライダーまたは数値入力で設定する必要があります。
▶ドラッグが時々カーソルに滑らかに追従しないのはなぜですか？
ポインターキャプチャが有効なため、ドラッグはキャンバスの外まで続きますが、ポインタがリングの半径範囲内にあるときだけ色相が更新されます。中心に近すぎる位置や外側すぎる位置は無視されます。
▶コピーできる色形式は何ですか？
HEX（大文字）、RGB は `rgb(r, g, b)`、HSL は `hsl(h, s%, l%)` です。それぞれ Color Values カードに独自の Copy ボタンがあります。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。