How to use the @ctrl/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 / lib / index.ts View on Github external
export default function coloringPalette(color: ColorInput, format: ColorFormat = 'hex') {
  const defaultColor = tinycolor(color)
  const { h, s, v } = defaultColor.toHsv()

  const hueStart = h
  const satStart = round(s * 10)
  const valStart = generateValStart(v * 100)
  const hueEnd = (h + 354) % 360
  const satEnd = round(atMost100(s * 108))
  const valEnd = round(v * 66)

  const palette = generateMaterialUIPalette({ hueStart, satStart, valStart, hueEnd, valEnd, satEnd, format })
  palette[500] = {
    color: formatColor(defaultColor, format),
    contrastText: formatColor(contrastText(defaultColor), format),
  }
  return palette
}
github bustle / coloring-palette / lib / index.ts View on Github external
export function contrastText(color) {
  return tinycolor(color).getLuminance() < 1 / 3 ? tinycolor('#FFF') : tinycolor('#000')
}
github bustle / coloring-palette / lib / index.ts View on Github external
function altColor(color: ColorInput, alt: 'A100' | 'A200' | 'A400' | 'A700') {
  const { h, s, v } = tinycolor(color).toHsv()
  const { hAdj, sAdj, vAdj } = altColorAdjs[alt]
  return tinycolor({ h: (h + hAdj) % 360, s: atMost100(s * sAdj), v: atMost100(v * vAdj) })
}
github bustle / coloring-palette / lib / index.ts View on Github external
function altColor(color: ColorInput, alt: 'A100' | 'A200' | 'A400' | 'A700') {
  const { h, s, v } = tinycolor(color).toHsv()
  const { hAdj, sAdj, vAdj } = altColorAdjs[alt]
  return tinycolor({ h: (h + hAdj) % 360, s: atMost100(s * sAdj), v: atMost100(v * vAdj) })
}
github bustle / coloring-palette / lib / index.ts View on Github external
valEnd,
  valCurve = easeOutQuad,
  steps = 10,
  format = null,
}: GenerateShadesOptions) {
  const hueArray = generatePointsOnCurve(hueCurve, steps)
  const satArray = generatePointsOnCurve(satCurve, steps)
  const valArray = generatePointsOnCurve(valCurve, steps).reverse()

  const shades: Color[] = []

  for (let index = 0; index < steps; index++) {
    const hueStep = distribute(hueArray[index], [0, 1], calcHueDistance(hueStart, hueEnd))
    const satStep = distribute(satArray[index], [0, 1], [satStart, satEnd]) * (satRate * 0.01)
    const valStep = distribute(valArray[index], [0, 1], [valEnd, valStart])
    const color = tinycolor({
      h: (ceil(hueStep) + 360) % 360,
      s: atMost100(ceil(satStep)),
      v: atMost100(ceil(valStep)),
    })

    shades.push(formatColor(color, format))
  }

  return shades
}

@ctrl/tinycolor

Fast, small color manipulation and conversion for JavaScript

MIT
Latest version published 7 months ago

Package Health Score

76 / 100
Full package analysis