apike.ca

SVG Color Reference

The ways colors in SVG can be expressed will be very familiar to anyone with experience with HTML and CSS colors. Colors can be written as a hex number like "#FFFFFF", a rgb pseudo-function like "rgb(255, 255, 255) or rgb(100%, 100%, 100%)" or as keyword name like "white." The pseudo-functions allow numbers outside of 0 to 255 to be entered but this has no effect as the value is clipped to the minimum and maximum of 0 and 255.

Colors in SVG cannot be expressed as "rgba(...)" as opacity is an explicit attribute in SVG unlike HTML.

Color Keywords

The following table shows all the official colors names in SVG. The hex equivalent can be seen by hovering over the rgb values.

Name RGB
aliceblue rgb(240,248,255)
aqua rgb(0,255,255)
azure rgb(240,255,255)
bisque rgb(255,228,196)
blanchedalmond rgb(255,235,205)
blueviolet rgb(138,43,226)
burlywood rgb(222,184,135)
chartreuse rgb(127,255,0)
coral rgb(255,127,80)
cornsilk rgb(255,248,220)
cyan rgb(0,255,255)
darkcyan rgb(0,139,139)
darkgray rgb(169,169,169)
darkgrey rgb(169,169,169)
darkmagenta rgb(139,0,139)
darkorange rgb(255,140,0)
darkred rgb(139,0,0)
darkseagreen rgb(143,188,143)
darkslategray rgb(47,79,79)
Name RGB
antiquewhite rgb(250,235,215)
aquamarine rgb(127,255,212)
beige rgb(245,245,220)
black rgb(0,0,0)
blue rgb(0,0,255)
brown rgb(165,42,42)
cadetblue rgb(95,158,160)
chocolate rgb(210,105,30)
cornflowerblue rgb(100,149,237)
crimson rgb(220,20,60)
darkblue rgb(0,0,139)
darkgoldenrod rgb(184,134,11)
darkgreen rgb(0,100,0)
darkkhaki rgb(189,183,107)
darkolivegreen rgb(85,107,47)
darkorchid rgb(153,50,204)
darksalmon rgb(233,150,122)
darkslateblue rgb(72,61,139)
darkslategrey rgb(47,79,79)