How to use the tinycolor2.fromRatio function in tinycolor2

export function getColorFromRGBA (state, channel, value) {
  const color = tinycolor.fromRatio(state.color).toRgb();
  color[channel] = value;

  return color;
}

function renderSwatch (state) {
  const color = tinycolor.fromRatio(state.color);

  const swatchBackground = color.clone().setAlpha(state.color.a);
  const swatchStyle = {'background-color': tinycolor(swatchBackground).toRgbString()};

  return (
    div('.swatch', [
      div('.swatch-underlay', [
        div('.swatch-color', {style: swatchStyle})
      ])
    ])
  );
}

var format = this.get('format');

                var r = this.get('r');
                var g = this.get('g');
                var b = this.get('b');

                var h = this.get('h');
                var s = this.get('s');
                var v = this.get('l');
                var a = this.get('a');

                var color;

                if(format == 'Hsl')
                    color = tinycolor.fromRatio({h:h, s:s, v:v, a:a});
                else
                    color = tinycolor.fromRatio({r:r, g:g, b:b, a:a});

                if(a < 1 && format == 'Hex')
                    format += '8';

                return color['to'+format+'String']()
            },

function renderColorInputs (state) {
  const format = state.colorInputFormat.value;
  const color = tinycolor.fromRatio(state.color);

  return div('.color-display', [
    colorInputViews[format](color)
  ]);
}

function renderAlphaInput (state) {
  const alphaIndicatorStyle = {
    left: `${state.alphaContainer.width * state.color.a}px`
  };

  const color = tinycolor.fromRatio(state.color);

  const gradientStart = color.clone().setAlpha(0);
  const gradientStyle = {background: `linear-gradient(to right, ${tinycolor(gradientStart).toRgbString()}  0%, ${color.toHexString()} 100%)`};

  return (
    div('.alpha-container', [
      div('.alpha', [
        div('.checkerboard'),
        div('.gradient-overlay', {style: gradientStyle}),
        div('.alpha-indicator', {style: alphaIndicatorStyle})
      ])
    ])
  );
}

})

  icon.onmouseover = function () {
    picker.$el.style.display = ''
  }

  var initial = opts.initial
  switch (opts.format) {
    case 'rgb':
      initial = tinycolor(initial).toHexString()
      break
    case 'hex':
      initial = tinycolor(initial).toHexString()
      break
    case 'array':
      initial = tinycolor.fromRatio({r: initial[0], g: initial[1], b: initial[2]}).toHexString()
      break
    default:
      break
  }

  var picker = new ColorPicker({
    el: icon,
    color: initial,
    background: theme.background1,
    width: 125,
    height: 100
  })

  css(picker.$el, {
    marginTop: '2em',
    display: 'none',

export function hexColor (color) {
  if (color) {
    return tinycolor.fromRatio({r: color.red(), g: color.green(), b: color.blue()}).toHexString().toUpperCase()
  } else {
    return null
  }
}

self.observe('h s l', function() {

            var h = this.get('h');
            var s = this.get('s');
            var v = this.get('l');

            var color = tinycolor.fromRatio({h:h, s:s, v:v});

            var rgb = color.toRgb();

            self.set({
                r: rgb.r,
                g: rgb.g,
                b: rgb.b,
            });

        }, {init: false});