Painting - Color

Color is crucial to an SVG image. Color values are used for painting operations in SVG including filling and stroking.

SVG can accept a variety of ways to specify a color.

• A color name such as red, blue, green etc.
  rect width="10" height="10" style="fill:coral" />

• A numerical RGB specification defining the red, green and blue components of the color in
  one of three ways:
  • rgb(r,g,b) where r, g and b are values in the range 0 to 255
  
  <rect width="10" height="10" style="fill:rgb(255,127,80)" />
   
  • #rgb where r, g and b are hexadecimal values (for example #f00)
    <rect width="10" height="10" style="fill:#f75" />
     
  • #rrggbb where rr, gg and bb define a value in the range 0 to 255 as two hexadecimal values
    <rect width="10" height="10" style="fill:#ff7f50" />

Color keywords are great for quick designation of a color. However, they are often not the precise color. Hexadecimal notation of color offers a greater number of possibilities for defining an RGB color than the keyword method.

There are over 140 color names defined in SVG.