Color Converter (RGB, HSV, HSL, HEX)

日本語 / English

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

Posted on 2018-01-28

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 \}

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

Hue

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

H = \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={\dfrac {MAX-MIN}{MAX}} \times 100

Value

S={\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={\dfrac {MAX+MIN}{2}} \times {\dfrac {100}{255}}

Saturation

The calculation method changes depending on the Lightness.

S = \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

$H$ is 0 for 360.

H = \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: ${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

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

Convert S and V from percentages to decimals.

S'={\dfrac {S}{100}}

V'={\dfrac {V}{100}}

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

A=V' \times 255

B=V' \times (1-S') \times 255

C=V' \times (1-S' \times H') \times 255

D=V' \times (1-S' \times (1-H')) \times 255

(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

$H$ is 0 for 360.

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

Apply magic to L.

L' = \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 \times (L+L' \times {\dfrac {S}{100}})

MIN=2.55 \times (L-L' \times {\dfrac {S}{100}})

f(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN

(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}

Red
Green
Blue