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:

RGB (DEC/HEX)

Red
Green
Blue

HSV

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=GBMAXMIN×60H = {\dfrac {G-B}{MAX-MIN}} \times 60

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

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

Saturation in HSV

S=MAXMINMAX×100S={\dfrac {MAX-MIN}{MAX}} \times 100

Value in HSV

S=MAX255×100S={\dfrac {MAX}{255}} \times 100

RGB to HSL conversion formula

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

Hue in HSL

Same as HSV.

Lightness in HSL

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

Saturation in HSL

The formula changes with Lightness.

For 0L500 \leqq L \leqq 50:

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

For 51L10051 \leqq L \leqq 100:

S=MAXMIN510(MAX+MIN)×100S = {\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=H60mod1H'={\dfrac {H}{60}} \bmod 1

e.g. If H is 90: 9060mod1=1.5mod1=0.5{\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=S100S'={\dfrac {S}{100}}
V=V100V'={\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×255A=V' \times 255
B=V×(1S)×255B=V' \times (1-S') \times 255
C=V×(1S×H)×255C=V' \times (1-S' \times H') \times 255
D=V×(1S×(1H))×255D=V' \times (1-S' \times (1-H')) \times 255

Conditions R G B
S=0S = 0 A A A
0H<600 \leqq H < 60 A D B
60H<12060 \leqq H < 120 C A B
120H<180120 \leqq H < 180 B A D
180H<240180 \leqq H < 240 B C A
240H<300240 \leqq H < 300 D B A
300H<360300 \leqq H < 360 A B C

HSL to RGB conversion formula

1. Converts hue of HSL

HH shall be 0 for 360.

H360H \neq 360の場合:H=HH = H
H=360H = 360の場合:H=0H = 0

2. Converts lightness of HSL

Cast a spell on L.

For 0L<500 \leqq L < 50: L=LL' = L
For 50L10050 \leqq L \leqq 100: L=100LL' = 100-L

3. Determines RGB according to the value of Hue in HSL

MAX=2.55×(L+L×S100)MAX=2.55 \times (L+L' \times {\dfrac {S}{100}})
MIN=2.55×(LL×S100)MIN=2.55 \times (L-L' \times {\dfrac {S}{100}})
f(x)=x60×(MAXMIN)+MINf(x)={\dfrac {x}{60}} \times (MAX-MIN)+MIN
Conditions R G B
0H<600 \leqq H < 60 MAX ff(H) MIN
60H<12060 \leqq H < 120 ff(120 - H) MAX MIN
120H<180120 \leqq H < 180 MIN MAX ff(H - 120)
180H<240180 \leqq H < 240 MIN ff(240 - H) MAX
240H<300240 \leqq H < 300 ff(H - 240) MIN MAX
300H<360300 \leqq H < 360 MAX MIN ff(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.
© Hirota Yano