CSS Color Formats and HSL

Prior to CSS3, we had 3 types of color formats: there was the hexadecimal format (and shorthand hex format), rgb() format and named colors. CSS3 adds support for HSL, HSLA and RGBA. Here are the formats we have in CSS3:

Color Syntax Example Definition
#RRGGBB #FF00FF hexadecimal format (tutorial)
#RGB #F0F shorthand hexadecimal format
rgb(r,g,b) rgb(255, 0, 255) red, green blue (tutorial)
hsl(h,s,l) hsl(300, 100%, 50%) hue, saturation, lightness
cmyk(c,m,y,k) cmyk(29%, 55%, 0, 0) Cyan, Magenta, Yellow, Black
hsla(h,s,l,a) hsla(300, 100%, 50%, 1) hue, saturation, lightness, opacity
rgba(r,g,b) rgba(255, 0, 255, 1) red, green, blue, opacity
named colors fuchsia see color name tutorial
transparent transparent no color (transparent)
currentColor currentColor color of the text for that element

In part I we discussed #RRGGBB, #RGB, rgb(), rgba() and touched upon HSL and HSLA colors. In this section we go further into HSLA, and discuss the new keyterm currentColor, and the color type that didn’t make it into the CSS3 specifications: flavor.

Hue, Saturation and Lightness

HSL stands for hue, saturation and lightness. The hue value in included in degrees from 0 to 359, with percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation.

Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of gray from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between. Each table below represents one hue. Twelve equally spaced colors (i.e.
at 30° intervals) have been chosen from the color circle: red,
yellow, green, cyan, blue, magenta, with all the intermediate colors (the
last is the color between magenta and red).

The X axis of each table represents the saturation (100%, 75%, 50%,
25%).

The Y axis represents the lightness. The higher the percent, the lighter the color is, the lower the percent, the darker, with 50% being ‘normal’. 100% lightness has been omitted from the tables below, since it’s always white, no matter the hue. Similarly, 0% lightness has been omitted, since it always renders black, no matter the hue.

0° (Red)

Saturation
100%

75%

50%

25%

88

hsl(0, 100%, 88%)
75

hsl(0, 75%, 75%)
63 hsl(0, 100%, 63%) hsl(0, 75%, 63%) hsl(0, 50%, 63%) hsl(0, 25%, 63%)
50 hsl(0, 100%, 50%) hsl(0, 75%, 50%) hsl(0, 50%, 50%) hsl(0, 25%, 50%)
38

25
13 hsl(60, 100%, 13%) hsl(60, 75%, 13%) hsl(60, 50%, 13%) hsl(60, 25%, 13%)
30° (Orange)

Saturation
100%

75%

50%

25%

88

hsl(30, 100%, 88%) hsl(30, 75%, 88%) hsl(30, 50%, 88%) hsl(30, 25%, 88%)
75

hsl(30, 100%, 75%) hsl(30, 75%, 75%) hsl(30, 50%, 75%) hsl(30, 25%, 75%)
63 hsl(30, 100%, 63%)
50 hsl(30, 100%, 50%)
38

hsl(30, 100%, 38%)
25 hsl(30, 100%, 25%)
13 hsl(30, 100%, 13%) hsl(30, 25%, 13%)
60° (Yellow)

Saturation
100%

75%

50%

25%

88

hsl(60, 100%, 88%) hsl(60, 75%, 88%) hsl(60, 50%, 88%) hsl(60, 25%, 88%)
75

hsl(60, 100%, 75%) hsl(60, 75%, 75%) hsl(60, 50%, 75%) hsl(60, 25%, 75%)
63 hsl(60, 100%, 63%) hsl(60, 75%, 63%) hsl(60, 50%, 63%) hsl(60, 25%, 63%)
50 hsl(60, 100%, 50%) hsl(60, 75%, 50%) hsl(60, 50%, 50%) hsl(60, 25%, 50%)
38

