CSS3 Color Module support in Opera Presto 2.7

W3C reference
W3C CSS3 Color Module
Opera articles
Color in Opera 10 - HSL, RGB, and Alpha Transparency
CSS and opacity: methods for creating translucent elements
On this page...
Overview
Color keywords and values
currentColor color keyword
HTML4 color keywords
RGB color values
RGBA color values
HSL color values
HSLA color values
SVG color keywords

Overview

Opera Presto supports all of the CSS3 Color Module. This includes the followiung items.

Please note that each property in the following data table is hyperlinked to its place in the online W3C CSS3 Color module.

Property Values Description Support
color <color> | inherit This property describes the foreground color of an element's text content. Yes
opacity <alphavalue> | inherit This property specifies how to blend the offscreen rendering into the current composite rendering. Yes

Color keywords and values

A <color> is either a keyword or a numerical specification.

currentColor color keyword

This is the value of the ‘color’ property. The computed value of the 'currentColor' keyword is the computed value of the ‘color’ property. If the 'currentColor' keyword is set on the ‘color’ property itself, it is treated as ‘color:inherit’ at parse time. It is used to provide a potential indirect value (currentColor) for any other properties that accept color values. There are different ways to specify the color lime green:

em { color: lime }               /* predefined color name */
em { color: rgb(0,255,0) }       /* RGB range 0-255   */

► HTML4 color keywords

The list of HTML4 color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive, and are defined in the following examples.

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

► RGB color values

The RGB color model is used in numerical color specifications. The following examples all specify the same color.

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. For a typical CRT monitor, whose device gamut is the same as sRGB, the following four rules are equivalent.

em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

► RGBA color values

The RGB color model is extended in this specification to include "alpha" to allow specification of the opacity of a color. The following examples all specify the same color.

em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

Unlike RGB values, there is no hexadecimal notation for an RGBA value. Implementations must clip the red, green, and blue components of RGBA color values to the device gamut according to the rules for the RGB color value composed of those components. The following examples specify new effects that are now possible with the new rgba() notation.

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

► 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:

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), as described in the following code examples.

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

► HSLA color values

Just as the ‘rgb()’ functional notation has the ‘rgba()’ alpha counterpart, the ‘hsl()’ functional notation has the ‘hsla()’ alpha counterpart. The following examples specify the same color.

em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */

The format of an HSLA color value in the functional notation is ‘hsla(’ followed by the hue in degrees, saturation and lightness as a percentage, and an <alphavalue>, followed by ‘)’. White space characters are allowed around the numerical values. Implementations must clip the hue, saturation, and lightness components of HSLA color values to the device gamut according to the rules for the HSL color value composed of those components. The following examples specify new effects that are now possible with the new hsla() notation.

p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

► SVG color keywords

X11 colors [X11COLORS] are supported by popular browsers with the addition of gray/grey variants from SVG 1.0. This specification extends their definition beyond SVG. See this SVG reference: SVG 1.0 recognized color keyword names.

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.