Avoid too similar colors

[Kikobeats]

Hey, I really love this library, thanks for that 🙂

I want to ask if could be possible to add a way to avoid too similar colors since they look too close and in some context that is confuse

[jessuni]

Sorry for the late reply. As I'm currently working on other projects, I could't spare much effort in this one. If you have found the solution, a PR is always welcome :)

If you're not in a hurry, I might dive into the codes and improve the algorithm a bit later.

[Kikobeats]

Hey Jess, no rush!

I tried to improve the algorithm by myself but I don't understand the code too well 😅 so yea I can wait!

[pmartiner]

@Kikobeats what worked for me was the following:

1. Adding a variable that stores the previous color so that the color param for the new SafeColor always contrasts with the previous one.
2. Passed a unique string id so that when I generate a random color it's unique :)

[Kikobeats]

@pmartiner that sounds smart!

Can you share the code snippet? 🙂

[pmartiner]

Sure thing! My use case was rendering a Chart.js line chart with an automated color array with different and accessible colors, FYI.

        let prevColor: number[] = [255, 255, 255];

        const dataCampaignByDatesDataset = dataCampaignByDatesFiltered.map(obj => {
          const safeColor = new SafeColor({
            color: prevColor,
            contrast: 4.5,
          });
          const randomRgb = safeColor.random(obj.name);
          const rgbArray = randomRgb.substring(4, randomRgb.length - 1).split(',');
          const r = rgbArray[0];
          const g = rgbArray[1];
          const b = rgbArray[2];
          const alpha = 0.7;
          const rgb = `rgb(${r}, ${g}, ${b})`;
          const rgba = `rgb(${r}, ${g}, ${b}, ${alpha})`;
          prevColor = [r, g, b];

          return {
            label: obj.name,
            data: obj.amount,
            backgroundColor: rgba,
            borderColor: rgb,
            fill: 'start'
          };
        });

[jessuni]

@pmartiner wow, that's a smart workaround.

@Kikobeats what worked for me was the following:

1. Adding a variable that stores the previous color so that the color param for the new SafeColor always contrasts with the previous one.
2. Passed a unique string id so that when I generate a random color it's unique :)