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

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

　状態:- 　閲覧数:10,940 　投稿日: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」の違い／全体イメージ図

　閲覧数:1,289　投稿日: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色空間を理解する

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

　閲覧数:1,125　投稿日: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 ／何れも同じ

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

色相H

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

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

HSL
HSV
HSB

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

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

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

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

・理解できない

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

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

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

　閲覧数:875　投稿日: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
	2026/8/26 1:59 更新

順位	ページタイトル抜粋	アクセス数
1	Design 0	5
2	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	4
3	RGBの種類／ビットカラー \| RGB(色)	3
3	RGB → HSL ／ RGB → HSV \| 色変換(色)	3
3	色変換(色) カテゴリー	3
4	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	2
4	「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと \| 2系(Bootstrap)	2
4	「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく \| CSSトラブル対応(CSS)	2
4	HSLとHSVの違い \| 色変換(色)	2
4	Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 \| Google Chrome(ブラウザ)	2
4	RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB	2
4	「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される \| CSSトラブル対応(CSS)	2
4	Fireworks で背景画像透明化 \| Fireworks CS3(Fireworks)	2
4	Adobe Camera Raw 4.0 \| Photoshop	2
4	HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い \| HTML5(HTML)	2
4	Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) \| Google Chrome(ブラウザ)	2
4	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	2
5	「Yahoo!検索（リアルタイム）」最強 \| Yahoo!検索（リアルタイム）(検索)	1
5	「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある \| z-index(CSS)	1
5	RGB → 色相H 方式の違い \| 色変換(色)	1
	2026/8/25 5:05 更新