HSLカラーホイール

ダウンロードできるホイールで、デジタルのHSLの色の構造を調べます。色相は円に沿って回り、彩度は中心から端へ大きくなり、輝度の設定は円盤全体に適用されます。縁取りのある小さな印が、選んだ色の位置とHEXの結果を示します。

使い方

1. ホイールの輝度を0〜100%の間で選びます。
2. 色相を度、彩度をパーセントで入力します。
3. 選んだHEXの値を確認し、印の位置を見ます。
4. PNGをダウンロードして、視覚的な参考として残します。

計算式

色相 = 右から時計回りに測った角度、彩度 = 中心からの距離 ÷ 半径 × 100%、輝度 = 選んだ定数

選んだHSLの色はsRGBに変換して、0〜255の整数チャンネルに丸め、ちょうど0.5になる場合は切り上げます。ホイールは320 × 320ピクセルで、円盤の外側は透明です。中間の輝度では、中心はグレーです。

計算例

輝度50%、彩度100%では、色相 0° が #FF0000、120° が #00FF00、240° が #0000FF です。彩度が0%なら、どの色相でも8ビットに丸めると同じグレーの #808080 になります。

色相の向き

このホイールは、赤を右に置き、色相が時計回りに大きくなります。図全体を回転させても、見た目が変わるだけで、色同士の関係は変わりません。HSLの間隔は、見た目の差や明るさが等しい目盛りではありません。