HSV ／ HSB

色 ＞ HSV

　状態:- 　閲覧数:2,446 　投稿日:2016-04-29 　更新日:2016-04-29

2種類


円錐モデル
円柱モデル


Hue ／ Saturation ／ Value

　閲覧数:604　投稿日:2016-04-08　更新日:2016-04-29

HSV(HSB)


「H」(hue)
・色相
・「色合い」を調整



「S」(saturation)は彩度で「鮮やかさ」を調整
・範囲は0-100%

「V」(Value)は明度で「明るさ」を調整
・範囲は0-100%

「V」を「B」(Brightness/輝度)と称してHSB色空間と呼ぶ場合もある
・HSVとHSBは同じ

H


hue
・色相
・「色合い」を調整
・範囲は0-360度
※0～100に変更することも可能

0度は赤色
・「赤、オレンジ、黄色、緑、水色、青、紫色」の順番で色合いが変化していく
・全体表示すると虹色に見える

S


saturation
・彩度
・「鮮やかさ」を調整
・範囲は0-100%
※0～255に変更することも可能

100%
・純色

0%
・無彩色（白・黒・灰色）

V ／ B


Value ／ Brightness
・輝度

100%
・純色

0%
・黒色

24ビットカラーにおけるHSV要素範囲 ／ 最小値 ～ 最大値

　閲覧数:646　投稿日:2016-04-29　更新日:2016-04-30

SV記述内容は3種類


A. 階調 … 0 ～ 255
B.パーセンテージ … 0% ～ 100%
C.便宜上最大値を1と設定 … 0 ～ 1

※Hueは常に0°～360°

A. 階調


0 ～ 255
・整数
・CSS指定不可
- 最小値 最大値
H 0° 360°
S 0 255
V 0 255


B.パーセンテージ


0% ～ 100%
・割合
・CSS指定可
- 最小値 最大値
H 0° 360°
S 0% 100%
V 0% 100%

C.便宜上最大値を1と設定


0 ～ 1
・割合
・CSS指定不可
- 最小値 最大値
H 0° 360°
S 0.0 1.0
V 0.0 1.0




類似度ページランキング
順位 ページタイトル抜粋 ％
1 HSV ／ HSB 67
2 RGB ⇔ HSV 50
3 RGB → HSL 44
4 HSL → RGB 44
5 RGB → HSL ／ RGB → HSV 40
6 HSV → RGB 計算方式の違い 38
7 RGB → HSL 目次 38
8 SVG 33
9 HSLとHSVの違い 32
10 HSL → RGB 計算方式の違い 31
11 P2VJ 29
12 RGB → HSL 勘違いしていたかも 29
13 RGB → HSL を 色モデルで考える 28
14 HLS ／ HSL ／ HSI ／ HSLA 26
15 Bookmark Sentry 25
16 Vieas V.S. 透過画像 25
17 RGBの種類 ／ ビットカラー 25
18 RGB → 色相H 方式の違い 25
19 SVGハマった点 24
20 SVG表示サイズ 24
2026/3/19 5:11 更新
週間人気ページランキング ／ 3-12 → 3-18
順位 ページタイトル抜粋 アクセス数
1 ログイン 20
2 Design 0 19
3 Adobe Camera Raw 4.0 | Photoshop 5
4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
4 RGBの種類 ／ ビットカラー | RGB(色) 4
4 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 4
4 色モデルイメージ図 | 色変換(色) 4
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    5 RGB ⇔ Lab | 色変換(色) 3
    5 「bgcolor」「background-color」「background」の違い | CSS 3
    5 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
    5 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 3
    5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
    6 「Illustrator CS3」で出力範囲指定 | Illustrator CS3(Illustrator) 2
    6 型 ／ 型 ／ 型 2
    6 ボーダーでごまかす 2
    6 CSSが反映されない時にやること 2
    6 「Illustrator CS2」「Fireworks 8」「Photoshop CS2」比較 | Fireworks 8(Fireworks) 2
    6 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
    6 キャッシュを待機しています →「chrome://net-internals/#dns」→「Clear host cache」ボタンクリック | Google Chrome(ブラウザ) 2
    2026/3/19 5:05 更新