RGBからHSLへ変換

RGBチャンネルを正しく入力する方法

赤・緑・青に対応する3つの数値フィールドを、短いフィールド名r、g、bで指定してください。各チャンネルは両端を含む0から255の範囲にする必要があります。0はそのチャンネルの強度がない状態、255は最大強度を意味します。別の計算から補間色が生成される場合に便利なため、範囲内の小数も入力できます。この変換では、無効な値を意図的に範囲内へ丸めません。負数、255を超える値、欠落値、数値でない値、無限大を指定すると、入力エラーを返します。厳密に検証することで、無効な元データが、もっともらしい誤った色へ気付かないまま変換されることを防ぎ、自動処理を安全にできます。最初の確認にはrを255、gを0、bを0にしてください。結果は色相0度、彩度100パーセント、明度50パーセントの赤になります。CSSから値をコピーする際は、rgb()の囲み、コンマ、パーセント記号を除き、チャンネルの数値だけを送信してください。入力を数値に限定することで、0–255のRGBスケールと、一部のデザインシステムが使用するパーセント表記との混同も避けられます。

HSL値が計算される仕組み

変換では、まず各RGBチャンネルを255で割って正規化します。次に、正規化した値の最大値と最小値を求めます。その平均が明度になり、差であるクロマによって、彩度と意味のある色相が存在するかを判断します。クロマが0の場合は無彩色です。彩度は0となり、色相環のどの位置も視覚的に区別できないため、慣例として色相も0を返します。有彩色では、現在の明度に応じてクロマを調整した値が彩度になります。色相は、どのRGBチャンネルが最大かによって決まります。赤・緑・青は色相環の異なる区画を占め、チャンネル間の相対的な差によって区画内の位置を決定します。色相は0以上360未満の度数で返されます。彩度と明度は100倍し、パーセント値として返します。結果は小数第4位までに丸めるため、実用的な精度を保ちながら、安定して読みやすい応答になります。これは標準的なRGBからHSLへの変換です。同じ色情報を並べ替える処理であり、カラーマネジメント、ガンマ補正、プロファイル変換は行いません。

デザインとアプリケーションでの活用方法

色のバリエーションを検討する場合、HSLはRGBより直感的に扱えることがあります。色相は色の系統、彩度は鮮やかさや灰色への近さ、明度は黒または白への近さを表します。ブランドカラーを変換した後、色相を維持したまま明度を調整すれば、ホバー、押下、無効などの状態色を作成できます。データ処理では、異なる形式のカラーレコードを共通のHSL表現へ統一してから、並べ替えやグループ化を行えます。品質検査では、返された値をデザイントークンと比較し、不正なRGBチャンネルを早期に拒否することも可能です。ただし、同じ数値幅の変更が同じ見た目の変化になるとは限りません。HSLは操作には便利ですが、知覚的に均等な色空間ではありません。正確な往復変換が必要な場合は、丸めによって再変換時にわずかな差が生じる可能性があるため、元のRGB値も保存してください。この処理は入力された数値だけで決まる決定論的な計算です。ネットワーク、乱数、時刻、外部カラーデータベースを使用しないため、同じ入力からは繰り返し同じ出力が得られ、テスト、ビルドスクリプト、API連携、再現可能なデザインシステム用ツールに適しています。