You might be wondering what is so special about CSS3 colors and why they're even different considering that the color and background-color property and their values have not changed since CSS1 specification were released.

As set by CSS1 we can use the following for the color and background-color properties:

Color Background-color
  • color:[colorname];
  • color:rgb([value 1],[value 2],[value 3])
  • color:#[hex value]
  • background-color:[colorname];
  • background-color:rgb([value 1],[value 2],[value 3])
  • background-color:#[hex value];
  • color:orange;
  • color:rgb(255, 255, 125);
  • color:#ff9300;
  • background-color:black;
  • background-color:rgb(124, 56, 87);
  • background-color:#470b0b;

Aside from these standard mundane implementations of colors, CSS3 added a whole new color space: HSL.

HSL

HSL stands for Hue Satuation and Lightness. The break down is as follows:

Hue Satuation Lightness
Hue is the degree of a color wheel that goes from 0 to 360. Here as some general colors:

  • 360 is red
  • 120 is green
  • 240 is blue
Satuation is the amount of color, or how "full" the color is. Here are some values:

  • 100% represents full color
  • 75% represents 3/4 color
  • 50% represents 1/2 color
Lightness is also a percentage but deals with how much white and black is added to the color. Here are some examples:

  • 100% means 100% white is added which means the color will be white
  • 50% means 50% of white and 50% of black is added so they basically balance each other out
  • 0% means no white is added or 100% black which means the color is dwarfed by pure black.

Here is an example of HSL:

Here is an example with RGB:

Here is an example with HEX:

The corresponding CSS for HSL colors is the following:

{code type=css}
background-color:hsl ([0-360], [x]%,[x]%);
background-color:hsl (360, 100% 50%);
background-color:hsl (133,85%, 61%);
{/code}

RGBA

There is nothing new about the RGB color space. We learned about the RGB color space in Basics of CSS Part 2 and we have seen many colors in the RGB color space and in hex format Color Reference.

Common examples of RGB would be the following:

{code type=css}
background-color:rgb(255, 0, 0); /*red*/
background-color:rgb(0, 255, 0); /*green*/
background-color:rgb(0, 0, 255); /*blue*/
{/code}

So what does the "a" mean in RGBA? The A stands for alpha which deals with transparency or the opacity of colors. The syntax for the alpha value will span from 0-1 in decimal form. For example:

{code type=css}
background-color:rgba(0, 0, 255, 0.4);
color:rgba(0, 0, 255, 0.8);
{/code}

The first example will set the opacity of pure blue to 40% and the second example will set the opacity of pure blue to 80%.

Alternatively, the RGB colors will be the following:

RGBA RGB
background-color:rgba([color 1], [color 2], [color 3], [alpha]);

background-color:rgba(0, 0, 255, 1);
background-color:rgba(0, 0, 255, 0.8);
background-color:rgba(0, 0, 255, 0.6);
background-color:rgba(0, 0, 255, 0.4);
background-color:rgba(0, 0, 255, 0.2);
background-color:rgb([color 1], [color 2], [color 3]);

background-color:rgb(0, 0, 255);
background-color:rgb(50, 50, 254);
background-color:rgb(101, 101, 254);
background-color:rgb(152, 152, 254);
background-color:rgb(203, 203, 254);
These colors are not contingent on the color of the background. Since these colors have alpha transparency, they will show any colors or background images behind the elements. These colors are contingent on the color of the background. If you wish for the element to be a certain color then you need to specify the color you wish to have. Will not show any color behind the element and will not show any background images behind the element because no alpha transparency exists.

For example

Notice how above they were the same colors and now since we have a different color background the colors with rgba will allow the black background to show through where as the rgb colors will display their respective color values.

Which Browsers Support RGBA?

  • Firefox 3.x+
  • Safari 3+
  • Safari 4+
  • Google Chrome
  • Opera 10.10+
  • Flock 2.02
  • Mobile Safari
  • Blackberry Browser

IE Hack

Mission someone? Of course we are! We're missing lovely Internet Explorer and all of its versions. Luckly, there is a hack for IE.

{code type=html}

{/code}

We can use this hack as inline css or use in an internal or external style sheet. If you want a specific class selector or element to have an translucent color then use the hack for that element or class like the example above. If you want to use inline css then place the hack in the style attribute.

You might be wondering what #800000FF is. Think of this as #AARRGGBB where AA is the alpha value in two integers, RR are the red hexadecimals, GG are the green hexadecimals, and BB are the blue hexadecimals.

In order to covert our initial RGBA value to Hex we need to think interms of Hex to Decimal values.

Hex to Decimal

In order to convert Hex to Decimal we need to think mathematically. We'll start with an easy example:

Hex Decimal
#ffffff rgb(255, 255, 255)
#0000ff rgb(0, 0, 255)
#ff00ff rgb(255, 0, 255)

How did we get these values of the top of our head? The solution is simple. Follow these steps from Jackson Hines's post on RGB to HEX and vice versa:

HEX to RGB (Ex: #a84fff)

  1. Take the first digit of the red part of the hex color. (ex: a)
  2. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: a = 1; 1 + 9 = 10)
  3. Take the second digit of the red part of the hex color. (ex: 8 )
  4. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: 8 )
  5. Divide this number by 16. (ex: 8 ÷ 16 = 0.5)
  6. Add the number you got in step two and the number you got in step 5. (ex: 10 + 0.5 = 10.5)
  7. Multiply this number by 16 to get the red value. (ex: 10.5 × 16 = 168)
  8. Repeat steps 1 through 8 with green and blue values. (ex: 168, 79, 255))

Alpha (#AA) & A

So what about alpha? Knowing the information we have obtained by Jackson's helpful article, we can convert our rgb value to hex and vice versa. If you wish not to do so much math and want to get results quickly, I recommend using Colorpicker.com.

#AARRGGBB to RGBA

Let us assume #660000FF is our #AARRGGBB color of choice. Convert #0000FF to RGB which will be rgb(0, 0, 255) and now time to convert #AA.

Following HEX to RGB conversion of #66:

  1. The first number is 6
  2. The second number is 6 ÷ 16 = 0.375
  3. The third number is the (first number + the second number) × 16 = 102
  4. 102 ÷ 255 = 0.4 for RGBA

If you don't want to that much math then you can use this conversion tool to convert any TWO hex characters to decimal or any series of Decimal characters. Once you have your decimal number, divide by 255 and you will have your RGBA number.

HSLA

Using the same principles as RGBA and HSL, just add the A to the end of the HSL values. For example

{code type=css}
background-color:hsla ([0-360], [x]%, [x]%, [0-1]);
background-color:hsla (133, 85%, 61%, 0.6);
{/code}

For more information an examples on the IE Hack for RGBA and HSLA, please download css3-colors.zip and open in IE.

css3-colors.zip
css3-colors.zip
Size: 1.71 KB
Be Sociable, Share!