How to use the @ctrl/tinycolor/.TinyColor function in @ctrl/tinycolor

To help you get started, we’ve selected a few @ctrl/tinycolor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bustle / coloring-palette / index.ts View on Github external
}: GenerateShadesOptions) {
  const hueArray = generatePointsOnCurve(hueCurve, steps)
  const satArray = generatePointsOnCurve(satCurve, steps)
  const valArray = generatePointsOnCurve(valCurve, steps).reverse()
  const hueDistance = calcShortestDistance(hueStart, hueEnd)
  const calcHueEnd = hueStart + hueDistance === hueEnd ? hueStart + hueDistance : hueStart - hueDistance

  const shades: any[] = []

  for (let index = 0; index < steps; index++) {
    const hueStep = distribute(hueArray[index], [0, 1], [hueStart, calcHueEnd])
    const satStep = distribute(satArray[index], [0, 1], [satStart, satEnd]) * (satRate * 0.01)
    const valStep = distribute(valArray[index], [0, 1], [valEnd, valStart])

    shades.push(
      new TinyColor({
        h: (Math.ceil(hueStep) + 360) % 360,
        s: Math.ceil(satStep) > 100 ? 100 : Math.ceil(satStep),
        v: Math.ceil(valStep),
      })
    )
  }

  return shades
}

@ctrl/tinycolor

Fast, small color manipulation and conversion for JavaScript

MIT
Latest version published 10 days ago

Package Health Score

85 / 100
Full package analysis