HLSとは？
状態:-
閲覧数:3,311
投稿日:2016-04-29
更新日:2016-04-29
HLS色空間
・エイチエルエスいろくうかん
・色を、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3要素で表現したもの
・HSV色空間によく似ている
・HSL、HSIと呼ばれることもある
・「赤がどれだけで青がどれだけ」指定ではなく、「この色をこれくらい鮮やかにこれくらい明るく」で指定できる方法
・エイチエルエスいろくうかん
・色を、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3要素で表現したもの
・HSV色空間によく似ている
・HSL、HSIと呼ばれることもある
・「赤がどれだけで青がどれだけ」指定ではなく、「この色をこれくらい鮮やかにこれくらい明るく」で指定できる方法
Hue ／ Lightness ／ Saturation
H
Hue
・色相
・「色合い」を調整
・範囲は0-360度
※0～100に変更することも可能
0度は赤色
・「赤、オレンジ、黄色、緑、水色、青、紫色」の順番で色合いが変化していく
・全体表示すると虹色に見える
L
Lightness
・明度
・「明るさ」を調整
・範囲は0-100%
※0～255に変更することも可能
100%
・白色
50%
・純色
0%
・黒色
S
Saturation
・彩度
・「鮮やかさ」を調整
・範囲は0-100%
※0～255に変更することも可能
100%
・純色
0%
・無彩色（白・黒・灰色）
HSLAとは？
HLS色空間+アルファの値で指定するcss3の色指定方法
24ビットカラーにおけるHLS要素範囲 ／ 最小値 ～ 最大値
LS記述内容は3種類
A. 階調 … 0 ～ 255
B.パーセンテージ … 0% ～ 100%
C.便宜上最大値を1と設定 … 0 ～ 1
※Hueは常に0°～360°
A. 階調
0 ～ 255
・整数
・CSS指定不可
| - | 最小値 | 最大値 |
|---|---|---|
| H | 0° | 360° |
| L | 0 | 255 |
| S | 0 | 255 |
B.パーセンテージ
0% ～ 100%
・割合
・CSS指定可
| - | 最小値 | 最大値 |
|---|---|---|
| H | 0° | 360° |
| L | 0% | 100% |
| S | 0% | 100% |
C.便宜上最大値を1と設定
0 ～ 1
・割合
・CSS指定不可
| - | 最小値 | 最大値 |
|---|---|---|
| H | 0° | 360° |
| L | 0.0 | 1.0 |
| S | 0.0 | 1.0 |