HSV / HSB

HSV

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

2種類


円錐モデル
円柱モデル



Hue / Saturation / Value

 閲覧数:641 投稿日: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要素範囲 / 最小値 ~ 最大値

 閲覧数:676 投稿日: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 360°
S 0 255
V 0 255



B.パーセンテージ


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


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


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





週間人気ページランキング / 8-7 → 8-13
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 8
2 Design 0 7
3 CSSトラブル対応(CSS) カテゴリー 3
3 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
4 「OOCSS」とは別の考え方? | 命名規則(コーディングルール) 2
4 Material Design 2014 年 | Material Design(色) 2
4 UI カテゴリー 2
4 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
4 G'MIC | GIMP 系(ソフトウェア) 2
4 img srcタグで、画像の上に文字 | 色 2
4 ソフトウェア カテゴリー 2
4 HTMLエディタ カテゴリー 2
4 三大「高クオリティ」「モックアップベクター素材」配布サイト 2
4 Chromeブックマーク(ブラウザ) カテゴリー 2
4 二次色(Secondary Color)とは? / アプリ内での色の使用 2
4 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 | Google Chrome(ブラウザ) 2
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1
5 モバイルデザイン7 / スマホ pc 広告 切り替え bootstrap | モバイルデザイン(デザイン) 1
5 Flexible box の縦方向中央揃えは、「vertical-align: middle;」ではなく「align-items: center;」 1
5 Krita | ソフトウェア 1
2026/8/14 5:05 更新