HEX COLOR CODES AND RGBA COLOR VALUES.
HEX COLOR CODE:
A hex color code is a 6-symbol code made of up to three 2-symbol elements. Each of the 2-symbol elements expresses a color value from 0 to 255.
Element 1: Red value
Element 2: Green value
Element 3: Blue value
The code is written using a formula that turns each value into a unique 2-digit alphanumeric code. For example, the RGB code (224, 105, 16) is E06910 in hexadecimal code. Hexadecimal colors are the visual language of the web. When you want a web page (or web app) to display a certain color, you tell it the hex code. If you’re just wondering what this all means to you as a designer, there are a couple important things to know: • Using the hexadecimal codes, you can show more than 16 million unique colors, which is thought to be more than the human eye can perceive. • You can use color pickers or converters to create the code for you.
NOTE: Why use the hex code instead of numbers? Because if you used numbers, every red, green, or blue value from 0 to 255 could be one, two, or three possible digits. In total, the code could be as few as three digits or as many as nine. This could cause confusion for the systems reading the codes but especially among the humans doing the coding. Having every value be six symbols no matter what, reduces the chance of errors.
WHAT ARE THE HEX COLOR CODES?
Hex color codes are values that tell the display how much of a color to show. The values are a special code that represents color values from 0 to 255. If red, green, and blue are all at the minimum 0 (represented as “00” in the code), the color expressed is the color black. If red, green, and blue are all at the maximum 255 (represented as “ff” in the code), the color expressed is the color white. The hex color values can combine to show more than 16 million different colors. So, of course, most will be somewhere between. You always can use a converter to convert the RGB numeric values into hex code for you. But it may be helpful to memorize a few of the more common hexadecimal colors. This knowledge might come in handy if you were designing with a coder on the fly.
Popular Hex Color Codes:
Color: RGB Hex; Color Code
Black: (0, 0, 0);#000000
Blue: (0, 0, 255);#0000FF
Gray: (128, 128, 128);#808080
Green: (0, 128, 0);#008000
Purple: (128, 0, 128);#800080
Red: (255, 0, 0);#FF0000
White: (255, 255, 255);#FFFFFF
Unique Hex Color Codes
Color: RGB Hex Color Code;Use
AliceBlue: (240, 248, 255) #F0F8FF;Subtle background for an eCommerce or corporate page
Coral: (255, 127, 80) #FF7F50;Calm accent color
FireBrick: (178, 34, 34) #B22222 ;Aggressive accent color
HotPink: (255, 105, 180) #FF69B4 ;Playful accent color
LemonChiffon: (255, 250, 205) #FFFACD;Romantic background for a wedding or other personal page
HOW DO HEX COLOR CODES WORK?
Hex colors are based on the RGB color model that has been in use since the early days of photography. The theory behind the model is that you can create virtually any color the eye can see by assigning different combinations of red, green, and blue color values. The RGB color model is used by televisions, digital cameras, and video projectors in addition to practically every computer and phone screen in existence. On the web and most digital applications, a 0 to 255 color value scale is used. You (or a programmer) tells the screen how much red, blue, and green to show. That combination creates the color that a viewer sees. You have a lot of freedom to pick the color you want. The total possible number of combinations is 16,777,216 which is more than the human eye can actually distinguish.
RGBA COLOR VALUES:
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all) Here’s an example of using the CSS rgba() notation to specify white with 50% opacity. p { color: rgba(255, 255, 255, 0.5); }
RGBA Syntax:
The format of RGBA color notation is:
rgba(red, green, blue, alpha)
The first three values — red, green, blue — can either be integers between 0 and 255 or percentages between 0% and 100%. These values describe the amount of red, green, and blue in the desired color. For example, if you want pure red for a background color, then you would want 100% red, 0% green, and 0% blue, , which can be set as follows:
- background-color: rgba(255, 0, 0, 1);
Or, using percentage values:
- background-color: rgba(100%, 0%, 0%, 1);
The fourth value, alpha, specifies the color’s level of transparency/opacity and can be a value between 0.0 and 1.0. (By the way, in case you’re wondering, in the CSS4 editor’s draft of the CSS Color Module, there is a specification to allow the use of percentages for RGBA alpha values but, at this time, browsers don’t support that option yet.)
WHAT IS THE DIFFERENCE BETWEEN USING RGB AND HEX CODES?
Hex color codes are preferred by programmers because they are predictable. They are always six digits, no matter what the color. RGB values can be as few as three digits and as many as nine. You aren’t required to use hex codes in web design. If you are coding a page in HTML, you can also use the RGB values or even color names. Here’s how the HTML would look if you were coding, say, an aquamarine background for a web page.
• Hex color code for aquamarine:
• RGB color code for aquamarine: • Color name code for aquamarine: Even though you can specify the name or the RGB code doesn’t mean you should. To reduce the chance of a mistake in your project, use a color hex wheel picker or converter to generate the hex code you want. That way, there’s less chance of a current or future coder trying to do the conversion themselves and turning your gorgeous web page into something unsightly.REFERENCES:
• marketing.istockphoto.com/blog/hex-colors-g...