How to use the chroma-js.hsv function in chroma-js

To help you get started, we’ve selected a few chroma-js 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 ksc-fe / kpc / site / src / components / palette / index.js View on Github external
_palette(color, level) {
        const [h, s, b] = Chroma(color).hsv();
        const deS = s < 0.1 ? 0 : (s - 0.1) / 4;
        const inS = (1 - s) / 4;
        const deB = (1 - b) / 4;
        const inB = b <= 0.4 ? 0 : (b - 0.4) / 4;

        if (level < 0 && level >= -4)
            return Chroma.hsv(h + level, s + level * deS, b - level * deB).hex();
        else if (level > 0 && level <= 4)
            return Chroma.hsv(h + level, s + level * inS, b - level * inB).hex();
        else
            return color;
    }
github iyegoroff / react-native-image-filter-kit / examples / CustomNativeFilter / src / App.tsx View on Github external
setColor = ({ h, s, v }: HSV) => {
    this.setState({
      color: chroma.hsv(h, s, v).hex()
    })
  }
github lyft / coloralgorithm / src / generate.js View on Github external
var colorMap = []

  for (var index in lum_array) {

    var step = lum_array[index]

    var params = {
      hue:hue_array[index],
      saturation:sat_array[index],
      luminosity:lum_array[index],
    }

    if (params.saturation >  1) {params.saturation = 1}

    var hex = chroma(chroma.hsv([params.hue, params.saturation, params.luminosity]))
    var hexRGB = chroma(chroma.hsv([params.hue, params.saturation, params.luminosity])).rgb()

    const contrastWhite = chroma.contrast(hex, "white").toFixed(2)
    const contrastBlack = chroma.contrast(hex, "black").toFixed(2)

    var displayColor = ""
    if (contrastWhite >= 4.5) { displayColor = "white" } else { displayColor = "black" }

    var colorObj = {
      hex: chroma(hex).hex(),
      hue: chroma(hex).hsv()[0],
      sat: chroma(hex).hsv()[1],
      lum: chroma(hex).hsv()[2],
      hsv: chroma(hex).hsv(),
      hsl: chroma(hex).hsl(),
      rgb: chroma(hex).rgb(),
      hueRange: [specs.hue_start, specs.hue_end],
github Automattic / color-studio / utilities / color-algorithm / generate.js View on Github external
return luminositySteps.map((luminosity, index) => {
    const hue = hueSteps[index] % 360
    const saturation = Math.min(1, saturationSteps[index])

    return {
      color: chroma.hsv(hue, saturation, luminosity),
      properties: {
        hue,
        saturation,
        luminosity
      }
    }
  })
}