JSFiddle - React, Tailwind, and code Playground

by brainsengineering

JavaScript

function generateUniqueColors(startColor, count) {
    let colors = [startColor]; // Aggiunge il colore iniziale all'array
    let currentColor = startColor;
let increment = 360 / count
    for (let i = 1; i < count; i++) {
        // Converti il colore corrente in formato HSL
        let hsl = hexToHSL(currentColor);
        // Aumenta la tonalitĂ  (Hue) di un valore fisso per ogni iterazione
        hsl.h = (hsl.h + increment) % 360; // Modifica l'incremento per variare l'intervallo di colori
console.log(hsl.h);
        // Converte il colore HSL modificato di nuovo in HEX e lo aggiunge all'array
        currentColor = HSLToHex(hsl.h, hsl.s, hsl.l);
        colors.push(currentColor);
    }

    return colors;
}

function hexToHSL(H) {
    // Converti il colore da HEX a R,G,B
    let r = 0, g = 0, b = 0;
    if (H.length == 4) {
      r = "0x" + H[1] + H[1];
      g = "0x" + H[2] + H[2];
      b = "0x" + H[3] + H[3];
    } else if (H.length == 7) {
      r = "0x" + H[1] + H[2];
      g = "0x" + H[3] + H[4];
      b = "0x" + H[5] + H[6];
    }
    
    // Converti R,G,B da 0-255 a 0-1
    r /= 255;
    g /= 255;
    b /= 255;

    let cmin = Math.min(r,g,b),
        cmax = Math.max(r,g,b),
        delta = cmax - cmin,
        h = 0,
        s = 0,
        l = 0;

    if (delta == 0)
      h = 0;
    else if (cmax == r)
      h = ((g - b) / delta) % 6;
    else if (cmax == g)
      h = (b - r) / delta + 2;
    else
      h = (r - g) / delta + 4;

    h = Math.round(h * 60);
    
    if (h < 0)
      h += 360;

    l = (cmax + cmin) / 2;
    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);

    return {h, s, l};
}

function HSLToHex(h,s,l) {
    s /= 100;
    l /= 100;

    let c = (1 - Math.abs(2 * l - 1)) * s,
        x = c * (1 - Math.abs((h / 60) % 2 - 1)),
        m = l - c/2,
        r = 0,
        g = 0,
        b = 0;

    if (0 <= h && h < 60) {
      r = c; g = x; b = 0;
    } else if (60...