hsl(60, 100%, 38%) hsl(60, 75%, 38%) hsl(60, 50%, 38%) hsl(60, 25%, 38%)
25 hsl(60, 100%, 25%) hsl(60, 75%, 25%) hsl(60, 50%, 25%) hsl(60, 25%, 25%)
13 hsl(60, 100%, 13%) hsl(60, 75%, 13%) hsl(60, 50%, 13%) hsl(60, 25%, 13%)
90° Yellow-Green
Saturation
100% 75% 50% 25%
88 hsl(90, 100%, 88%)
75 hsl(90, 25%, 75%)
63 hsl(90, 100%, 63%) hsl(90, 75%, 63%) hsl(90, 50%, 63%) hsl(90, 25%, 63%)
50 hsl(90, 100%, 50%) hsl(90, 25%, 50%)
38 hsl(90, 25%, 38%)
25 hsl(90, 10%, 25%) hsl(90, 75%, 25%) hsl(90, 50%, 25%) hsl(90, 25%, 25%)
13 hsl(90, 25%, 13%)
120° (Green)

Saturation
100%

75%

50%

25%

88

hsl(120, 100%, 88%) hsl(120, 25%, 88%)
75 hsl(120, 25%, 75%)
63 hsl(120, 25%, 63%)
50 hsl(120, 100%, 50%) hsl(120, 25%, 50%)
38 hsl(120, 100%, 38%) hsl(120, 75%, 38%) hsl(120, 50%, 38%) hsl(120, 25%, 38%)
25 hsl(120, 25%, 25%)
13 hsl(120, 25%, 13%)
150° Green-Cyan

Saturation
100% 75% 50% 25%
88

hsl(150, 100%, 88%) hsl(150, 75%, 88%) hsl(150, 50%, 88%) hsl(150, 25%, 88%)
75 hsl(150, 100%, 75%) hsl(150, 75%, 75%) hsl(150, 50%, 75%) hsl(150, 25%, 75%)
63 hsl(150, 100%, 63%) hsl(150, 75%, 63%) hsl(150, 50%, 63%) hsl(150, 25%, 63%)
50 hsl(150, 100%, 50%) hsl(150, 75%, 50%) hsl(150, 50%, 50%) hsl(150, 25%, 50%)
38 hsl(150, 100%, 38%) hsl(150, 75%, 38%) hsl(150, 50%, 38%) hsl(150, 25%, 38%)
25 hsl(150, 100%, 25%) hsl(150, 75%, 25%) hsl(150, 50%, 25%) hsl(150, 25%, 25%)
13 hsl(150, 100%, 13%) hsl(150, 75%, 13%) hsl(150, 50%, 13%) hsl(150, 25%, 13%)
180° (Cyan)

Saturation
100% 75% 50% 25%
88

hsl(180, 100%, 88%) hsl(180, 50%, 88%) hsl(180, 25%, 88%)
75 hsl(180, 75%, 75%) hsl(180, 25%, 75%)
63 hsl(180, 100%, 63%) hsl(180, 50%, 63%) hsl(180, 25%, 63%)
50 hsl(180, 100%, 50%) hsl(180, 75%, 50%) hsl(180, 25%, 50%)
38 hsl(180, 100%, 38%) hsl(180, 50%, 38%) hsl(180, 25%, 38%)
25 hsl(180, 75%, 25%) hsl(180, 25%, 25%)
13 hsl(180, 100%, 13%) hsl(180, 50%, 13%) hsl(180, 25%, 13%)
210° Cyan-Blue

Saturation
100% 75% 50% 25%
88

hsl(210, 100%, 88%) hsl(210, 75%, 88%) hsl(210, 50%, 88%) hsl(210, 25%, 88%)
75 hsl(210, 75%, 75%) hsl(210, 25%, 75%)
63 hsl(210, 100%, 63%) hsl(210, 50%, 63%) hsl(210, 25%, 63%)
50 hsl(210, 100%, 50%) hsl(210, 75%, 50%) hsl(210, 25%, 50%)
38 hsl(210, 100%, 38%) hsl(210, 50%, 38%) hsl(210, 25%, 38%)
25 hsl(210, 75%, 25%) hsl(210, 25%, 25%)
13 hsl(210, 100%, 13%) hsl(210, 50%, 13%) hsl(210, 25%, 13%)
240° (Blue)

