Chapter 3. Creating Colors

In this chapter, we more thoroughly examine the options for filling your graphics with solid blocks of color. It starts by outlining how color works on the Web, and describes the different ways in which you can specify colors on the Web: from the very readable (but not very rational) color keywords, to RGB and HSL color functions.

The color basics will be complemented by a discussion of partially transparent colors in Chapter 4. Color concepts are also an essential prerequisite for the colored gradients that will be introduced starting in Chapter 6.

Misty Rose by Any Other Name

When writing code for other people to read (for example, the examples in this book!), it is nice to be able to use human-readable color names like red or gold or aquamarine.

It is even nicer if a computer can read the same values. And with SVG, they can. Web browsers and SVG editors should all understand red, gold, and aquamarine. They will also recognize more fanciful names like mistyRose, peachPuff, and mediumSeaGreen.

Where do these names come from? There are two sources: a very simple set of color keywords that was introduced in early versions of HTML and CSS, and a much more extensive set of keywords that were adopted by SVG (and later CSS) from the X11 windowing system for Unix computers.1 Both sets of keywords are supported in all major SVG viewers. In addition, all but the oldest browsers in use also support them for other CSS properties.

As user-friendly as they are, ...

Get SVG Colors, Patterns & Gradients now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.