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

How to use

This is a tool that converts between color codes (hexadecimal RGB) and decimal RGB, HSV, and HSL in the color space that runs in the browser.

• 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

Note: 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

RGB and HEX conversion formula

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

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

(1) Hue in HSV

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

For R: $H = {\dfrac {G-B}{MAX-MIN}} \times 60$

For G: $H = {\dfrac {B-R}{MAX-MIN}} \times 60+120$

For B: $H = {\dfrac {R-G}{MAX-MIN}} \times 60+240$

(2) Saturation in HSV

$$S={\dfrac {MAX-MIN}{MAX}} \times 100$$

(3) Value in HSV

$$S={\dfrac {MAX}{255}} \times 100$$

RGB to HSL conversion formula

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

(1) Hue in HSL

Same as HSV.

(2) Lightness in HSL

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

(3) Saturation in HSL

The formula changes with Lightness.

For $0 \leqq L \leqq 50$:

$S = {\dfrac {MAX-MIN}{MAX+MIN}} \times 100$

For $51 \leqq L \leqq 100$:

$S = {\dfrac {MAX-MIN}{510-(MAX+MIN)}} \times 100$

HSV to RGB conversion formula

(1) Converts hue of HSV

H is treated as 0 for 360; calculate the remainder by dividing H ÷ 60 by 1.

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

e.g. If H is 90: ${\dfrac {90}{60}} \bmod 1=1.5 \bmod 1=0.5$

(2) Converts saturation and Value of HSV

S and V are converted from percentages to decimals.

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

(3) Determines RGB according to the value of Hue in HSV

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$

Conditions	R	G	B
$S = 0$	A	A	A
$0 \leqq H < 60$	A	D	B
$60 \leqq H < 120$	C	A	B
$120 \leqq H < 180$	B	A	D
$180 \leqq H < 240$	B	C	A
$240 \leqq H < 300$	D	B	A
$300 \leqq H < 360$	A	B	C

HSL to RGB conversion formula

(1) Converts hue of HSL

For $H \neq 360$: $H = H$
For $H = 360$: $H = 0$

(2) Converts lightness of HSL

For $0 \leqq L < 50$: $L' = L$
For $50 \leqq L \leqq 100$: $L' = 100-L$

(3) Determines RGB according to the value of Hue in HSL

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

Conditions	R	G	B
$0 \leqq H < 60$	MAX	$f$(H)	MIN
$60 \leqq H < 120$	$f$(120 - H)	MAX	MIN
$120 \leqq H < 180$	MIN	MAX	$f$(H - 120)
$180 \leqq H < 240$	MIN	$f$(240 - H)	MAX
$240 \leqq H < 300$	$f$(H - 240)	MIN	MAX
$300 \leqq H < 360$	MAX	MIN	$f$(360 - H)