このツールについて
HEXからRGBへの変換と同じ規則で色を解析し、色相・彩度・明度を計算します。HSLは配色の関係を理解したり、同系色の明るさを調整したりする際に便利です。
使い方
- 3桁または6桁のHEXを入力します。#は付けても省略してもかまいません。
- HSLの出力と、H・S・Lそれぞれの値を確認します。
- 色のプレビューを確認し、HSLをコピーします。
- 「クリア」で入力を削除するか、サンプルを読み込みます。
使用例
- #ff0000 → hsl(0, 100%, 50%)。
- #00ff00 → hsl(120, 100%, 50%)、#0000ff → hsl(240, 100%, 50%)。
- #808080 → hsl(0, 0%, 50.2%)、#ffffff → hsl(0, 0%, 100%)。
計算の仕組み
RGBを255で割り、最大値max、最小値min、差deltaを求めます。明度はL = (max + min) / 2です。有彩色の彩度はS = delta / (1 − |2L − 1|)で求め、色相は最大成分の色相環上の位置から計算します。無彩色ではHとSを0とし、表示時に小数を適切な桁数に丸めます。
主な用途
- デザインで使われている色相や明度を把握する。
- HEXの定数を色調整しやすいHSLに変換する。
- 原色、グレー、黒、白のHSL値を確認する。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
HSLの3成分は何を表しますか？
Hは色相の角度、Sは彩度の割合、Lは明度の割合です。SとLはパーセントで表します。
色相を角度で表すのはなぜですか？
色相は色相環で表され、1周が360°だからです。0°と360°は同じ位置を指します。
グレーのHが0になるのはなぜですか？
RGBの3成分が等しい色には特定の色相がありません。このツールではHを0、Sを0%と定義しています。
変換結果に誤差は生じますか？
内部計算では浮動小数点数を使用し、出力時に適切な小数桁数に丸めます。そのため、表示された値を逆変換するとわずかな差が生じる場合があります。