HSLをHSLAに変換

HSLの値を貼り付けると、すぐにHSLAに変換します。ほかの形式も入力できます。

HSLから

HSLとして認識

HSLAの値hsla(10.59, 100%, 60%, 1)

色を調整

色相11°

不透明度100%

明度68%

クロマ0.210

色相34°

8桁のHEXでは最後の2桁が不透明度を表します。FFは完全に不透明、80は約50%、00は完全に透明です。表では例の色を5%刻みで示しています。

不透明度	HEXのアルファ値	HEX	HSLA
100%	ff	#ff5733	hsla(10.59, 100%, 60%, 1)
95%	f2	#ff5733f2	hsla(10.59, 100%, 60%, 0.95)
90%	e6	#ff5733e6	hsla(10.59, 100%, 60%, 0.9)
85%	d9	#ff5733d9	hsla(10.59, 100%, 60%, 0.85)
80%	cc	#ff5733cc	hsla(10.59, 100%, 60%, 0.8)
75%	bf	#ff5733bf	hsla(10.59, 100%, 60%, 0.75)
70%	b3	#ff5733b3	hsla(10.59, 100%, 60%, 0.7)
65%	a6	#ff5733a6	hsla(10.59, 100%, 60%, 0.65)
60%	99	#ff573399	hsla(10.59, 100%, 60%, 0.6)
55%	8c	#ff57338c	hsla(10.59, 100%, 60%, 0.55)
50%	80	#ff573380	hsla(10.59, 100%, 60%, 0.5)
45%	73	#ff573373	hsla(10.59, 100%, 60%, 0.45)
40%	66	#ff573366	hsla(10.59, 100%, 60%, 0.4)
35%	59	#ff573359	hsla(10.59, 100%, 60%, 0.35)
30%	4d	#ff57334d	hsla(10.59, 100%, 60%, 0.3)
25%	40	#ff573340	hsla(10.59, 100%, 60%, 0.25)
20%	33	#ff573333	hsla(10.59, 100%, 60%, 0.2)
15%	26	#ff573326	hsla(10.59, 100%, 60%, 0.15)
10%	1a	#ff57331a	hsla(10.59, 100%, 60%, 0.1)
5%	0d	#ff57330d	hsla(10.59, 100%, 60%, 0.05)
0%	00	#ff573300	hsla(10.59, 100%, 60%, 0)

HSLは色相を角度で、彩度と明度をパーセントで表します。読みやすい反面、明度が見た目と一致せず、50%の黄色は50%の青よりずっと明るく見えます。

HSLAはHSLに不透明度のアルファチャンネルを加えた形式で、hsla(11, 100%, 60%, 0.5)のように書きます。アルファは0（完全に透明）から1（完全に不透明）まで。最新のCSSではhsl()の中でも指定できます。

HSLの値を読み取り、CSS Color 4仕様の行列でCIE XYZに変換してからHSLAにします。変換先の色域に収まらない値はCSS Color 4のアルゴリズムで調整し、明度と色相を保ったままクロマを下げます。

HSLをHSLAに変換するには？

上の入力欄にHSLの値を貼り付けるか入力してください。PickShadeが入力と同時にCSS Color 4の計算式で変換し、ワンクリックでHSLAの値をコピーできます。

HSLからHSLAへの変換は正確ですか？

計算は正確で、丸めるのは表示のときだけです。桁数は元の色に戻せるだけ残しています。変換先の色域に収まらない場合は、PickShadeが警告し、収まる範囲で最も近い色を表示します。

ほかの形式も同時に確認できますか？

はい。OKLCH、Display P3、Tailwind、SwiftUI、Flutter、Androidを含むほかのすべての形式が結果の下に並び、ワンクリックでコピーできます。

この変換ツールは無料ですか？

はい。無料で登録も不要、すべてブラウザ内で動作します。