HSLとHSVの違い | 「色変換(色)」カテゴリー

「L」 vs 「V」または「B」

　状態:- 　閲覧数:9,909 　投稿日:2016-05-24 　更新日:2016-06-19

HSLの「L」
・輝度
・Lightness

HSVの「V」
・明度
・Value

HSBの「B」
・明度
・Brightness

※HSVとHSBは同一であるがHLSとは異なる

HSL円錐方式の他に円柱方式もある理由を教えてください
・HSLの円柱方式って、それはもうHSV方式ではないのでしょうか？
一番下(L0)が真っ黒でないHSL円柱方式の色空間モデル図はどこかにあるでしょうか？
・そもそも作成可能？

・下記リンク先で、HSLを円柱方式へ変更してHSVと比較することはできるでしょうか？
http://cweb.canon.jp/camera/picturestyle/editor/matters05.html

・HSL円錐方式の他に円柱方式もある理由を教えて

「RGB → HSL」と「RGB → HSV」の違い／全体イメージ図

　閲覧数:983　投稿日:2016-05-24　更新日:2016-05-27

HSL ／ HSV

考え方
・円を100枚積み重ねて円柱を作成したと仮定

H
・「その色を表示している地点」の「円の角度」
・0 ～ 360°

S
・「その色を表示している地点」の円中央からの距離
・0 ～ 100%

L ／ V
・「その色を表示している地点」の「円柱の高さ」
・0 ～ 100%

HSL原色

輝度L
・50％

彩度S
・100%

HSV原色

明度V
・100％

彩度S
・100%

・ImageMagickでHSLとHSV色空間を理解する

最高低／輝度／明度／彩度一覧

　閲覧数:847　投稿日:2016-05-24　更新日:2016-05-26

一覧

最高
・100%

最低
・0%

一覧表

輝度	明度	彩度	HSL	HSV	備考
100	-	100	白色	-	輝度が100なら彩度に関わらず常に白色
100	-	0	白色	-	輝度が100なら彩度に関わらず常に白色
0	-	100	黒色	-	輝度が0なら彩度に関わらず常に黒色
0	-	0	黒色	-	輝度が0なら彩度に関わらず常に黒色
-	100	100	-	原色	-
-	100	0	-	白色	-
-	0	100	-	黒色	明度が0なら彩度に関わらず常に黒色
-	0	0	-	黒色	明度が0なら彩度に関わらず常に黒色

輝度

色による明るさの違いを考慮したもの
・「色相による明るさの違い」に重み付けがなされた明るさの値のこと

彩度を低下させた時
・赤緑青のうち最も強い色と最も弱い色の中間に収束していく

原色
・輝度50%
・高ければ明るく、低ければ暗く、より直感的に調整可能

明度

単に色の彩度を下げたもの
・色空間全体の明るさを決めるためのパラメータ
・厳密な色の明るさではない

彩度を低下させた時
・最も強い色に収束していく

原色
・明度100%
・原色をさらに明るくしたい場合、若干操作に迷う

・ピクチャースタイル
・HSL and HSV

明度よりも輝度の方が優れている

HSLとHSVの色相H ／何れも同じ

　閲覧数:559　投稿日:2016-05-25　更新日:2016-05-27

色相H

「その色を表示している地点」の「円の角度」
・0 ～ 360°

H色相を求める計算式は何れも同じ

HSL
HSV
HSB

HSLとHSVの彩度S ／ 100%は原色

　閲覧数:559　投稿日:2016-05-27　更新日:2016-05-27

彩度を低下させた時にHSVは赤緑青のうち最も強い色に収束していくのに対して、HSLは最も強い色と最も弱い色の中間に収束していくという明確な違いがあります。両者を混同すると、まったく別の色になってしまったりするので注意してください

HSVの場合彩度が０なら白になる。
HLSの場合彩度が０なら５０％の灰色になる。

・理解できない

彩度Sが0％
・何れも同じ

彩度Sが100％
・輝度L明度Sの定義内容が異なるため、実際に表示される内容はそれに引き摺られる

HSLとHSVの輝度L明度S ／ 100%は原色

　閲覧数:567　投稿日:2016-05-27　更新日:2016-05-27

最高
・100%

最低
・0%

#2196F3の互換性

RGB → HSL を色モデルで考える

順位	ページタイトル抜粋	％
1	HSLとHSVの違い	80
2	HSL → RGB 計算方式の違い	44
3	HSV → RGB 計算方式の違い	44
4	RGB → HSL 勘違いしていたかも	34
5	RGB → 色相H 方式の違い	32
6	RGB → HSL	32
7	HSV ／ HSB	32
8	HSL → RGB	32
9	以前のHTML対応	32
10	「PhotoShop CS3」　と、「Vieas」　の違い	31
11	SVG	31
12	CSSで出来ないこと	30
13	RGB → 色相H 計算方式の違い	30
14	RGB → 彩度S 計算方式の違い	30
15	RGB ⇔ HSV	29
16	RGB → HSL 目次	27
17	Webデザイナーとデザイナーの違い	27
18	MHTML	27
19	RGB → HSL ／ RGB → HSV	26
20	LESS入門	25
	2025/1/17 4:03 更新

順位	ページタイトル抜粋	アクセス数
1	鉄道会社毎のカラーコード \| カラーコード(色)	10
1	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	10
2	RGB ⇔ Lab \| 色変換(色)	8
3	効果を打ち消すスタイルシート \| CSS	6
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	6
3	キャラクター無料着せ替えジェネレーター Dress up game ／オンラインサービス \| イラスト参考(デザイン)	6
4	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	5
5	キャラクター無料着せ替えジェネレーター Rinmaru Games ／オンラインサービス \| イラスト素材(デザイン)	4
5	Design 0	4
6	Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない \| Google Chrome(ブラウザ)	3
6	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	3
6	16進数カラーコード／ 2進数	3
6	血の色／ #b30000 ／ #360800 ／ #ff0000 \| カラーコード(色)	3
6	「display:flex;」を設定している「タグ」内の「タグ」クリック範囲を拡大する \| Flexible Box Layout Module(CSS)	3
7	「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」	2
7	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	2
7	「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」	2
7	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	2
7	RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB	2
7	親要素の背景色を、CSSで打ち消したい \| CSS	2
	2025/1/17 1:01 更新