O'Reilly logo

SVG Colors, Patterns & Gradients by Kurt Cagle, Amelia Bellamy-Royds

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required