Saturation
100% 75% 50% 25%
88

hsl(240, 100%, 88%) hsl(240, 25%, 88%)
75 hsl(240, 100%, 75%) hsl(240, 75%, 75%) hsl(240, 50%, 75%) hsl(240, 25%, 75%)
63 hsl(240, 25%, 63%)
50 hsl(240, 100%, 50%) hsl(240, 25%, 50%)
38 hsl(240, 100%, 38%) hsl(240, 75%, 38%) hsl(240, 50%, 38%) hsl(240, 25%, 38%)
25 hsl(240, 25%, 25%)
13 hsl(240, 25%, 13%)
270° Blue-Magenta

Saturation
100% 75% 50% 25%
88

hsl(270, 100%, 88%) hsl(270, 75%, 88%) hsl(270, 50%, 88%) hsl(270, 25%, 88%)
75 hsl(270, 25%, 75%)
63 hsl(270, 25%, 63%)
50 hsl(270, 100%, 50%) hsl(270, 25%, 50%)
38 hsl(270, 25%, 38%)
25 hsl(270, 25%, 25%)
13 hsl(270, 100%, 13%) hsl(270, 75%, 13%) hsl(270, 50%, 13%) hsl(270, 25%, 13%)
300° (Magenta)

Saturation
100% 75% 50% 25%
88

hsl(300, 100%, 88%) hsl(300, 75%, 88%) hsl(300, 50%, 88%) hsl(300, 25%, 88%)
75 hsl(300, 100%, 75%) hsl(300, 75%, 75%) hsl(300, 50%, 75%) hsl(300, 25%, 75%)
63 hsl(300, 100%, 63%) hsl(300, 75%, 63%) hsl(300, 50%, 63%) hsl(300, 25%, 63%)
50 hsl(300, 100%, 50%) hsl(300, 75%, 50%) hsl(300, 50%, 50%) hsl(300, 25%, 50%)
38 hsl(300, 100%, 38%) hsl(300, 75%, 38%) hsl(300, 50%, 38%) hsl(300, 25%, 38%)
25 hsl(300, 100%, 25%) hsl(300, 75%, 25%) hsl(300, 50%, 25%) hsl(300, 25%, 25%)
13 hsl(300, 100%, 13%) hsl(300, 75%, 13%) hsl(300, 50%, 13%) hsl(300, 25%, 13%)
330° Magenta-Red

Saturation
100% 75% 50% 25%
88

hsl(330, 100%, 88%) hsl(330, 25%, 88%)
75 hsl(330, 25%, 75%)
63 hsl(330, 25%, 63%)
50 hsl(330, 100%, 50%) hsl(330, 25%, 50%)
38 hsl(330, 100%, 38%) hsl(330, 75%, 38%) hsl(330, 50%, 38%) hsl(330, 25%, 38%)
25 hsl(330, 100%, 25%) hsl(330, 75%, 25%) hsl(330, 50%, 25%) hsl(330, 25%, 25%)
13 hsl(330, 25%, 13%)

There is a grid with many more colors at Standardista.com if you want to see how more hsl combinations render and have a browser that supports HSL rendering. The grid above is coded with hexadecimal colors, since internet explorer does not understand HSL colors. The grids at http://standardista.com/sandbox/hsl.php require Opera, Safari, Firefox, Chrome or IE9 to view.

HSLA

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). The syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alpha value from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

CSS3 Implementable Features

There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation. Mostly, there are links to my sandboxing of those features.

If it’s not successfully embedded, you can see it here css3 implementable features

Content covered in the PPT presentaion

I do not have a podcast, but here is a summary of what was presented in case you missed it, or incase the flash above isn’t enough

CSS3: Si se puede

CSS2.1

has been around since 1999, but only fully supported in IE8. We obviously didn’t wait to implement CSS2 until all the browsers fully supported it. CSS3, while not yet finalized, has a lot of features that are supported in many browsers. Like CSS 2.1, there is no reason not to use these features just because not all browsers support all the features equally: if that were our logic, we would still be on CSS1.

