Color Converter (RGB, HEX, HSV, HSL) / Tool

This is a tool to convert between RGB, HSV, and HSL color spaces, and the formula for the conversion.

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Background Color:

RGB (DEC/HEX)

Red

Green

Blue

HSV

Hue

Saturation

Value

HSL

Hue

Saturation

Lightness

2018-01-28

How to use this tool

Input RGB, HEX, HSV, or HSL. The output will be automatically converted to each other.
HEX can also be entered as a 3-digit abbreviation.
e.g. #3F9 → #33FF99
The background color of the preview can be changed in HEX.
Conversion between RGB and HSV/HSL is irreversible^(*).

(*) Since the number of colors that can be represented is different between RGB and HSV/HSL, they are rounded off during conversion and cannot be accurately restored.
RGB: 256 × 256 × 256 = 16,777,216 patterns
HSV: 360 x 101 x 101 = 3,672,360 patterns

Color space conversion methods and formulas

RGB and HEX conversion (decimal to hexadecimal)

RGB represents each color in 256 steps from 0 to 255 (= 8 bits). Therefore, RGB is compatible with hexadecimal numbers, and software often uses hexadecimal numbers for representation.

In hexadecimal, colors are represented by adding # at the beginning, followed by 00 to FF (two hexadecimal digits) for red, green, and blue, in that order.

#FF9933 = rgb(255, 153, 51)

In addition, hexadecimal color codes can be specified as three-digit abbreviations in CSS and other formats.

#FF9933 = #F93

A total of six digits, two digits for each color, is abbreviated to three digits, one digit for each color, and can be used only when each digit is repeated twice.

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 formula 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

RGB to HSL

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

Hue

Same as HSV.

Lightness

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

Saturation

The formula changes with 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}

HSV to RGB

$H$ shall be 0 for 360.

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

Calculate the remainder (= decimal part) of H / 60 divided by 1.
e.g. If H is 90: ${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

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

S and V are converted from percentages to decimals.

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

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

With the exception of achromatic (S = 0), the solution is determined by the value of H.

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}

HSL to RGB

$H$ shall be 0 for 360.

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

Cast a spell on L.

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

The solution is determined by the value of H.

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}