apike.ca

SVG Color Reference

By mbystedt on Sep 3, 2018, 5:01:15 PM

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.