SVG.js has a dedicated color class handling different types of colors. Accepted values are:

  • hex string; three based (e.g. #f06) or six based (e.g. #ff0066) new SVG.Color('#f06')
  • rgb string; e.g. rgb(255, 0, 102) new SVG.Color('rgb(255, 0, 102)')
  • rgb object; e.g. { r: 255, g: 0, b: 102 } new SVG.Color({ r: 255, g: 0, b: 102 })

Note that when working with objects is important to provide all three values every time.

The SVG.Color instance has a few methods of its own.


returns SVG.Color

Get morphable color at given position:

var color = new SVG.Color('#ff0066').morph('#000') //-> '#7f0033'


returns number

Get the brightness of a color:

color.brightness() //-> returns 0.344

This is the perceived brightness where 0 is black and 1 is white.


returns itself

Make a color morphable:



returns string

Get hex value:

color.toHex() //-> returns '#ff0066'


returns string

Get rgb string value:

color.toRgb() //-> returns 'rgb(255,0,102)'
Fork me on GitHub