demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Color in CSS

css / color

Estimated reading time: 4 minutes

There are four methods of producing color in CSS: keyword, hexadecimal, rgb and hsl. The first two were introduced with CSS1, and are available to every graphical web browser, the last is CSS3. rgb and hsl both have an “alpha” derivative that determines opacity (rgba and hsla, respectively.)

Keywords

Color keywords have long been supported by web browsers. 16 of them of them were officially adopted by the W3C as a standard: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. For example:

body { background-color: white; }

CSS Level 3 expanded this list to create keyword references for 140 “web standard” colors, many of which are somewhat arcane: salmon, aliceblue, and smoke, for example. There are many sources for these color keywords: one example.

As a general rule, if given the choice between using color keywords and hexadecimal, choose hex.

Hexadecimal

While color keywords are limited to 140 named colors, the hexadecimal (or “hex”) method is not. Unlike our familiar base-10 system, which uses the integers from 0 to 9, the hexadecimal system has 16 digits: 0 to 9, followed by a to f.

When used to define colors, there are three sets of hexadecimal numbers, representing the red, green, and blue components. Each set consists of two hexadecimal numbers (16 × 16 = 256 possible levels for that color component). So a representation like #ffffff would mean that red, green and blue components were “full on”, creating white. #000000 would be “all off”, creating black, #ff0000 would be a pure red, and #777777 would be grey.

“Web safe” colors are created when the number in each color pair is the same (00, 77, ee, etc), and is therefore the most common form you will find. If that is the case, CSS gives you the option to shortcut the code, so that black becomes #000, red #f00, etc. For example:

p { color: #000; }

The hexadecimal values to not have to be the same for each pair: #3fa027 is a perfectly valid hex color. It is important to understand that hexadecimal allows access to the same gamut as the two other color systems discussed below; the color variety is not greater or less under rgb or hsl. There are even hexadecimal codes for every Crayola color.

rgb

While longer-winded and no more or less accurate than hex, the rgb method is easier to manipulate directly via scripts.

rgb values can be specified as values between 0 and 255:

h3 { color: rgb(100, 18, 255); }

Or as percentages:

h3 { color: rgb(50%, 6%, 100%); }

CSS3 introduces an rgba derivation of this method, in which the a component represents alpha, or opacity, as a floating point number between 0 (fully transparent) and 1 (fully opaque). For example, to produce a div with an id of and a background-color of red that is half-way transparent:

div#content { background-color: rgba(255,0,0, 0.5); }

hsl

hsl color wheelFinally, CSS3 also adds the hsl method, representing hue, saturation, and luminosity. In theory, this allows developers to modify a color to “deeper” or “lighter” quickly and easily in response to client demands.

Rather than a series of “sliders”, hsl is based on a color wheel, moving from red through yellow, green, blue and violet and then back to red. Hue is therefore given as degrees around this circle, with the starting and ending point, red, being both 0 and 360 degrees. Saturation and luminosity are given as percentages:

div#content { background-color: hsl(10,100%,10%); }

There is also hsla, which uses the same floating-point method for opacity that rgba does.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.