How to use the @pluginjs/color.Color.of function in @pluginjs/color

initialize() {
    // take element defalut value
    this.elementColor = this.element.value

    // init Color
    this.asColor = Color.of(this.options.defaultColor, this.options.color)

    // init frame
    this.initFrame()

    // set theme
    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    // init collection
    if (this.hasModule('collection')) {
      this.initCollection()
    }

    // init solid
    if (this.hasModule('solid')) {

this.setupI18n()
    // class
    this.setupClasses()
    compose(
      attr({ placeholder: this.options.placeholder }),
      addClass(this.classes.INPUT, 'pj-input')
    )(this.element)

    // init global vars
    this.$body = query('body')

    this.color = this.options.defaultColor || '#000'
    this.oldColor = null

    this.module = this.options.module
    this.COLOR = Color.of(this.options.defaultColor, this.options.color)

    this.setupStates()
    this.initialize()
  }

constructor(instance, element) {
    this.instance = instance
    this.element = element
    this.classes = this.instance.classes
    this.color = Color.of(
      this.instance.options.defaultColor,
      this.instance.options.color
    )

    this.init()
  }

constructor(color, position, gradient) {
    this.color = Color.of(color, gradient.options.color)
    this.position = GradientString.parsePosition(position)
    this.id = ++gradient.privateStopIdCount
    this.gradient = gradient
  }