RGB

Red
Green
Blue

HSV

Hue
Saturation
Value

HSL

Hue
Saturation
Lightness
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Background:
HEX
RGB
HSV
HSL

Color Converter (RGB, HSV, HSL, HEX)

This is a tool to convert RGB, HSV and HSL to each other. RGB can also be converted to hexadecimal. There is also a calculation formula for the conversion.

  • You can also enter HEX in a 3-digit abbreviation.
    e.g. #3F9 -> #33FF99
  • Conversion from RGB to HSV and HSL is irreversible. Because RGB can express more colors and will be rounded during conversion.
    RGB: 256 x 256 x 256 = 16,777,216 ways
    HSV: 360 x 101 x 101 = 3,672,360 ways

How to convert from RGB to HSV

The maximum value of R, G, and B is MAX, and the minimum value is MIN.

MAX=max{R,G,B}MAX=\max \{ R, G, B \} MIN=min{R,G,B}MIN=\min \{ R, G, B \}

Hue

The calculation method changes depending on whether MAX is R, G, or B.

H={GBMAXMIN×60MAX=RBRMAXMIN×60+120MAX=GRGMAXMIN×60+240MAX=BH = \begin{cases} {\dfrac {G-B}{MAX-MIN}} \times 60 &\text{, } MAX=R \\ \\ {\dfrac {B-R}{MAX-MIN}} \times 60+120 &\text{, } MAX=G \\ \\ {\dfrac {R-G}{MAX-MIN}} \times 60+240 &\text{, } MAX=B \end{cases}

Saturation

S=MAXMINMAX×100S={\dfrac {MAX-MIN}{MAX}} \times 100

Value

S=MAX255×100S={\dfrac {MAX}{255}} \times 100

How to convert from RGB to HSL

The definitions of MAX and MIN are the same as HSV.

Hue

Same as HSV.

Lightness

L=MAX+MIN2×100255L={\dfrac {MAX+MIN}{2}} \times {\dfrac {100}{255}}

Saturation

The calculation method changes depending on the Lightness.

S={MAXMINMAX+MIN×1000L50MAXMIN510(MAX+MIN)×10051L100S = \begin{cases} {\dfrac {MAX-MIN}{MAX+MIN}} \times 100 &\text{, } 0 \leqq L \leqq 50 \\ \\ {\dfrac {MAX-MIN}{510-(MAX+MIN)}} \times 100 &\text{, } 51 \leqq L \leqq 100 \end{cases}

How to convert from HSV to RGB

HH is 0 for 360.

H={HH3600H=360H = \begin{cases} H &\text{, } H \neq 360 \\ 0 &\text{, } H = 360 \end{cases}

Find the remainder (= decimal part) by dividing H / 60 by 1.
e.g. When H is 90: 9060mod1=1.5mod1=0.5{\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5

H=H60mod1H'={\dfrac {H}{60}} \bmod 1

Convert S and V from percentages to decimals.

S=S100S'={\dfrac {S}{100}} V=V100V'={\dfrac {V}{100}}

The value of H determines the solution. The exception is achromatic color (S = 0).

A=V×255A=V' \times 255 B=V×(1S)×255B=V' \times (1-S') \times 255 C=V×(1S×H)×255C=V' \times (1-S' \times H') \times 255 D=V×(1S×(1H))×255D=V' \times (1-S' \times (1-H')) \times 255 (R,G,B)={(A,A,A)S=0(A,D,B)0H<60(C,A,B)60H<120(B,A,D)120H<180(B,C,A)180H<240(D,B,A)240H<300(A,B,C)300H<360(R,G,B) = \begin{cases} (A,A,A) &\text{, } S = 0 \\ (A,D,B) &\text{, } 0 \leqq H < 60 \\ (C,A,B) &\text{, } 60 \leqq H < 120 \\ (B,A,D) &\text{, } 120 \leqq H < 180 \\ (B,C,A) &\text{, } 180 \leqq H < 240 \\ (D,B,A) &\text{, } 240 \leqq H < 300 \\ (A,B,C) &\text{, } 300 \leqq H < 360 \end{cases}

How to convert from HSL to RGB

HH is 0 for 360.

H={HH3600H=360H = \begin{cases} H &\text{, } H \neq 360 \\ 0 &\text{, } H = 360 \end{cases}

Apply magic to L.

L={L0L<50100L50L100L' = \begin{cases} L &\text{, } 0 \leqq L < 50 \\ 100-L &\text{, } 50 \leqq L \leqq 100 \end{cases}

The value of H determines the solution.

MAX=2.55×(L+L×S100)MAX=2.55 \times (L+L' \times {\dfrac {S}{100}}) MIN=2.55×(LL×S100)MIN=2.55 \times (L-L' \times {\dfrac {S}{100}}) f(x)=x60×(MAXMIN)+MINf(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN (R,G,B)={(MAX, f(H), MIN)0H<60(f(120H), MAX, MIN)60H<120(MIN, MAX, f(H120))120H<180(MIN, f(240H), MAX)180H<240(f(H240), MIN, MAX)240H<300(MAX, MIN, f(360H))300H<360(R,G,B) = \begin{cases} (MAX,\ f(H),\ MIN) &\text{, } 0 \leqq H < 60 \\ (f(120 - H),\ MAX,\ MIN) &\text{, } 60 \leqq H < 120 \\ (MIN,\ MAX,\ f(H - 120)) &\text{, } 120 \leqq H < 180 \\ (MIN,\ f(240 - H),\ MAX) &\text{, } 180 \leqq H < 240 \\ (f(H - 240),\ MIN,\ MAX) &\text{, } 240 \leqq H < 300 \\ (MAX,\ MIN,\ f(360 - H)) &\text{, } 300 \leqq H < 360 \end{cases}

About Me

Hirota Yano / Programmer
Born in 1988, based in Japan

Languages

日本語 / English