Rgb to Hex Color Code Converter
Convert rgb to hex, hex to rgb and rgb to hsv, hsl and cmyk
HEX CODE: #ffd700
COLOUR RGB: 255, 215, 0
HSV: hsv(51, 100%, 100%)
HSL: hsl(51, 100%, 50%)
CMYK: cmyk(0%, 15.69%, 100%, 0%)
What is RGB and Hex?
- RGB and HEX are color models and they are used to represent colors in digital space.
- RGB stands for Red, Green, and Blue and each of the component is represented by a number ranging from 0 to 255.
Example of an RGB color code for red is 255,0,0
Here, Red component has a value of 255, Green and Blue components have value of 0. - RGB color code values are based on the decimal number system. The decimal number system is a Base-10 system which uses numbers from 0 – 9
- HEX stands for hexadecimal and the colors are represented in hex format with 2 digits per color. The first two digits of a HEX color code represent the red component, the next two digits represent the green component and the last two digits represent the blue component.
- Hex color code values are based on the hexadecimal number system. The hexadecimal number system is a Base-16 system which usess the numbers 0 – 9 and the letters A – F
- Example of a hex code is #fff00a which is a shade of yellow color
# is a prefix used for an hexadecimal color code.
ff - red component
f0 - green component
0a - blue component When these are combined, the resultant color is yellow.
A prefix 0x is used to indicated a hexadecimal number but for hex color code, use # as prefix - Both HEX and RGB can represent upto 16 million colors. As R, G and B each can be expressed with a color value in the range 0 to 255, the number of unique colors possible is 255 ^ 3 which is 16 1/2 million
- Both RGB and HEX color schemes are Additive. An Additive color system goes from lightness to darkness. When all 3 red, green and white colors are combined, it is white (#FFFFFF).
When all 3 colors are reduced, it becomes darker and darker till we get black color (#000000) - RGB is the color format used by monitors, digital displays and especially for printable output.
- Hex is typically used in stylesheets (css) in html code. It is commonly used in web applications.
How to convert RGB To Hex?
Divide each of the R, G and B values separately by 16.
For each of them, the Quotient is the 1st part of hex and the Remainder is the 2nd part of hex.
Convert the decimal numbers to hexadecimal number scale which uses 0-9 and A-F (for values 10 to 15) to determine the hex codelet's convert RGB value of 55,44,255 representing a shade of blue to hex code
Take the R value first and divide by 16
R/16 = 55/16
Quotient = 3
Remainder = 7
The number 37 is same in hexadecimal.
R part is '37'Take the G Value and divide by 16
44/16 = Quotient = 2, Remainder = 12
2 remains 2 in hexa, 12 in hexadecimal is 'C'.
Combining the two values we get G as '2C'.Now, take the B value and divide by 16
255/16 = Quotient = 15, Remainder = 15
15 in hexadecimal is 'F'
Combining the two numbers we get B as 'FF'Combine RGB codes to get final Hexadecimal color code
The hex color code is #372CFF
How to Convert Hex to RGB?
To convert hex to rgb, separate out each of the hex components for RGB.
73 is the hex part of R, ff is the hex part of G and 21 is the hex part of B
Consider a hex value of #73ff21 to be converted to RGB.
As first step, convert the A to F to its decimal value. Then,
For R value in RGB = 7 * 16 1 + 3 = 112 + 3 = 115G value = f * 16 + f = 15 * 16 + 15 = 255
B value = 2 * 16 + 1 = 33
Combining all the values hex #73ff21 is RGB(115,255,33)
Similarly, If the hex value is #ddd it means it is same as 0d0d0d so RGB = 13, 13, 13
Note: You can also refer our Hex to Decimal Converter for converting between hexadecimal and decimal
How to Calculate Hue from RGB?
Hue is a value that represents an angle in degrees which represents a color in a color wheel.
To convert RGB to Hue, divide the R, G and B values by 255. This will reduce them to a range between 0 to 1.
Determine the max of R, G and B and the minimum of the R, G and B values.
If the min and max are of same value, then it's grey and Hue is equal to 0
If max is 'R' or red component, then
Hue = (G - B) / (Max - Min)
If max is 'G' or Green component, then
Hue = 2 + (B - R) / (Max - Min)
If max is 'B' or Blue component, then
Hue = 4 + (R - G) / (Max - Min)Convert the Hue value to degrees
Hue = Hue * 60
If hue is -ve, then add 360 degrees to it,
hue = hue + 360
How to Calculate Luminance or Brightness from RGB?
Brightness or Luminance is the amount of White color added to hue. The more the white shade, the brighter it is and vice-versa.
0% brightness means dark. 100% brightness means light.
Similar to above section, divide RGB values by 255 and find max and min values..
Luminosity or Lightness = Max - Min / 2. Multiply by 100 to get the value in Percentage.
For eg, R G B value for red is 255, 0, 0. Converting to 0 to 1 scale, we get 255/255,0/255, 0/255 = 1,0,0
max = 1, min = 0
Luminosity or lightness = 1+ 0 / 2 = 0.5 * 100 = 50%Consider RGB value as 127,50,0. This becomes 0.5,0.2,0
min = 0, max =0.5
Luminosity = 0.5 + 0 /2 = 0.25 * 100 = 25%
How to Calculate Saturation from RGB?
Saturation is the intensity or purity of the color. Saturation is in Percentage (%).
0% saturation means shades of grey, 100% is pure color and not mixed with any.To convert RBG to Saturation value, use the max and min value computed from previous hue calculation
If Max and Min are same, then Saturation is 0%
If they are different, find the average of Max and Min value which is the luminosity value
Luminosity - Avg = Min + Max / 2If lightness is less than 0.5,
Saturation = (max-min)/(max+min)
If lightness is greater than 0.5,
Saturation = (max-min)/(2-max-min)For example, if RGB is 255,0,0 , then Saturation is 100%. If RGB is 100,100,100, then it's mixed color and Saturation is 0% For RGB 253,175, 223 (pink color), Saturation is 31%.
RGB, Hex and CMYK Color Code Table
| Color Codes | Hex code colour | RGB color code | CMYK | Preview |
|---|---|---|---|---|
| Red color code | #FF0000 | RGB(255, 0, 0) | cmyk(0%,100%,100%,0%) | |
| Pink color code | #FFC0CB | RGB(255, 192, 203) | cmyk(0%,25%,20%,0%) | |
| Orange color code | #FFA500 | RGB(255, 165, 0) | cmyk(0%,35%,100%,0%) | |
| Yellow color code | #FFFF00 | RGB(255, 255, 0) | cmyk(0%,0%,100%,0%) | |
| Green color code | #008000 | RGB(0, 128, 0) | cmyk(100%,0%,100%,50%) | |
| Blue color code | #0000FF | RGB(0, 0, 255) | cmyk(100%,100%,0%,0%) | |
| Brown color code | #A52A2A | RGB(165, 42, 42) | cmyk(0%,75%,75%,35%) | |
| White color code | #FFFFFF | RGB(255, 255, 255) | cmyk(0%,0%,0%,0%) | |
| Gray color code | #808080 | RGB(128, 128, 128) | cmyk(0%,0%,0%,50%) | |
| Gold color code | #FFD700 | RGB(255, 215, 0) | cmyk(0%,16%,100%,0%) | |
| Purple color code | #800080 | RGB(128, 0, 128) | cmyk(0%,100%,0%,50%) | |
| Orange color code | #FFA500 | RGB(255, 165, 0) | cmyk(0%,35%,100%,0%) | |
| Sage Green color code | #B2AC88 | RGB(178, 172, 136) | cmyk(0%,3%,24%,30%) | |
| Teal color code | #008080 | RGB(0, 128, 128) | cmyk(100%,0%,0%,50%) | |
| Lavender color code | #E6E6FA | RGB(230, 230, 250) | cmyk(8%,8%,0%,2%) | |
| Light Blue color code | #ADD8E6 | RGB(173, 216, 230) | cmyk(25%,6%,0%,10%) | |
| Beige color code | #F5F5DC | RGB(245, 245, 220) | cmyk(0%,0%,10%,4%) | |
| Hot Pink color code | #FF69B4 | RGB(255, 105, 180) | cmyk(0%,59%,29%,0%) | |
| Cyan color code | #00FFFF | RGB(0, 255, 255) | cmyk(100%,0%,0%,0%) | |
| Maroon color code | #800000 | RGB(128, 0, 0) | cmyk(0%,100%,100%,50%) | |
| Navy Blue color code | #000080 | RGB(0, 0, 128) | cmyk(100%,100%,0%,50%) | |
| Royal Blue color code | #4169E1 | RGB(65, 105, 225) | cmyk(71%,53%,0%,12%) | |
| Cream color code | #FFFDD0 | RGB(255, 253, 208) | cmyk(0%,1%,18%,0%) | |
| Dark Blue color code | #00008B | RGB(0, 0, 139) | cmyk(100%,100%,0%,45%) | |
| Magenta color code | #8B008B | RGB(139, 0, 139) | cmyk(0%,100%,0%,45%) | |
| Peach color code | #FFDAB9 | RGB(255, 218, 185) | cmyk(0%,15%,27%,0%) | |
| Dark Green color code | #006400 | RGB(0, 100, 0) | cmyk(100%,0%,100%,61%) | |
| Turquoise color code | #40E0D0 | RGB(64, 224, 208) | cmyk(71%,0%7%,12%) | |
| Coral color code | #FF7F50 | RGB(255, 127, 80) | cmyk(0%,50%,69%,0%) | |
| Black color code | #000000 | RGB(0, 0, 0) | cmyk(0%,0%,0%,100%) | |
| Lime Green color code | #32CD32 | RGB(50, 205, 50) | cmyk(76%,0%,76%,20%) | |
| Rose Gold color code | #b76e79 | RGB(183,110,121) | cmyk(0%,40%,34%,28%) | |
| Emerald color code | #50C878 | RGB(80, 200, 120) | cmyk(60%,0%,40%,22%) | |
| Bronze color code | #CD7F32 | RGB(205,127,50) | cmyk(0%,38%,76%,20%) |
FAQ on Color Models
HSL : H - Hue, S - Saturation, L - Lightness. Hue means color (combination of Red, Blue and Green). Saturation refers to the intensity and purity of the color.
100% means the color or hue is pure not mixed with other shades, 0% means it's more of grey and not pure. Lightness is same as Brightness which is amount of white / black color added to it.
100% white is one end of lightness and 100% black is the other end representing 0 brightness.
Hue is value between 0 to 255 (0xFF), Saturation and Value are in %.
HSL : H - Hue, S - Saturation, V - Value. Hue means color (the combination of Red, Blue and Green).
Saturation refers to the intensity and purity of it. As saturation increases it tends towards white shades and 100% means the color is white.
Value is the brightness of a color. light color are also referred as tints and dark color are referred as shades. It does not go to white but from black to the chosen hue.
Hue is value between 0 to 255 (0xFF), Saturation and Value are in %.
HSB is hue, saturation and brightness. It is same as HSV.
HSB and HSV are same. HSB is Hue Saturation Brightness. HSL and HSB/HSV are different.
Hue is same in HSL and HSV but saturation and light/bright behavior is different in both. Saturation indicates intensity in both.
In HSL , they grey component increases and becomes max as 100% but it's not white. In HSV, 100% saturation becomes white.
The Lightness / Brightness in HSV goes all the way from black (0%) to white (100%). In HSV, it goes from black to selected hue.
So the range of % in saturation and lightness/brightness values vary.
These color models are mainly used in computer software like image processing/editing tools, image scraping , facial recognition, computer graphic applications.
RGB is a simple visual color model as perceived by the human eye.
HSV, HSL are used by computer systems to process color information with intensity, lightness and other parameters and create a visual model that matches that of human visual processing.
CMYK is another color model and industry standard for color printing. CMYK Stands for Cyan, Magenta, Yellow and Key(Black).
RGB - when all colors are combined, it is white in RGB and absence of color is black.
CMYK - when all colors are combined it is black and absence of color is white.
Screens, Televisions and monitors all use RGB color model. Wherever visual medium is based on transmitted 'light', RGB is preferred.
CMYK is mainly used in color printing.
The different colors are combined in various ways to produce new colors going from darkness to lightness.
It starts with Black which is rgb(0,0,0) and as the colors are added in different intensity, it produces new colors of increasing values
It finally becomes White which is ryb (255,255,255). RGB is an additive color system and creates illumining colors on screen using transmitted light.
It starts with White (bg such as paper) and then when subtractive colors are mixed with it, it becomes darker and darker till it is black.
CMYK is a subtractive color system where adding Cyan, Magenta and Yellow to white in equal measures makes it black.
Black is the 'K' part of CMYK also known as the key color. This is based on reflective light from a white medium.
Brightness is absolute value like 0%, 25%, 60%, 100% and it's independent of the observer.
Lightness is perceived view of the brightness. It depends on the observer.
Luminosity is the light emitted by an object. It depends on the surface area, object type and a calculated value.
