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

## How to use this tool

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`

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

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

#### Value in HSV

### RGB to HSL conversion

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

#### Hue in HSL

Same as HSV.

#### Lightness in HSL

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

#### 1. Converts hue of HSV

H is treated as 0 for 360; calculate the remainder by dividing H ÷ 60 by 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.

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

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

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