HLS ／ HSL ／ HSI ／ HSLA

色 ＞ HLS

HLSとは？

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

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

Hue ／ Lightness ／ Saturation

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

　閲覧数:633　投稿日: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
2025/3/10 23:29 更新
週間人気ページランキング ／ 3-3 → 3-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 6
2 RGB ⇔ Lab | 色変換(色) 6
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
3 このエントリーの結論 ／ 変更するまで ／変更後 5
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 色モデルイメージ図 | 色変換(色) 3
4 24ビットカラーにおけるHLS要素範囲 ／ 最小値 ～ 最大値 3
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
5 G'MIC | GIMP 系(ソフトウェア) 2
5 16進数カラーコード ／ 2進数 2
5 「bgcolor」「background-color」「background」の違い | CSS 2
5 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 2
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 2
    5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
    5 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
    6 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 1
    6 効果を打ち消すスタイルシート | CSS 1
    6 2系(Bootstrap) カテゴリー 1
    2025/3/10 1:01 更新