Your site does not need to be identical in all browsers

In developing with CSS3 think about graceful degradation. Not all browsers need to implement your site identically. Yes, your site should look good in all browsers, but no, if your body is a few pixels different in one browser to the next, who cares? You’re the only one who is going to be looking at your website in multiple browsers at the same time. 99.99% of the site user base (that number is pulled out of my ass) have one favorite browser on their desktop, and that’s what they’ll use to look at your site.

Twitter uses rounded corners for non IE browsers only

Example: Twitter uses native rounded corners for supporting browsers.

IE does not support rounded corners. Twitter believes that rounded corners make their site look nicer, but lack of them doesn’t break the site. So, the experience is a little different in the IE’s than in modern browsers. But if I hadn’t shown you this example, you may never have known!

Twitter would have had a difficult time creating rounded corners with images since the background color of the right hand nav bar on twitter is user selectable. They could have created rounded corners on the left and square angles on the right, but likely going all square for IE looked better.

For the rest of the examples, I’ll be explaining how to make CSS3 work in IE. I just want to spread the gospel that it doesn’t have to look identical anyway.

Features that are implementable and discussed below:

  • CSS3 Selectors
  • Text Shadow (2.0).
  • Box Shadow (prefixed)
  • Rounded Corners (prefixed).
  • @font-face
  • Alpha Transparency.
  • Opacity.
  • Rotation.

Features that are implementable, but not discussed in this talk

  • Multi-column layout
  • Video (HTML5)
  • Animations
  • Transitions
  • Border-image
  • Multiple background images
  • Linear Gradients

CSS3 Selectors

If you look at the grid of CSS3 Selectors and Browser Support, you’ll note that, at this point, only the three IEs don’t understand CSS3 selectors. That doesn’t mean you can’t use them.

To see all the selectors, and what you can and cant use, check out CSS3 Selectors and Browser Support

Alpha Tranparency

color: rgba(0,0,0,0.4);
color: hsla(300, 100%, 50%, 0.4);

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, stading for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation. Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of grey from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between.

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). the syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alphavalue from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

Opacity

Opacity likely doesn’t have the impact you intended. The element made less that fully opaque is not the only element impacted. All the element with a z-index higher than the one made opaque inherit the same level of transparency. Generally, you’ll want to use alpha transparency on a background rather than opacity.

  .halfthere {
       opacity: 0.4;
       filter: alpha(opacity=0.4)
   }

Opacity Example

Rounded Corners

.rounded {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
   }

The order is topleft, topright, bottomright, bottomleft.

Safari has some issues with rounded corners.

IE6, IE7 and IE8 don’t support native CSS rounded corners, and never will. For those browsers, if I really don’t want my page to look different in the IEs than in modern browsers, I add the rounded corners with a little bit of JavaScript and CSS magic, and a single background image:

$('.rounded').append('<b class="tr"></b><b class="tl"></b><b class="br"></b> <b class="bl"></b>');

Text Shadow

.shadowed {
  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  }

In the above, the order of values is

leftOffset rightOffset blur Color

If you’re going to use text shadow, which is not supported in IE, this is a good time to use the Hack for CSS3 Supporting Browsers. As I mention in that article, you don’t want to end up with white text on white background.

Rotation

Transforms are supported in all browsers, just with different syntax.

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Note that for IE, the values are 1=90, 2=180, 3=270. Check out my

sandbox, or just look at the header of this blog.

I’ve been told that IE supports more than just the 90degree angles, but haven’t tested yet. The syntax is:

     filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17); /* for IE6 and IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17)"; /* for IE8 */

and make sure that the element hasLayout.

Gradients

I didn’t actually go over gradients in my presentation, but linear gradients are  supported in one way or another in all browsers except opera, so you can use them. Radial gradients …. not yet.

