How to use the chroma-js.hcl 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 internalfx / distinct-colors / src / index.js View on Github external
var rangeDivider = Math.cbrt(options.samples)
  rangeDivider *= 1.001

  var hStep = (options.hueMax - options.hueMin) / rangeDivider
  var cStep = (options.chromaMax - options.chromaMin) / rangeDivider
  var lStep = (options.lightMax - options.lightMin) / rangeDivider

  if (hStep <= 0) { throw new Error('hueMax must be greater than hueMin!') }
  if (cStep <= 0) { throw new Error('chromaMax must be greater than chromaMin!') }
  if (lStep <= 0) { throw new Error('lightMax must be greater than lightMin!') }

  for (let h = options.hueMin; h <= options.hueMax; h += hStep) {
    for (let c = options.chromaMin; c <= options.chromaMax; c += cStep) {
      for (let l = options.lightMin; l <= options.lightMax; l += lStep) {
        const color = chroma.hcl(h, c, l).lab()
        if (checkColor(color, options)) {
          samples.add(color.toString())
        }
      }
    }
  }

  samples = Array.from(samples)
  samples = samples.map(i => i.split(',').map(j => parseFloat(j)))

  if (samples.length < options.count) {
    throw new Error('Not enough samples to generate palette, increase sample count.')
  }

  const sliceSize = Math.floor(samples.length / options.count)
github Hermanya / color-system / src / hooks / useColorSystem.js View on Github external
lightness =>
          chromajs.hcl(hue, mapChroma(saturation, lightness), lightness).hex()
      );
github chartaccent / chartaccent / colors.js View on Github external
var colors = x.map((i) => {
    var value = i / 9;
    var pcolor = primaryColor.hcl();
    pcolor[2] = (chroma("#FFF").hcl()[2] - chroma("#000").hcl()[2]) * value + chroma("#000").hcl()[2];
    return "$primary-" + i + "00: " + chroma.hcl(pcolor).hex() + ";";
}).join("\n");
github Hermanya / color-system / src / hooks / useColorSystem.js View on Github external
gray: lightnessScale.map(lightness =>
        chromajs.hcl(0, 0, lightness).hex()
      ),