HLS ／ HSL ／ HSI ／ HSLA

色 ＞ HLS

HLSとは？

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

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

Hue ／ Lightness ／ Saturation

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

　閲覧数:824　投稿日: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/9/05 0:10 更新
週間人気ページランキング ／ 8-28 → 9-3
順位 ページタイトル抜粋 アクセス数
1 Design 0 5
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
3 RGB → HSL 変換式 ／ 約分対応 2
3 CopyTabTitleUrl | Chrome 拡張機能 2
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
3 Sword Art Online dress up game 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
3 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 2
3 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 1
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 1
4 「水彩画」画像フィルタ実行例 | 画像フィルタ(画像) 1
4 Fireworks が開発終了したと思われる理由 1
4 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 1
4 RGBの種類 ／ ビットカラー | RGB(色) 1
4 ソフトウェア カテゴリー 1
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 1
4 CSSセレクタ(CSS) カテゴリー 1
4 画像縦横比の問題 | 画像 1
4 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない | Google Chrome(ブラウザ) 1
2026/9/4 5:05 更新