HSV → RGB 計算方式の違い

色変換

計算方式の違い

 状態:-  閲覧数:2,725  投稿日:2016-06-29  更新日:2016-07-02
1.色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255
2.色相H0°~360°、彩度S0%~100%、明度V0%~100%
3.色相H0°~360°、彩度S0~255、明度V0~255
4.色相H0°~360°、彩度S0~1、明度V0~1

方式1.色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255

 閲覧数:622 投稿日:2016-06-29 更新日:2016-07-01

計算手順


1-1.RGB最大値 と RGB最小値 を求める
1-2.RGB値 を求める


1-1.RGB最大値 と RGB最小値 を求める


S・Vの範囲が0~255の場合
最大値 MAX = V
最小値 MIN = MAX - ((S ÷ 255) × MAX)


1-2.RGB値 を求める


Hが0~60未満の場合
・R = MAX
・G = (H ÷ 60) × (MAX - MIN) + MIN
・B = MIN

Hが60以上~120未満の場合
・R = ((120 - H) ÷ 60) × (MAX - MIN) + MIN
・G = MAX
・B = MIN

Hが120以上~180未満の場合
・R = MIN
・G = MAX
・B = ((H - 120) ÷ 60) × (MAX - MIN) + MIN

Hが180以上~240未満の場合
・R = MIN
・G = ((240 - H) ÷ 60) × (MAX - MIN) + MIN
・B = MAX

Hが240以上~300未満の場合
・R = ((H - 240) ÷ 60) × (MAX - MIN) + MIN
・G = MIN
・B = MAX

Hが300以上~360未満の場合
・R = MAX
・G = MIN
・B = ((360 - H) ÷ 60) × (MAX - MIN) + MIN

計算方式の違い具体例

 閲覧数:658 投稿日:2016-06-29 更新日:2016-07-04

方式1


色相H0°~360°、彩度S0%~100%または0~255、明度V0%~100%または0~255
コード 引数 内容 戻り値
JS なし RGB ⇔ HSV 1 なし


方式2


色相H0°~360°、彩度S0%~100%、明度V0%~100%
コード 引数 内容 戻り値
JS 整数 RGB ⇔ HSV 2 オブジェクト
JS プリミティブ マウスでクリックすると、セピア画像へ変換 配列
JS プリミティブ マウスで画像をクリックすると、青写真風へ変換 配列
JS オブジェクト HEX ⇔ RBGA ⇔ CMYK ⇔ HSV ⇔ HSL ⇔ LAB オブジェクト
JS 配列 HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB 配列
JS オブジェクト i-color オブジェクト
※整数IntegerはNumberプリミティブの一種


方式3


色相H0°~360°、彩度S0~255、明度V0~255
コード 引数 内容 戻り値
JS Numberプリミティブ RGB ⇔ HSV 3 オブジェクト
PHP 配列 RGB ⇔ HSV 2 配列


方式4


色相H0°~360°、彩度S0~1、明度V0~1
コード 引数 内容 戻り値
JS なし 表色系の相互変換 なし
JS なし Chroma.js 配列


最終的に


HSV → RGB 参考にするなら
・JS / RGB ⇔ HSV 2
※minは不要

一番コードがスッキリしているのは?
・HEX ⇔ RBGA ⇔ CMYK ⇔ XYZ ⇔ HSV ⇔ HSL ⇔ LAB
※「引数」も「戻り値」も配列


HSL → RGB 計算方式の違い

色変換コード / 確認用



週間人気ページランキング / 2-20 → 2-26
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 18
2 「bgcolor」「background-color」「background」の違い | CSS 5
2 RGBの種類 / ビットカラー | RGB(色) 5
2 RGB ⇔ Lab | 色変換(色) 5
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
4 画像縦横比の問題 | 画像 3
4 効果を打ち消すスタイルシート | CSS 3
4 色モデルイメージ図 | 色変換(色) 3
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
4 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
5 画面キャプチャ 2022 年 | Chrome 拡張機能 2
5 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 2
5 フォントアイコン表示不具合の原因は重複読込+α | フォント 2
5 「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法 2
5 Chrome ブラウザで画像の DataURI を取得 | Google Chrome(ブラウザ) 2
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
5 「レイヤー」+「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
5 「Fireworks」後継として「Gravit Designer」を使用していくことを一度は決定したが、2022 年時点で入手可能なソフトウェアは日本語入力未対応  | Gravit Designer(ソフトウェア) 2
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
2026/2/27 5:05 更新