Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mattis leo. Nullam lobortis consequat libero ut consectetur. Donec pellentesque vulputate nunc, vitae elementum ipsum feugiat sed. Integer sagittis pretium ipsum, semper bibendum velit vehicula eu. Sed adipiscing, neque ac pulvinar viverra, ipsum mauris sagittis mi, eget ultrices diam erat ac enim.

Basic Color Keywords

The list of basic 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.

{background: red} {color: green}

Extended Color Keywords

The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the addition of gray/grey variants from SVG 1.0. The resulting list is precisely the same as the SVG 1.0 color keyword names. This specification extends their definition beyond SVG. The two color swatches on the left illustrate setting the background color of a table cell in two ways: The first column uses the named color value, and the second column uses the respective numeric color value.

{background: dodgerblue} {color: mistyrose}

Hexadecimal color values

The RGB color model is used in numerical color specifications.

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

{background: #ff0000} {color: #003264}

RGB color values

The format of an RGB value in the functional notation is ‘rgb(’ followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ‘)’. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values.

All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards (see [COLORIMETRY]).

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. User agents may perform higher quality mapping of colors from one gamut to another. This specification does not define precise clipping behavior.

{background: rgba(<red>, <green>, <blue>)}

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:

1 - RGB is hardware-oriented: it reflects the use of CRTs.

2 - 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. Some 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 <number> 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) (i.e. zero degrees, inclusive, to 360 degrees, exclusive) 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 gray. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.

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)

If saturation is less than 0%, implementations must clip it to 0%. If the resulting value is outside the device gamut, implementations must clip it to the device gamut. This clipping should preserve the hue when possible, but is otherwise undefined.

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

The Y axis represents the lightness. 50% is “normal”.

{background: hsla(<hue>, <saturation | percent>, <lightness | percent>)}

Alpha

Nam non augue quis augue convallis adipiscing. Integer id velit nunc. Fusce auctor luctus sollicitudin. Suspendisse et arcu metus. Sed hendrerit, neque vitae posuere lacinia, risus ipsum semper neque, et volutpat urna purus aliquet lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dignissim sagittis tellus sed hendrerit. Praesent porta fringilla nisi iaculis aliquet. Aliquam fermentum feugiat enim, ut placerat neque dapibus accumsan. Sed vel turpis magna, non pulvinar quam. Morbi hendrerit, enim dignissim malesuada tempus, leo nisi ultricies ligula, sed porttitor tellus sem quis sapien. Fusce id porta quam.

{background: rgba(<red>, <green>, <blue>, <alpha | percent>)}
{background: hsla(<hue>, <saturation | percent>, <lightness | percent>, <alpha | percent>)}

{background-color:rgba(186,186,113,0.0)}
{background-color:rgba(186,186,113,0.2)}
{background-color:rgba(186,186,113,0.4)}
{background-color:rgba(186,186,113,0.6)}
{background-color:rgba(186,186,113,0.8)}
{background-color:rgba(186,186,113,1.0)}

{background-color:hsla(30,50%,50%,0.0)}
{background-color:hsla(30,50%,50%,0.0)}
{background-color:hsla(30,50%,50%,0.0)}
{background-color:hsla(30,50%,50%,0.0)}
{background-color:hsla(30,50%,50%,0.0)}
{background-color:hsla(30,50%,50%,0.0)}

This is a title

Nam non augue quis augue convallis adipiscing. Integer id velit nunc. Fusce auctor luctus sollicitudin. Suspendisse et arcu metus. Sed hendrerit, neque vitae posuere lacinia, risus ipsum semper neque, et volutpat urna purus aliquet lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dignissim sagittis tellus sed hendrerit. Praesent porta fringilla nisi iaculis aliquet.