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

Appendix A. Color Keywords and Syntax

Colors within SVG and CSS may be specified either as exact numerical values or by using predefined color keywords.

Custom solid colors can be specified in any of the following formats:

  • #RRGGBB, six hexidecimal digits, with each pair representing a value between 0 (00) and 255 (FF) for each color channel

  • #RGB, three hexadecimal digits, equivalent to the six-digit version with every digit duplicated

  • rgb(r,g,b), with either three integers between 0 and 255, or three percentage values

  • hsl(h,s,l), where the first (hue) parameter is a number representing an angle in degrees on the color wheel (relative to red), and the saturation and lightness values are percentages

Custom partially transparent colors can be specified with one of two functions:

  • rgba(r,g,b,a), where the first three values may either be percentages or integers and the a value is a decimal between 0 and 1

  • hsla(h,s,l,a), where the parameters are a number, two percentages, then a decimal alpha value between 0 and 1

The named solid colors are listed in Table A-1 along with their equivalents in hexadecimal, RGB, and HSL formats. The percentage RGB values and HSL values have been rounded to whole numbers. In addition, the keyword transparent represents rgba(0,0,0,0) or hsla(0,0%,0%,0).

Table A-1. Named colors in SVG and CSS
Keyword Hex value RGB decimal RGB percent HSL
R G B R G B H S L

AliceBlue

#f0f8ff

240

248

255

94%

97%

100%

208

6%

97%

antiqueWhite ...

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