JP
/
EN

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

## Preview

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

Red
Green
Blue

Hue
Saturation
Value

## HSL

Hue
Saturation
Lightness

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.

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

### Saturation in HSV

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

### 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.

Same as HSV.

### Lightness in HSL

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

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

$H$ shall be 0 for 360.

$H \neq 360$の場合：$H = H$
$H = 360$の場合：$H = 0$

### 2. Converts lightness of HSL

Cast a spell on L.

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)
Hirota Yano / Japan / Programmer
I am publishing a web tool I created as a hobby. It is free of charge, so please feel free to use it.