How to use the chroma-js 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 arso-project / archipel / app / src / theme.js View on Github external
value.forEach((val, i) => {
        a[key + i] = val
      })
    } else {
      a[key] = value
    }
    return a
  }, {})

// todo: flatten

export const colors = Object.assign({}, flattened, {
  black: '#000',
  white: '#fff',
  primary: primary,
  primary2: chroma(primary).darken().hex()

})

export default {
  ...theme,
  colors,
  palette
}
github studentinsights / studentinsights / app / assets / javascripts / class_lists / colors.js View on Github external
import chroma from 'chroma-js';

export const steelBlue = 'rgb(137, 175, 202)';

// For encoding gender as a color
export const male = 'rgba(41, 159, 197, 0.5)';
export const female = 'rgba(224, 99, 120, 0.5)';
export const nonBinary = 'rgba(81, 185, 86, 0.5)';
export function genderColor(gender) {
  if (gender === 'M') return male;
  if (gender === 'F') return female;
  return nonBinary;
}

export const high = chroma('green').alpha(0.5).css();
export const medium = chroma('orange').alpha(0.5).css();
export const low = chroma('red').alpha(0.5).css();
github Vizzuality / gfw / app / javascript / providers / datasets-provider / datasets-provider-actions.js View on Github external
params_config.map(p => p.key).includes('startDate');
                    const hasDecodeTimeline =
                      decode_config &&
                      decode_config.map(p => p.key).includes('startDate');
                    const timelineConfig = timeline_config && {
                      ...timeline_config,
                      railStyle: {
                        background: '#d6d6d9',
                        borderRadius: '0px'
                      },
                      trackStyle: [
                        {
                          background: customColor
                        },
                        {
                          background: chroma(customColor).darken(1.3)
                        }
                      ]
                    };

                    // get params
                    const params = params_config && reduceParams(params_config);
                    const decodeParams =
                      decode_config && reduceParams(decode_config);
                    const sqlParams = sql_config && reduceSqlParams(sql_config);

                    return {
                      ...info,
                      ...l,
                      ...(d.tableName && { tableName: d.tableName }),
                      ...l.applicationConfig,
                      // sorting position
github jxnblk / hello-color / src / index.js View on Github external
const negate = (color) => {
  const rgb = chroma(color).rgb()
  const neg = rgb.map((val, i) => 255 - val)
  return chroma(neg).hex()
}
github clarisights / KnitUI / src / common / _utils / index.ts View on Github external
!(
      chroma.valid(customColor) ||
      (typeof customColor === "object" &&
        chroma.valid(customColor.color) &&
        chroma.valid(customColor.secondaryColor))
    )
  ) {
    throw new Error("Provided color theme contains invalid color values")
  }
  if (typeof customColor === "object") {
    return {
      font: chroma(customColor.secondaryColor),
      background: chroma(customColor.color),
    }
  }
  customColor = chroma(customColor)
  return createParsedColorTheme(theme, customColor)
}
github Vizzuality / climate-watch / app / javascript / app / utils / graphs.js View on Github external
export const darkenColor = color => chroma(color).darken();
github nordnet / nordnet-ui-kit / src / components / graph / themes / muted.js View on Github external
outlineColor: chroma.mix(variables.colorBase, variables.colorGrayDarker, 0.7).css(),
    series: {
      color: '#fff',
    },
    xAxis: {
      gridLineColor: chroma(variables.colorGrayDark).alpha(0.3).css(),
      labels: {
        align: 'center',
        style: tickLabelStyle,
      },
    },
    handles: {
      backgroundColor: variables.colorGray,
      borderColor: variables.colorGrayDarker,
    },
    maskFill: chroma(variables.colorGrayDark).alpha(0.15).css(),
  },

  chart: {
    zoomType: 'x',
    backgroundColor: variables.colorGrayLight,
    events: {
      redraw: hlc,
    },
  },

  plotOptions: {
    series: {
      marker: {
        enabled: false,
      },
      animation: false,
github huangbuyi / vue-colors / src / components / Picker / Picker.vue View on Github external
setColor(v, model) {
			this.chroma = chroma(this.color)
			this.currColor = this.getColors(this.color)
		}
	},
github microsoft / fast-dna / packages / fast-colors / src / contrast.ts View on Github external
export function contrast(
    targetRatio: number,
    operandColor: string,
    referenceColor: string
): string {
    const operand: Chroma = Chroma(operandColor);
    const backgroundLuminance: number = Chroma(referenceColor).luminance();
    const luminositySwitch: LuminositySwitch = luminanceSwitch(
        operand.luminance(),
        backgroundLuminance
    );

    return Chroma(
        luminance(
            luminositySwitch(L1, L2)(targetRatio, backgroundLuminance),
            operand,
            luminositySwitch(Math.ceil, Math.floor)
        )
    ).hex();
}
github lyft / coloralgorithm / src / generate.js View on Github external
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],
      steps:specs.steps,
      label:specs.modifier * index,
      contrastBlack:contrastBlack,
      contrastWhite:contrastWhite,
      displayColor:displayColor,
    }
    colorMap.push(colorObj)
  }

  return colorMap
}