internalfx/distinct-colors

Generate a palette of visually distinct colors. It's great for charts.

distinct-colors's Issues

Certain option values throw errors

This throws an error:
var pallet = DistinctColors({count:50, lightMin: 50})
TypeError: Reduce of empty array with no initial value

If lightMin is less than 50, it works. I also see it in other random places, for example if hueMin is 300.

Typescript description file required

Thanks for create this useful module!
As Typescript getting more and more popular, I believe create a .d.ts Typescript declaration file will help the Typescript user easier to use this module and promote this module to more people!

Doesn't generate palette with (relatively) large number of colors

First of all - thanks for great library!

Recently found out that It fails for me to generate 408 distinct colors. Here is codepen. I tried it with count - 500, and it worked.

Duplicate samples being created in certain cases.

For some reason sometimes 3 different HCL values product the same lab color.

This breaks stuff, badly.

Generating an open-ended stream of distinct colors

A feature I've been looking for in a library like this is the ability to generate an open-ended stream of distinct colors. In other words: given a set of past colors, generate a new color that is as distinct from those as possible.

For a moment I thought you already supported that feature, because the docs indicate that count: Infinity is a valid option? But it seems doubtful, since you're returning an array.

Anyway, consider it a feature request. Though I'd understand if it's not planned.

Not working in Internet Explorer

Is anyone else having issues with this package running in Internet Explorer? It works great in Google Chrome, but it will not work for me in IE 11.

what settings work best to create light yet distinct colors?

Color blindness

The I want hue demo has a colorblindness option which seems to be missing from the configuration options available here.

Reduce or empty array with no initial value error

I get it on this:

palette = new DistinctColors({count: 34, lightMin: 70, chromaMin: 60, samples: 100});

state issue

beware when opening this link, cpu runs at 100% in the service worker

https://codesandbox.io/s/distinct-colors-state-issue-iufog

calling 2 times with same config is ok

console.log(distinctColors({ count: 26, lightMin: 50 }));
console.log(distinctColors({ count: 26, lightMin: 50 }));

but calling with different config will cause cpu runs at 100% and never return value

console.log(distinctColors({ count: 26, lightMin: 50 }));
console.log(distinctColors({ count: 26, lightMax: 50 }));

EDIT: calling only either one of them is totally fine

This is great! What else can it do?

This is already a really useful tool, but I feel like there's a lot I don't know about. Are there any demos?

I made a codesandbox to get it going with react hooks for any newbies like myself. I don't know if it's worth putting something like this on your ReadMe, as it would have saved someone like me a bit of time. There's a whole lot of methods with the distinctColors() object, but I don't understand a lot of it. It'd be great to see more of it in action.

Exception thrown in some specific condition (related to counts parameter)

Current Behaviour:
Exception throw when the function is called with option {count:85},

> DC = require('./lib').default
[Function: distinctColors]
> DC({count:85})
Thrown:
TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
    at Object.sum (/Users/xxx/distinct-colors/lib/utils.js:9:18)
    at distinctColors (/Users/xxx/distinct-colors/lib/index.js:195:36)

Expectation:
Output the correct colors.

dist build issue

version affected: 2.0.0

can't use it in vue (created using vue cli)

import distinctColors from "distinct-colors";

console.log(distinctColors); // output {}

can only use with

import distinctColors from "distinct-colors/src";

console.log(distinctColors);
/* output
ƒ (opts = {}) {
  var options = { ...defaults, ...opts }

  if (options.count <= 0) { return [] }

  if (options.samples < options.count * 5) {
    options.samples = options.count * 5
  }

  var colors…
*/