How to use @pluginjs/color - 10 common examples

constructor(instance, element) {
    this.instance = instance
    this.element = element
    this.classes = this.instance.classes
    this.opac = 100
    this.color = null

    this.COLOR = new Color()
    this.mode = this.COLOR.toHEX()
    this.HSL = this.COLOR.toHSL().toUpperCase()
    this.HEX = this.COLOR.toHEX().toUpperCase()
    this.RGB = this.COLOR.toRGB().toUpperCase()

    this.classify = this.HEX

    this.data = [
      { label: this.HEX, value: 'HEX' },
      { label: this.HSL, value: 'HSL' },
      { label: this.RGB, value: 'RGB' }
    ]
    // this.bind()

    this.init()
  }

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(instance, element) {
    this.instance = instance
    this.element = element
    this.classes = this.instance.classes
    this.opac = 100
    this.color = null

    this.COLOR = new Color()
    this.mode = this.COLOR.toHEX()
    this.HSL = this.COLOR.toHSL().toUpperCase()
    this.HEX = this.COLOR.toHEX().toUpperCase()
    this.RGB = this.COLOR.toRGB().toUpperCase()

    this.classify = this.HEX

    this.data = [
      { label: this.HEX, value: 'HEX' },
      { label: this.HSL, value: 'HSL' },
      { label: this.RGB, value: 'RGB' }
    ]
    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
  }

e => {
          if (new Color().matchString(e.target.value)) {
            this.set(e.target.value)
          }
        },
        this.element

e => {
        if (
          new Color().matchString(e.target.value) ||
          new Gradient().matchString(e.target.value)
        ) {
          this.set(this.options.parse.call(this, e.target.value))
        }
      },
      this.element

const top = (1 - color.value.v) * this.maxLengthY - this.size
    const hue = color.value.h

    this.hue = color.value.h

    setStyle(
      {
        top: `${top}px`,
        left: `${left}px`
      },
      this.$pointer
    )

    setStyle(
      {
        backgroundColor: Converter.HSLtoHEX({
          h: hue,
          s: 1,
          l: 0.5
        })
      },
      this.element
    )
  }

const top = (1 - color.value.v) * this.maxLengthY - this.size
    const hue = color.value.h

    this.hue = color.value.h

    setStyle(
      {
        top: `${top}px`,
        left: `${left}px`
      },
      this.$pointer
    )

    setStyle(
      {
        backgroundColor: Converter.HSLtoHEX({
          h: hue,
          s: 1,
          l: 0.5
        })
      },
      this.element
    )
  }