HLS ／ HSL ／ HSI ／ HSLA

色 ＞ HLS

HLSとは？

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

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

Hue ／ Lightness ／ Saturation

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

　閲覧数:816　投稿日: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/10 23:26 更新
週間人気ページランキング ／ 7-3 → 7-9
順位 ページタイトル抜粋 アクセス数
1 Design 0 7
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 6
3 スキップリンク | アクセシビリティ(UI) 4
4 画像縦横比の問題 | 画像 3
4 RGBの種類 ／ ビットカラー | RGB(色) 3
4 nuspecファイル 3
5 GIFアニメーション | 画像 2
5 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
5 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 2
5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
5 GetTabInfo 2
5 画像エフェクト試行例 ／ FotoSketcher ペイント10(ブラシストローク画) 2
5 rem × Bootstrap4 2
5 Flexible box の縦方向中央揃えは、「vertical-align: middle;」ではなく「align-items: center;」 2
5 Copy Link Text ／ Copy Title+URL to clipboard 2
5 インストール ／ MediBang Paint Pro チュートリアル ／ 実際に起動してみて気が付いたこと 2
5 RGB正六面体 → HSL円柱 2
5 PHP Login System Reloaded v1.1 2
5 問題発生 ／ 方法は2種類 ／ CSS対応時の注意点 2
2026/7/10 5:05 更新