HSV

This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet as we cannot guarantee the safety of other websites.

For more information, see HSL and HSV on Wikipedia.

HSV is an alternative representation of the RGB color model using a cylindrical coordinate system. HSV stands for hue, saturation, and value. In the cylindrical coordinate system that wraps around an axis, these correspond to the angle around the axis, distance away from the axis, and distance along the axis, respectively.

Usage in Scratch

The color picker in the paint editor

HSV is found in Scratch in a few places. Scratch uses the term color to refer to hue and brightness to refer to value.

• In the paint editor and block color inputs, three sliders are used to set a color, with a range of 0-100.
• The Set Pen () to () block uses HSV in the range 0-100.
• The sprite color effect is hue in a range of 0-200.

Formulas

The formulas shown are for $0\le H<360$, $0\le S\le 1$, $0\le V\le 1$

HSV to RGB

$C=VS$

$X=C(1-|\frac{H}{60^{\circ }}mod2-1|)$

$m=V-C$

$(R^{\prime },G^{\prime },B^{\prime })=\{\begin{array}{ll}(C,X,0)& 0^{\circ }\le H<60^{\circ }\\ (X,C,0)& 60^{\circ }\le H<120^{\circ }\\ (0,C,X)& 120^{\circ }\le H<180^{\circ }\\ (0,X,C)& 180^{\circ }\le H<240^{\circ }\\ (X,0,C)& 240^{\circ }\le H<300^{\circ }\\ (C,0,X)& 300^{\circ }\le H<360^{\circ }\end{array}$

$(R,G,B)=(255(R^{\prime }+m),255(G^{\prime }+m),255(B^{\prime }+m))$

The following Scratch code implements it with all values in the range [0-1) (easy to modify to suit a desired range such as 0-255):

define HSV to RGB (h) (s) (v)
set [hue v] to (((h) mod (1)) * (6)) // remap h to [0,6)
if <(hue) < [3]> then
  if <(hue) < [1]> then
    set [r v] to (v)
    set [g v] to ((v) * ((1) - ((s) * ((1) - ((hue) mod (1))))))
    set [b v] to ((v) * ((1) - (s)))
  else
    if <(hue) < [2]> then
      set [r v] to ((v) * ((1) - ((s) * ((hue) mod (1)))))
      set [g v] to (v)
      set [b v] to ((v) * ((1) - (s)))
    else
      set [r v] to ((v) * ((1) - (s)))
      set [g v] to (v)
      set [b v] to ((v) * ((1) - ((s) * ((1) - ((hue) mod (1))))))
    end
  end
else
  if <(hue) < [4]> then
    set [r v] to ((v) * ((1) - (s)))
    set [g v] to ((v) * ((1) - ((s) * ((hue) mod (1)))))
    set [b v] to (v)
  else
    if <(hue) < [5]> then
      set [r v] to ((v) * ((1) - ((s) * ((1) - ((hue) mod (1))))))
      set [g v] to ((v) * ((1) - (s)))
      set [b v] to (v)
    else
      set [r v] to (v)
      set [g v] to ((v) * ((1) - (s)))
      set [b v] to ((v) * ((1) - ((s) * ((hue) mod (1)))))
    end
  end
end

RGB to HSV

$R^{\prime }=\frac{R}{255}$

$G^{\prime }=\frac{G}{255}$

$B^{\prime }=\frac{B}{255}$

$Cmax=\max (R^{\prime },G^{\prime },B^{\prime })$

$Cmin=\min (R^{\prime },G^{\prime },B^{\prime })$

$\mathrm{\Delta }=Cmax-Cmin$

$H=\{\begin{array}{ll}{0}^{\circ }& \mathrm{\Delta }=0\\ 60^{\circ }(\frac{G^{\prime }-B^{\prime }}{\mathrm{\Delta }}mod6)& Cmax=R^{\prime }\\ 60^{\circ }(\frac{B^{\prime }-R^{\prime }}{\mathrm{\Delta }}+2)& Cmax=G^{\prime }\\ 60^{\circ }(\frac{R^{\prime }-G^{\prime }}{\mathrm{\Delta }}+4)& Cmax=B^{\prime }\end{array}$

$S=\{\begin{array}{ll}0& Cmax=0\\ \frac{\mathrm{\Delta }}{Cmax}& Cmax=0\end{array}$

$V=Cmax$

The following Scratch code implements it with all values in the range [0-1) (easy to modify to suit a desired range such as 0-255):

define RGB to HSV (r) (g) (b)
if <(r) < (b)> then
  if <(r) < (g)> then
    if <(g) < (b)> then
      set [c min v] to (r)
      set [c max v] to (b)
    else
      set [c min v] to (r)
      set [c max v] to (g)
    end
  else
    set [c min v] to (g)
    set [c max v] to (b)
  end
else
  if <(g) < (b)> then
    set [c min v] to (g)
    set [c max v] to (r)
  else
    if <(r) < (g)> then
      set [c min v] to (b)
      set [c max v] to (g)
    else
      set [c min v] to (b)
      set [c max v] to (r)
    end
  end
end
set [diff v] to ((c max)-(c min))
if <(diff) = [0]> then // greyscale
  set [h v] to [0]
  set [s v] to [0]
else
  if <(r) = (c max)> then
    set [h v] to (((((g) - (b)) / (diff)) / (6)) mod (1))
  else
    if <(g) = (v)> then
      set [h v] to ((((2) + (((b) - (r)) / (diff))) / (6)) mod (1))
    else
      set [h v] to ((((4) + (((r) - (g)) / (diff))) / (6)) mod (1))
    end
  end
  set [s v] to ((diff)/(c max))
end
set [v v] to (c max)

Example Projects

• HSV/RGB converter by awesome-llama-test — HSV to RGB and RGB to HSV, using ranges of 0.0-1.0. Outputs to 3 variables.
• RGB⇔HSV by Syorirewan — HSV to RGB and RGB to HSV, using ranges of 0-255. Outputs to 3 variables.
• rgb2hsv by Spentinium — RGB to HSV. Outputs to 3 variables.
• hsv2rgb by Spentinium — HSV to RGB. Outputs a number 0-16777215.