HSV / HSB 色空間

HSV 色空間

HSV あるいは HSB と呼ばれる色空間のモデルには円錐形状あるいは円筒形状の2種類が存在する。HSV あるいは HSB 色空間は、3つのパラメータにより特徴づけられる。

パラメータ

• 色相 (Hue)
• 彩度 (Saturation)
• 明度 (Value / Brightness)

円錐型

（出典：Wikipedia ）

円筒型

（出典：Wikipedia ）

参考：

HSV 色空間 – Wikipedia

概要

参考：

HSB カラーモデル | 基礎からわかるホームページの配色

HSB 値と輝度の求め方 | osakana.factory

Blackness and Brilliance | The Dimensions of Colour

円錐モデルと円筒モデルの違い

彩度の計算式が異なる。

• 円錐モデル： s = max(r, g, b) - min(r, g, b)
• 円筒モデル： s = (max(r, g, b) - min(r, g, b)) / max(r, g, b)

円錐モデルは RGB 各輝度の最大値と最小値の差分であるのに対して、円筒モデルは差分を最大値で割っている。

参考：

彩度マスクの結果の違い／結局どっちがベスト？ | さとぅ

HSV から RGB への変換を GLSL で実装する – Qiita

計算式

Python で円筒モデルの rgb2hsv 関数を実装すると次のようになる。

def rgb2hsv(rgb):
    r, g, b = rgb

    v = max(r, g, b)
    d = v - min(r, g, b)

    if v <= 0.0:
        h = 0
    elif r >= v:
        h = ((g - b) / d + 0.0) / 6.0
    elif g >= v:
        h = ((b - r) / d + 2.0) / 6.0
    else:
        h = ((r - g) / d + 4.0) / 6.0

    h = math.fmod(h + 1.0, 1.0)
    s = d / v

    return [h, s, v]Code language: Python (python)

参考：

色相／彩度／明度の公式 | イメージングソリューション

HSB 値と輝度の求め方 | osakana.factory

RGB と HSV / HSB の相互変換ツールと変換計算式 | PEKO STEP

Sass で色空間 HSB を扱う関数を作った話 | アライドアーキテクツのクリエイターブログ

色相

参考：

HSB の色相 | 基礎からわかるホームページの配色

JavaScript

参考：

RGB HSV HSL 相互変換 – Qiita

RGB HSV 相互変換 1ステートメント版 – Qiita

JavaScript で RGB を HSV に変換する方法 | SYNCER

Increase or decrease color saturation – Stack Overflow

GLSL

コード：

Optimised Hue Shift Function in GLSL (mairod) – GitHub Gist

参考：

HSV から RGB への変換を GLSL で実装する – Qiita

hsv2rgb を完全に理解した話 (TouchDesigner) | Continue(s)

Saturation and Hue in GLSL – Khronos Forums

How to change hue of a texture with GLSL? – Stack Overflow

オンラインツール

RGB と HSV／HSB の相互変換ツールと変換計算式 | PEKO STEP

RGBとHSVの相互変換 | プチモンテ

HSB | tomari

RGB / HSV スポイト – 画像から色を取得 | 矢野ヒロタ

Windows

（出典：Microsoft Docs）

ドキュメント：

HSV 色空間 | Microsoft Docs [公式]

参考：

色相、彩度、明度の公式 | イメージングソリューション

HSB の色相 | 基礎からわかるホームページの配色

Windows でのHSB | 基礎からわかるホームページの配色

PHP

ドキュメント：

ImagickPixel::getHSL | PHP Manual [公式]

参考：

PHP で HSV を RGB に変換する方法 | SYNCER

PHP で RGB を HSV に変換する方法 | SYNCER

PHP で RGB / HSV 変換 | demouth::blog

RGB to HSV in PHP – Stack Overflow

PyTorch

リポジトリ：

limacv/RGB_HSV_HSL: a Pure PyTorch Implementation of Color Space Conversion, including rgb2hsl, rgb2hsv, hsv2rgb, hsl2rgb – GitHub

Color Picker ユーティリティ

「PowerToys」に含まれる。

入手：

PowerToys | Microsoft Store アプリ [公式]

リポジトリ：

microsoft/PowerToys: Windows System Utilities to Maximize Productivity – GitHub

ドキュメント：

Color Picker ユーティリティ – PowerToys | Microsoft Learn [公式]

参考：

PowerToys のインストール | Microsoft Docs [公式]