CSS3 Examples

'transparent' color keyword

CSS1 introduced the 'transparent' value for the background-color property. CSS2 allowed border-color to also accept the 'transparent' value. The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extended the 'color' property to also accept the 'transparent' keyword. CSS3 extends the color value to include the 'transparent' keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3.

transparent

Fully transparent. This keyword can be considered a shorthand for rgba(0,0,0,0) which is its computed value.

4.2.4. HSL color values

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have the following limitations:

• RGB is hardware-oriented: it reflects the use of CRTs.
• RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.

There are several other color schemes possible. Advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example), and it is trivial to convert HSL to RGB.

HSL colors are encoding as a triple (hue, saturation, lightness). Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120. One way an implementation could normalize such an angle x to the range [0,360) is to compute ((x mod 360) + 360) mod 360). Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of grey. 0% lightness is black, 100% lightness is white, and 50% lightness is 'normal'.

So for instance:

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* green */
* { color: hsl(120, 100%, 25%) } /* light green */
* { color: hsl(120, 100%, 75%) } /* dark green */
* { color: hsl(120, 50%, 50%) }  /* pastel green, and so on */

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation)

The algorithm to translate HSL to RGB is simple (here expressed in ABC [ABC] which was used to generate the tables.) In these algorithms, all three values (H, S and L) have been normalized to fractions 0..1:

    HOW TO RETURN hsl.to.rgb(h, s, l):
      SELECT:
   l<=0.5: PUT l*(s+1) IN m2
   ELSE: PUT l+s-l*s IN m2
      PUT l*2-m2 IN m1
      PUT hue.to.rgb(m1, m2, h+1/3) IN r
      PUT hue.to.rgb(m1, m2, h    ) IN g
      PUT hue.to.rgb(m1, m2, h-1/3) IN b
      RETURN (r, g, b)

   HOW TO RETURN hue.to.rgb(m1, m2, h):
      IF h<0: PUT h+1 IN h
      IF h>1: PUT h-1 IN h
      IF h*6<1: RETURN m1+(m2-m1)*h*6
      IF h*2<1: RETURN m2
      IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
      RETURN m1

4.2.4.1. HSL Examples

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%, 0%).

No Comment | Posted in » Advance CSS3, W3C CSS3