Hirota Yano

RGB / HEX / HSV / HSL converter

  • You can also enter HEX in a 3-digit abbreviation.
    e.g. #3F9 -> #33FF99
日本語 / English

HEX

RGB

HSV

HSL

RGB

Red
Green
Blue

HSV

Hue
Saturation
Value

HSL

Hue
Saturation
Lightness

PREVIEW

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
BG
* 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={G−BMAX−MIN×60, MAX=RB−RMAX−MIN×60+120, MAX=GR−GMAX−MIN×60+240, MAX=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=MAX−MINMAX×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={MAX−MINMAX+MIN×100, 0≦L≦50MAX−MIN510−(MAX+MIN)×100, 51≦L≦100S = \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={H, H≠3600, H=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: 9060 mod 1=1.5 mod 1=0.5{\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5

H′=H60 mod 1H'={\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′×(1−S′)×255B=V' \times (1-S') \times 255 C=V′×(1−S′×H′)×255C=V' \times (1-S' \times H') \times 255 D=V′×(1−S′×(1−H′))×255D=V' \times (1-S' \times (1-H')) \times 255 (R,G,B)={(A,A,A), S=0(A,D,B), 0≦H<60(C,A,B), 60≦H<120(B,A,D), 120≦H<180(B,C,A), 180≦H<240(D,B,A), 240≦H<300(A,B,C), 300≦H<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={H, H≠3600, H=360H = \begin{cases} H &\text{, } H \neq 360 \\ 0 &\text{, } H = 360 \end{cases}

Apply magic to L.

L′={L, 0≦L<50100−L, 50≦L≦100L' = \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×(L−L′×S100)MIN=2.55 \times (L-L' \times {\dfrac {S}{100}}) f(x)=x60×(MAX−MIN)+MINf(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN (R,G,B)={(MAX, f(H), MIN), 0≦H<60(f(120−H), MAX, MIN), 60≦H<120(MIN, MAX, f(H−120)), 120≦H<180(MIN, f(240−H), MAX), 180≦H<240(f(H−240), MIN, MAX), 240≦H<300(MAX, MIN, f(360−H)), 300≦H<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}