HLS ／ HSL ／ HSI ／ HSLA

色 ＞ HLS

HLSとは？

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

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

Hue ／ Lightness ／ Saturation

　閲覧数:703　投稿日: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要素範囲 ／ 最小値 ～ 最大値

　閲覧数:839　投稿日: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/10/25 1:55 更新
週間人気ページランキング ／ 10-17 → 10-23
順位 ページタイトル抜粋 アクセス数
1 Design 0 11
2 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと | 2系(Bootstrap) 3
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
3 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 | Google Chrome(ブラウザ) 2
3 デザイン変更 | Webデザイン(デザイン) 2
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
3 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 2
3 CMY 2
3 背景 | 他サイト調査(HTML) 2
3 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 2
3 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
3 TwitterのURL | SEO 2
3 aタグで複数のブロック要素を囲むやり方 | CSS 2
3 RGBの種類 ／ ビットカラー | RGB(色) 2
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 2
4 v4 shim ／「Font Awesome 5」で名称変更(廃止)されたアイコン ／ 非同期読込処理 1
4 考え方A.長さの比率で角度６０°を分割 ／ R≧G≧B 1
4 Chromeデバッグする際CSSが()で表示される | Google Chrome(ブラウザ) 1
4 Create Link(Chrome 拡張機能) カテゴリー 1
4 地図作成メモ | Illustrator CS3(Illustrator) 1
2026/10/24 5:05 更新