Leonid Batkhan's SAS blog

Lenetek Blog

Interactive RGB to Hex and Hex to RGB color code convertor

This simple interactive dual RGB to Hex / Hex to RGB convertor conveniently converts color codes in both directions as well as shows the color sample in the background.

R
G
B


Hex
#
lowcase

 

Notes

  1. Make sure that R, G and B values are whole numbers in the range 0...255. If you type in the numbers outside of this range then negative numbers are automatically replaced with positive; the numbers greater than 255 are replaced with 255. Non-integer values are truncated. All non-digit characters are stripped out, and if no valid value is left, the field is reset to 0.

  2. Make sure that the Hex value has exactly 6 characters and is between 000000 and FFFFFF (# is allowed as the 7th charachter in front of the value). All non-valid characters are replaced with zeros, and if less than 6 characters supplied, the Hex value is augmented with zeros on the right. See table below for a list of valid hexadecimal characters.

RGB Color Model

The RGB color model is an additive color model in which the three primary lights or colors, red, green, and blue light are added together in various ways to reproduce the whole spectrum of colors. The name of the model is an acronym made from the initials of the three primary colors, Red, Green, and Blue.

The main purpose of the RGB color model is for the sensing, representation, and displaying images in electronic systems, such as televisions, computers, photo and video cameras, and image scanners.

In the RGB color model, a color is represented as a triplet of integer numbers (r, g, b), each ranging from 0 to 255. That is the range that a byte (8 bits) can encode using binary "0"s and "1"s (providing for 256 distinct values). These numbers signify intensity of each component - red, green, and blue. Zero intensity for a component gives the darkest color, while value of 255 gives the full intensity of a component.

For example, (0, 0, 0) means that all three components are at their minimum intensity which produces black color. On the other hand, (255, 255, 255) means that all three components of the color are at their maximum intensity which produces white color.

When the intensities for all the components are the same, the result color is a shade of gray, darker or lighter depending on the intensity.

When the intensities are different, the result is a colored hue, with saturation depending on the intensities of the primary colors. For example:
(255, 0, 0) is Red
(0, 255, 0) is Green
(0, 0, 255) is Blue
(255, 255, 0) is Yellow
(0, 255, 255) is Cyan
(255, 0, 255) is Magenta

Hexadecimal Color Code Notation

The hexadecimal (or hex, for short) color code notation is a standard for HTML, CSS, and other web related uses.

Hexadecimal color code is a variation of the RGB model. In fact, it is just a notation of the RGB color code. In the regular RGB code, a color is represented by a triplet of decimal integer numbers as in (128, 230, 10). In the hexadecimal notation, the hexadecimal number system, refered to as the base-16 number system, is used instead of the decimal numbers. In the hexadecimal number system there are 16 digits instead of 10:

Decimal Hexadecimal Binary
0 00
1 11
2 210
3 311
4 4100
5 5101
6 6110
7 7111
8 81000
9 91001
10A1010
11B1011
12C1100
13D1101
14E1110
15F1111

For example using the hex system, decimal number 16 is represented by hex number 10, decimal number 255 is represented by hex number FF. In the hex notation, instead of a triplet of decimal numbers ranging from 0 to 255, a six character string is used - two characters for each of the primary colors red, green, and blue. That is only 2 digits per color are needed in the hex system instead of 3 digits in the decimal system.

In order to indicate that a color code written as a hex instead of a decimal, a character "#" (pound sign) is used in front of the code string. For example, #000000 means (0, 0, 0); #0A0B0C means (10, 11, 12), #FFFFFF means (255, 255, 255).

In some applications, hexadecimal numbers have either an "0x" prefix or an "h" suffix instead of the "#" prefix that is used in HTML and CSS. For example, a number #ABC123 can be written as 0xABC123 or ABC123h.

The hexadecimal color code notation is case insensitive meaning that the character case (upper or lower) does not matter. For example, #abcdef is the same as #ABCDEF and is the same as #aBcDEf. However, for stylistic purpose it is recommended to be consistent with either upper case or lower case usage.

For that reason, in our RGB-to-Hex / Hex-to-RGB convertor there is a check box labeled lowcase that allows to set your case preference. Anohter check box labeled # allows to optionally insert or remove the # prefix.

Post a comment

Your email is never published nor shared.

Lenetek blog - homeBlog Home

 

Featured Posts

Latest Posts

Older Posts