**Color Code Converter**

Hex (#): | ||||

| , | , | ||

| º, | %, | % | |

| º, | % | % | |

| º, | % | % | |

| %, | %, | % | % |

| ||||

### Overview

**What is a Color space ?**

A color space is a method by which we can specify, create and visualize color. We can define a color by its attributes of brightness, hue and colorfulness. A color thus can be specified based on these three parameters. These parameters describe the position of the color within the color space being used.

##### Types of color spaces:

**RGB (Red Green Blue):** This is an additive color system based on tri-chromatic theory in which red, green, and blue light are brought together to reproduce a large array of colors. It is often found in electronic systems used for sensing, representation, and display of images such as computers, television, video etc. It is device dependent and specification of colors is semi–intuitive.

The red, green and blue use 8 bits each, which have integer values from 0 to 255. So the number of colors that can be generated is:

### 256×256×256 = 16777216 = 1000000_{16}

**HSL (Hue Saturation and Lightness) / HSV (Hue Saturation and Value) :** These are linear transforms from RGB and are therefore device dependent and non–linear. These are mainly used in applications such as image processing.

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.

Lightness / Value is also a percentage; 0% is black, 100% is white.

**CMYK (Cyan Magenta Yellow Black): **It is used in printing and for hard copy output. It is very device dependent with the type of inks and paper used as well as the type of printing device.

**Hex Code : **A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. the six-digit hexadecimal representation of color of the form #RRGGBB, where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation.

Hex color code is a 6 digits hexadecimal (base 16) number:

### RRGGBB_{16}

### How to convert

### 1) Hex to RGB conversion:

Hex color code is a 6 digits hexadecimal (base 16) number: RRGGBB_{16}

To convert a 6-digit hex code to an RGB triple, first break up the hexadecimal number into three 2-digit numbers. Convert each of these base-16 numbers to their base-10 equivalents.

**Example** – Convert hex color code 00FF00 to RGB color :

##### R = 00_{16} = 0_{10}

##### G = FF_{16} = 255_{10}

##### B = 00_{16} = 0_{10}

##### RGB = (0, 255, 0)

### 2) RGB to Hex conversion :

To convert an RGB triple to a single hex value, you need to convert each of the three base-10 numbers to a base-16 number, then concatenate the three hex values.

**Example** – Convert (25, 26, 100) to hex color code:

##### R = 25_{10} = 19_{16}

##### G = 26_{10} = 1A_{16}

##### B = 100_{10} = 64_{16}

##### Hex Code= 191A64

### 3) RGB to HSV conversion :

Given three numbers R, G, and B (each between 0 and 255), first define m and M as follows:

M = max{R, G, B}

m = min{R, G, B}

Hue calculation :

H = cos^{-1}[ (R – ½G – ½B)/√R² + G² + B² – RG – RB – GB ] if G ≥ B,

H = 360 – cos^{-1}[ (R – ½G – ½B)/√R² + G² + B² – RG – RB – GB ] if B > G.

where Inverse cosine is calculated in degrees

Value calculation :

V = M / 255

Saturation calculation :

S = 1 – m/M if M > 0

S = 0 if M = 0

**Example** – Convert (0, 199, 140) to HSV code :

H = 162 º, S = 100%, V = 78%

### 4) HSV to RGB conversion :

Given the values of H, S, and V, compute m and M using following :

M = 255 * V

m = M * (1-S)

z = (M-m)[1 – |(H/60)mod_2 – 1|],

where mod_2 means division modulo 2. For example, if H = 135, then (H/60)mod_2 = (2.25)mod_2 = 0.25. In modulo 2 division, the output is the remainder of the quantity when divided by 2

Cases to calculate R,G,B:

If 0 ≤ H < 60

R = M

G = z + m

B = m.

If 60 ≤ H < 120,

R = z + m

G = M

B = m.

If 120 ≤ H < 180,

R = m

G = M

B = z + m.

When 180 ≤ H < 240,

R = m

G = z + m

B = M.

When 240 ≤ H < 300,

R = z + m

G = m

B = M.

And if 300 ≤ H < 360,

R = M

G = m

B = z + m.

**Example** – Convert HSV (177, 99, 77) to RGB code :

R = 1, G = 197, B = 187

### 5) RGB to HSL conversion :

Given three numbers R, G, and B (each between 0 and 255), first define M, m, and d with the relations:

M = max{R, G, B}

m = min{R, G, B}

d = (M – m) / 255

Hue calculation :

H = cos^{-1}[ (R – ½G – ½B)/√R² + G² + B² – RG – RB – GB ] if G ≥ B,

H = 360 – cos^{-1}[ (R – ½G – ½B)/√R² + G² + B² – RG – RB – GB ] if B > G,

where the cos-1 is in degrees,

Lightness Calculation:

L = [½(M + m)] / 255 = (M + m) / 510

Saturation Calculation:

S = d / [1 – |2L-1|] if L > 0

S = 0 if L = 0.

**Example** – Convert (1, 197, 157) to HSL code:

H = 168 º, S = 99%, L = 39%

### 6) HSL to RGB conversion :

Given the values of H, S, and L, compute d and m with the relations :

d = S * (1 – |2L-1|)

m = 255 * (L – ½d)

x = d * [1 – |(H/60)mod_2 – 1|],

where mod_2 means division modulo 2. For example, if H = 213, then (H/60)mod_2 = (3.55)mod_2 = 1.55. Modulo 2 division returns the remainder of the quantity when you divide it by 2.

Find the values of R, G, and B according to the angle range of H.

If 0 ≤ H < 60,

R = 255d + m

G = 255x + m

B = m

If 60 ≤ H < 120,

R = 255x + m

G = 255d + m

B = m

If 120 ≤ H < 180,

R = m

G = 255d + m

B = 255x + m

When 180 ≤ H < 240,

R = m

G = 255x + m

B = 255d + m

When 240 ≤ H < 300,

R = 255x + m

G = m

B = 255d + m

And if 300 ≤ H < 360,

R = 255d + m

G = m

B = 255x + m

**Example** – Convert HSL (177, 99, 77) to RGB code

R = 138, G = 254, B = 248

### 7) RGB to CMYK conversion :

Given three numbers R, G, and B (each between 0 and 255), first define d with the relation:

d = 1 – (max(R, G, B) / 255)

Cyan calculation :

C = (1 – R’- d) / (1- d) where R’ = R / 255

Magenta calculation :

M = (1 – G’- d) / (1- d) where G’= G / 255

Yellow calculation :

Y = (1 – B’- d) / (1- d) where B’= B / 255

Black calculation :

K = d

**Example** – Convert (112, 228, 56) to CMYK code

C = 51%, M = 0%, Y = 75%, K = 11%

### 8) CMYK to RGB conversion:

Given the values of C, M,Y and K, compute R, G, B with the relations :

R = 255 * (1-C) * (1-K)

G = 255 * (1-M) * (1-K)

B = 255 * (1-Y) * (1-K)

**Example** – Convert CMYK (61, 10, 0, 1) to RGB code

R = 100, G = 228, B = 253

### Color Code Chart

Color | Colorname | Hex | (R,G,B) | (H,S,V) | (H,S,L) |

Black | #000000 | (0,0,0) | (0º,0%,0%) | (0º,0%,0%) | |

White | #FFFFFF | (255,255,255) | (0º,0%,100%) | (0º,0%,100%) | |

Red | #FF0000 | (255,0,0) | (0º,100%,100%) | (0º,100%,50%) | |

Lime | #00FF00 | (0,255,0) | (120º,100%,100%) | (120º,100%,50%) | |

Blue | #0000FF | (0,0,255) | (240º,100%,100%) | (240º,100%,50%) | |

Yellow | #FFFF00 | (255,255,0) | (60º,100%,100%) | (60º,100%,50%) | |

Cyan | #00FFFF | (0,255,255) | (180º,100%,100%) | (180º,100%,50%) | |

Magenta | #FF00FF | (255,0,255) | (300º,100%,100%) | (300º,100%,50%) | |

Silver | #C0C0C0 | (192,192,192) | (0º,0%,75%) | (0º,0%,75%) | |

Gray | #808080 | (128,128,128) | (0º,0%,50%) | (0º,0%,50%) | |

Maroon | #800000 | (128,0,0) | (0º,100%,50%) | (0º,100%,25%) | |

Olive | #808000 | (128,128,0) | (60º,100%,50%) | (60º,100%,25%) | |

Green | #008000 | (0,128,0) | (120º,100%,50%) | (120º,100%,25%) | |

Purple | #800080 | (128,0,128) | (300º,100%,50%) | (300º,100%,25%) | |

Teal | #008080 | (0,128,128) | (180º,100%,50%) | (180º,100%,25%) | |

Navy | #000080 | (0,0,128) | (240º,100%,50%) | (240º,100%,25%) |