HLS ／ HSL ／ HSI ／ HSLA

色 ＞ HLS

HLSとは？

　状態:- 　閲覧数:3,287 　投稿日:2016-04-29 　更新日:2016-04-29
HLS色空間
・エイチエルエスいろくうかん
・色を、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3要素で表現したもの
・HSV色空間によく似ている
・HSL、HSIと呼ばれることもある

・「赤がどれだけで青がどれだけ」指定ではなく、「この色をこれくらい鮮やかにこれくらい明るく」で指定できる方法

Hue ／ Lightness ／ Saturation

　閲覧数:683　投稿日:2016-04-07　更新日:2016-04-29

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要素範囲 ／ 最小値 ～ 最大値

　閲覧数:818　投稿日:2016-04-29　更新日:2016-04-30

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




類似度ページランキング
順位 ページタイトル抜粋 ％
1 HLS ／ HSL ／ HSI ／ HSLA 32
2 RGB → HSL 26
3 HSV ／ HSB 26
4 HSL → RGB 26
5 RGB → HSL 目次 24
6 RGB → HSL ／ RGB → HSV 23
7 HSL → RGB 計算方式の違い 21
8 Save As MHT 0.1.3 21
9 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス 20
10 キャラクター無料作成ジェネレーター ／ FLASH以外 ／ オンラインサービス 20
11 RGB → HSL 勘違いしていたかも 20
12 RGB → HSL を 色モデルで考える 19
13 Save As MHT 20220426 19
14 HSLとHSVの違い 19
15 RGB ⇔ HSV 18
16 HTMLオンライン実行環境リアルタイム ／ HTML Instant 18
17 「SRWare Iron」を検討 16
18 HTML5タグ 及び テンプレート 15
19 HSV → RGB 計算方式の違い 15
20 Private リセットCSSテンプレ ／ CSS圧縮Link 15
2026/7/31 17:21 更新
週間人気ページランキング ／ 7-24 → 7-30
順位 ページタイトル抜粋 アクセス数
1 Design 0 12
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
2 鉄道会社毎のカラーコード | カラーコード(色) 3
3 経緯 ／ 用語の違いが分からない ／ ソフトウェア比較一覧表 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
3 RGBの種類 ／ ビットカラー | RGB(色) 2
3 HLS ／ HSL 2
3 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
3 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
3 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81（Official Build） （64 ビット） | Google Chrome(ブラウザ) 2
4 Chromeで名前を付けて保存する際、ファイルを一つにするには、mht形式で保存する | Google Chrome(ブラウザ) 1
4 試行履歴 1
4 resizeが効かない場合は、min-heightを設定してみる | CSS 1
4 今後について ／ 要検討事項 1
4 丸い顔アイコンジェネレータ ／ Icon Generators 1
4 画像フィルタ 選考落選 | 画像フィルタ(画像) 1
4 Chromeブックマーク(ブラウザ) カテゴリー 1
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 1
4 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 1
2026/7/31 5:05 更新