RGB → HSL / RGB → HSV

色変換

色相Hへの変換

 状態:-  閲覧数:3,670  投稿日:2016-06-20  更新日:2016-06-21
「HSL / HSV」何れにも同じ計算式を適用
何を基準とするかでその内容は大きく2つに分かれる


彩度Sへの変換


「HSL / HSV」それぞれ異なる計算式を適用
・円柱モデルと円推モデルが存在


明度LVへの変換


「HSL / HSV」それぞれ異なる計算式を適用
・円柱モデルと円推モデルが存在

彩度Sへの変換

 閲覧数:640 投稿日:2016-06-21 更新日:2016-06-21

HSL


円柱モデル方式
彩度:S=(Max-Min)/(1-|Max+Min-1|)

双円錐モデル方式
彩度:S=Max-Min


HSV


円柱モデル方式
彩度:S=(Max-Min)/Max

単円錐モデル方式
彩度:S=Max-Min


明度LVへの変換

 閲覧数:634 投稿日:2016-06-21 更新日:2016-07-15

HSL


円柱モデル方式
明度:L=(Max+Min)/2

双円錐モデル方式
明度:L=(Max+Min)/2


HSV


円柱モデル方式
明度:V=Max

単円錐モデル方式
明度:V=Max


円推モデルと円柱モデルがあるため、HSL/HSV合わせると全部で4種類の計算方式が存在
HSVの拡張 ( プログラム )
カラーモデル


RGB → 彩度S 計算方式の違い

HSL → RGB 計算方式の違い



週間人気ページランキング / 4-29 → 5-5
順位 ページタイトル抜粋 アクセス数
1 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 11
2 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 9
3 RGBの種類 / ビットカラー | RGB(色) 6
4 RGB ⇔ Lab | 色変換(色) 4
4 画像縦横比の問題 | 画像 4
4 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
4 ログイン 4
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
5 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
5 Adobe Camera Raw 4.0 | Photoshop 3
5 Material Design 2014 年 | Material Design(色) 3
5 Design 0 3
6 RGB | 色 2
6 問題発生 / 方法は2種類 / CSS対応時の注意点 2
6 謎の現象 / 「Photoshop CS」と「Photoshop CCでは」では扱いが異なる /「PhotoShop CS3」で「Camera Raw 4.0」を起動するには? 2
6 SVG(画像) カテゴリー 2
6 #0000CDは群青色ではない? | 色 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 ICCプロファイル | カラーマネージメント(色) 2
6 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい | Brave(ブラウザ) 2
2026/5/6 5:06 更新