RGB ↔ HSV / HSB Converter
Convert between RGB and HSV (Hue, Saturation, Value — also called HSB for Hue, Saturation, Brightness). The HSV color model is used by the color pickers in Photoshop, Figma, and most design applications.
About RGB ↔ HSV / HSB Conversion
HSV (also called HSB — Hue, Saturation, Brightness) represents color as a point in a cylinder. Hue is the angle around the cylinder (the color wheel), saturation is the distance from the center axis (from gray to full color), and value/brightness is how far up or down you are (from black to full brightness).
RGB to HSV Formula
Normalize channels: \( r' = R/255,\ g' = G/255,\ b' = B/255 \). Let \( M = \max,\ m = \min,\ \delta = M - m \).
\[ V = M \]
\[ S = \begin{cases} 0 & M = 0 \\ \delta/M & \text{otherwise} \end{cases} \]
\[ H = \begin{cases} 0 & \delta = 0 \\ 60 \cdot \frac{g'-b'}{\delta} \bmod 360 & M = r' \\ 60 \cdot \left(\frac{b'-r'}{\delta}+2\right) & M = g' \\ 60 \cdot \left(\frac{r'-g'}{\delta}+4\right) & M = b' \end{cases} \]
HSV to RGB Formula
Given \( H \in [0°,360°] \), \( S,V \in [0,1] \):
\[ i = \lfloor H/60 \rfloor \bmod 6, \quad f = H/60 - \lfloor H/60 \rfloor \]
\[ p = V(1-S),\quad q = V(1-fS),\quad t = V(1-(1-f)S) \]
Then \((R,G,B)\) is selected from the set \(\{(V,t,p),(q,V,p),(p,V,t),(p,q,V),(t,p,V),(V,p,q)\}\) based on \( i \).
HSV vs. HSL
The key difference: in HSV, the pure hue always sits at \(V=1,\ S=1\) — adding white means reducing S, adding black means reducing V. In HSL, the pure hue is at \(L=0.5\) — white is \(L=1\) and black is \(L=0\) regardless of saturation.
Frequently Asked Questions
Is HSV the same as HSB?
Yes. HSV and HSB are identical — "Value" and "Brightness" are just two names for the same channel. Adobe applications use HSB, while the mathematical literature typically uses HSV.
Why is HSV common in color pickers but not in CSS?
HSV maps naturally to the visual layout of a two-dimensional color picker (hue on one axis, saturation and brightness on the other), making it intuitive for interactive UI. CSS chose HSL because it has a cleaner symmetry: 50% lightness is the pure hue for any saturation, which makes programmatic manipulation predictable.
Can HSV represent white?
Only by setting \(S=0\), which desaturates the color regardless of hue. White is \(S=0\%, V=100\%\); black is \(V=0\%\). This means hue is irrelevant for achromatic colors.