# T••LB•X: Color Converter

#

{{ errorMessage }}

R

G

B

C %

M %

Y %

K %

H º

S %

L %

H º

S %

V %

# How the conversion is calculated

## RGB to HEX

This one is the simplest. You just take the RGB values and convert the numbers to hexadecimal. The numbers have to be 2-digits long, so add a "0" on the left if it is shorter. For example 10 would be "0A" in hexadecimal. Then you concatenate the 3 2-digits numbers prepended by "#".

``````R=26 G=43 B=60
R="1a" G="2b" B="3c"
#1a2b3c``````

## HEX to RGB

Here the process is the opposite, you can discard the "#" and split the HEX code in 3 2-digits numbers. You convert each number from hexadecimal to decimal and you get your RGB values.

``````#1a2b3c
R="1a" G="2b" B="3c"
R=26 G=43 B=60``````

## RGB to CMYK

The basic process to translate RGB to CMYK or vice versa is that we consider that CMY are kind of the opposite of RGB. If you mix red and green RGB, you get yellow. If you mix yellow and magenta CMYK, you get red. And so on. This is roughly how we calculate it here on the application. The only extra factor is black: the K in CMYK. It exists for 2 reasons. The first reason is that mixing all cyan, magenta, and yellow inks don't give a very deep black. So the black layer compensate in the conversion. The other reason is that it is common to only print black, and you wouldn't want to have to mix 3 colors to get black.

Like I was saying though, this conversion is quite basic because it ends up with differences. Especially in saturation but not only. Indeed the hues are actually different in spite of the names being the same. But also because of things related to the print process. You cannot get fully saturated colors appart from primary colors. And we achieve lighter colors with halftone patterns. This affects color perception as well. This is why companies working on print-oriented softwares have created their own "profiles". That is to say other algorithms for converting colors including corrections.

``````R' = R / 255
G' = G / 255
B' = B / 255
MAX = max(R', G', B')
K = 1 - MAX
C = (1 - R' - K) / (1 - K)
M = (1 - G' - K) / (1 - K)
Y = (1 - B' - K) / (1 - K)``````

The CMYK values are numbers between 0 and 1 but in our application we convert them to percentages.

## CMYK to RGB

Here is how you do it the other way around. As you can see the main process gives numbers between 0 and 1. So part of the calculation is for converting them to numbers between 0 and 255. This is something you'll see in all the following conversions to RGB.

``````R = round( (1 - C) * (1 - K) * 255)
G = round( (1 - M) * (1 - K) * 255)
B = round( (1 - Y) * (1 - K) * 255)``````

## RGB to HSL

HSL is an interesting concept. Instead of using primary colors, we use 3 characteristics easier to relate to. These are hue (which color), saturation (how pure/intense the color is) and lightness (how dark or light the color is).

``````R' = R / 255
G' = G / 255
B' = B / 255
MAX = max(R', G', B')
MIN = min(R', G', B')
DELTA = MAX - MIN
if MAX == 0 or MIN == 1
S = 0
else
S = DELTA / (1 - abs(MAX + MIN - 1))
L = (MAX + MIN) / 2``````

Then calculation of H deserves its separate part:

``````if DELTA == 0
H = 0
else
if MAX == R'
H = 60 * ((G' - B') / DELTA)
else if MAX == G'
H = 60 * ((B' - R') / DELTA + 2)
else if MAX == B'
H = 60 * ((R' - G') / DELTA + 4)
if H < 0
H = H + 360``````

H is in degrees, thus between 0 and 360. S and L are numbers between 0 and 1 but in our application we convert them to percentages.

## HSL to RGB

Here is how you convert the other way around. We use intermediary values CHROMA, X and lowercase "m". Please note this last one has nothing to do with magenta in CMYK. I would have used another letter but this is what most other sources call it, so I kept it for consistency.

``````H' = H / 60
CHROMA = (1 - abs(2 * L - 1)) * S
X = CHROMA * (1 - abs(H' mod 2 - 1))
m = L - CHROMA / 2
if H' <= 1
R' = CHROMA + m
G' = X + m
B' = 0 + m
else if H' <= 2
R' = X + m
G' = CHROMA + m
B' = 0 + m
else if H' <= 3
R' = 0 + m
G' = CHROMA + m
B' = X + m
else if H' <= 4
R' = 0 + m
G' = X + m
B' = CHROMA + m
else if H' <= 5
R' = X + m
G' = 0 + m
B' = CHROMA + m
else if H' <= 6
R' = CHROMA + m
G' = 0 + m
B' = X + m
R = round(R' * 255)
G = round(G' * 255)
B = round(B' * 255)``````

## RGB to HSV

It is similar to the conversion to HSL except that the calculation of S and V (instead of L) are slightly different.

``````R' = R / 255
G' = G / 255
B' = B / 255
MAX = max(R', G', B')
MIN = min(R', G', B')
DELTA = MAX - MIN
if MAX == 0
S = 0
else
S = (MAX - MIN) / MAX;
V = MAX``````

Then calculation of H is exactly like for HSL.

``````if DELTA == 0
H = 0
else
if MAX == R'
H = 60 * ((G' - B') / DELTA)
else if MAX == G'
H = 60 * ((B' - R') / DELTA + 2)
else if MAX == B'
H = 60 * ((R' - G') / DELTA + 4)
if H < 0
H = H + 360``````

H is in degrees, thus between 0 and 360. S and V are numbers between 0 and 1 but in our application we convert them to percentages.

## HSV to RGB

Again very similar to how you convert from HSL. There is a different calculation for the CHROMA and the value of lowercase "m". Everything else is the same.

``````H' = H / 60
CHROMA = V * S
X = CHROMA * (1 - abs(H' mod 2 - 1))
m = V - CHROMA
if H' <= 1
R' = CHROMA + m
G' = X + m
B' = 0 + m
else if H' <= 2
R' = X + m
G' = CHROMA + m
B' = 0 + m
else if H' <= 3
R' = 0 + m
G' = CHROMA + m
B' = X + m
else if H' <= 4
R' = 0 + m
G' = X + m
B' = CHROMA + m
else if H' <= 5
R' = X + m
G' = 0 + m
B' = CHROMA + m
else if H' <= 6
R' = CHROMA + m
G' = 0 + m
B' = X + m
R = round(R' * 255)
G = round(G' * 255)
B = round(B' * 255)``````