Tealmermaid Designs

web design, coding, and SEO tips and tricks

How to convert RGB to hexadecimal

convert rgb to hex
Hexadecimal and RGB are systems of colour codes which are used in digital graphics. Each set of codes represent a over 16.7 million possible colours. By converting an RGB code to a hexadecimal code, you can create a code which can be used in web design for both HTML and CSS style sheets.

What is RGB?

The RGB colour model is an additive colour model. This means that colours are created by adding the colors together to create a wide variety of colors. Imagine projecting varying levels of the primary colours red, blue, and green on a surface. These primary colours in their various intensities overlap to create secondary colours. By adjusting the amount of red, green, and blue, over 16.7 possible million colours can be created. Each RGB value is represented by a byte, which can be any number from 0 to 255. For example, the RGB values representing the colour white is 255, 255, 255. Black is at the opposite end of the byte range with 0, 0, 0.

What is hexadecimal?

Hexadecimal ("hex") is a base-16 notational system used to represent real numbers. The hexadecimal system uses a total of sixteen characters: numbers 0 through 9 in addition to the letters A through F (which represent the two-digit numbers 10 through 15). In other words, the numbers 0 to 9 represent themselves and then, starting with 10 and going up to 15 the values are represented by the letters A through F incrementally (A = 10, B = 11, C = 12, D = 13, E = 14, F = 15).

The hexadecimal system is widely used in computer programming due to its ability to represent four binary digits, or bits, with a single hexadecimal digit. A pair of hexadecimal digits are able to represent numbers from 0 to 255 (decimal) which is the exact value range used in the RGB colour model. This means that hexadecimal is perfect for representing colours in HTML using just three pairs of hexadecimal digits (RRGGBB) where the first two digits represent Red, the middle two represent Green and the final two represent Blue.

Convert RGB to Hexadecimal

The algorithm for converting RGB to Hex is fairly simple. How do you determine the two hexadecimal digits for each individual RGB value?

Let's say the red value is 79. Start by dividing the RGB value of 79 and dividing it by 16.

79 / 16 = 4.9375

The whole number 4 becomes the first part of your hex code. Now take the remainder and multiply by 16 and then round up.

.937 x 16 = 14.992 (rounded up to 15)

Remembering the first part of our hex code is 4, all we need to do is determine the value representing 15, which is the letter F. Concatenate the two values (4 + F) to create a hex code representing the red value of 79 as the hex code 4F. Simply repeat the same calculation for Green and Blue to have a complete six-digit hex colour code.

For example, the hex code 4F4FC0 is a violet colour. The Red value is 4+15 (4F). The Green value is 4+15 (4F). The Blue value is 12+0 (C0).

Color codes for CSS and HTML

If it seems like too much work to remember the six-digit hex codes for each and every web-safe colour you might want to use in your code, you can eliminate the guesswork by simply typing in the name of one of these recognized colours. This will work with any CSS or HTML code you might be working on.

Red color codes

crimson darkred deeppink
firebrick hotpink indianred
lavenderblush lightcoral lightpink
maroon mistyrose palevioletred
pink red rosybrown
salmon seashell snow

Yellow color codes

cornsilk darkgoldenrod gold
goldenrod ivory khaki
lemonchiffon lightgoldenrodyellow lightyellow
linen palegoldenrod yellow

Orange color codes

antiquewhite beige bisque
blanchedalmond brown burlywood
chocolate coral darkorange
darksalmon floralwhite lightsalmon
moccasin navajowhite oldlace
orange orangered papayawhip
peachpuff saddlebrown sandybrown
sienna tan tomato

Green color codes

aquamarine chartreuse darkgreen
darkkhaki darkolivegreen darkseagreen
forestgreen green greenyellow
honeydew lawngreen lightgreen
lime limegreen mediumaquamarine
mediumseagreen mediumspringgreen mintcream
olive olivedrab palegreen
seagreen springgreen yellowgreen

Blue color codes

aliceblue aqua azure
blue cadetblue cornflowerblue
cyan darkblue darkcyan
darkslateblue darkturquoise deepskyblue
dodgerblue ghostwhite lightblue
lightcyan lightseagreen lightskyblue
lightsteelblue mediumblue mediumslateblue
mediumturquoise midnightblue navy
paleturquoise powderblue royalblue
skyblue slateblue steelblue
teal turquoise

Purple color codes

blueviolet darkmagenta darkorchid
darkviolet fuchsia indigo
lavender magenta mediumorchid
mediumpurple mediumvioletred orchid
plum purple thistle

Grey color codes

black darkgray darkslategray
dimgray gainsboro gray
lightgray lightslategray silver
slategray whitesmoke white

The Mermaid's Grotto