background-image: -moz-linear-gradient(top, #56abf3, #ffffff, #ffffff, #ffffff); /* FF3.6+ */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #56abf3),color-stop(25%, #ffffff));

IE has

Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FF56abf3, endColorstr=#FFFFFFFF)

There are two types of Gradients – 0 gives a gradient running from top to bottom. 1 from left to right.
startColorstr —  The start color of the gradient. The first 2 characters in the 8 digit HEX color number are the Alpha values ( 00 being transparent,  FF is opaque). Default is blue
endColorstr= —   The color of the bottom or right  end of the gradient, depending on what GradientType you use. The default color is black  #FF000000 if omitted.

There are no colorstops in IE as far as i can tell

Introducting CSS3 Colors

Defining colors in red, green and blue is supported by CSS3 in several ways.

Hexadecimal Values

You can declare the hexadecimal value of your red, green and blue with hexadecimal values ranging from 0 to 255 in the format of 00 to FF, put the three together preceded by a hash (#), and that’s the color. For example, #FFFFFF for complete saturation of red, green and blue comes out white, #000000 for lack of any color comes out black. A mix and match of hexadecimal values from 0-255 using any two characters A-F0-9, case insensitive, for the red green and blue values, combined together in the order of red, green and blue can create millions of colors.

Did I mention case-insensitivity? It doesn’t matter if you use #FFCC00 or #ffcc00 – the value syntax is case insensitive.

The RGB hexadecimal notation also has a shorthand, of #RGB, where the R, G, and B are a single character, A-F0-9, case insensitive, put together, preceded by a hash mark. Identical to the long format, the browser expands the RGB value, such as #369 to #336699.

All browsers support all of the hexadecimal values, both short hand and long hand. There used to be a discussion of web-safe colors. Web face colors has been a non-issue, even for hand held devices. It is safe to use any color combination (may not be pretty or legible, but it will render).

rgb() syntax

Instead of using the hexadecimal values for RGB, you can use the base 10 value for your mix of red, green and blue, or even percentages. Instead of preceding your color with a hash tag, the syntax is the keyterm ‘rgb’ follow by your comma-separated values in parenthesis.

#FFFFFF = #FFF = rgb(255, 255, 255) = rgb(100%, 100%, 100%).

All browsers support all of the RGB color combinations in general. Some browsers allow the mixing of rgb() numbers with percents, but the specifications clearly state that this is not expected behavior, and not all browsers support it, so avoid mixing value types.

What’s new?

New in CSS3 is RGBA. RGBA is similar to RGB, but with an added A for AlphaTransparency. The rgb() specifications were extended in CSS3 to include ‘alpha’ to allow specification of the opacity of a color. The first three values are still red, green, blue. Thee fourth value is the opacity level, 1 being fully opaque, 0 being fully transparent, and any float being everything in-between.

rgb(255, 255, 255) = rgb(100%, 100%, 100%) = rgba(255, 255, 255, 1)

The above are all equal to white, since 1 means fully opaque. But don’t get confused: rgba(0,0,0,0) is transparent, not black, because the level of opacity is none.

Unlike RGB, there is no hexadecimal notation for RGBA. Unlike RGB, the IEs don’t understand RGBA. IE8 correctly ignores properties with rgba() in the value. IE6 and IE7 overwrite values, without understanding them, and generally inherit the default value when confused.

RGBA is going to be extremely useful as drop shadows on boxes and text become better supported. While it is very common to see text-shadow: 3px 3px 3px #CCCCCC; or text-shadow: 3px 3px 3px #000000;– including a gray or black shadow, the effect looks much better if you write text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); While the color #CCCCCC and rgba(0,0,0,0.4) look similar when solid over a white background, when included as a shadow, the #CCCCCC starts off as a solid grey, which looks a little off. The RGBA color is always translucent, which looks MUCH better.

Hue, Saturation and Lightness

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, standing for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation.

Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of gray from white to #808080 to black depending on the lightness.

Up Next

In part 2, we’ll cover hsl and hsla in greater depth.

Making IE recognize HTML5 elements

IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->

Printing HTML5 in Internet Explorer: where HTML5 is not supported

The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.