What should the color value be if there were slate-150 and gray-150?

[GorvGoyl]

The difference between 100 and 200 is a bit too much for some of my use cases, and I wish there was also a 150. Can someone please suggest color values for slate-150 and gray-150?

[maxlshk]

Hey @GorvGoyl !

The values for colors like gray-150 or slate-150 can be easily calculated through present values of 100 and 200 using JS:

slate_100_rgb = (241, 245, 249)
slate_200_rgb = (226, 232, 240)

gray_100_rgb = (243, 244, 246)
gray_200_rgb = (229, 231, 235)

slate_150_rgb = tuple((a + b) // 2 for a, b in zip(slate_100_rgb, slate_200_rgb))
gray_150_rgb = tuple((a + b) // 2 for a, b in zip(gray_100_rgb, gray_200_rgb))

And then converted to hex:

def rgb_to_hex(rgb):
    return '#' + ''.join(f'{value:02x}' for value in rgb)

Tailwind Play example: https://play.tailwindcss.com/h79sVmFZPz

Check the config tab for the values 🤓

[GorvGoyl]

thanks, i converted that to a js function:

function calculate150RgbAndConvertToHex(rgb100, rgb200) {
    // Calculate the 150 RGB color by averaging the 100 and 200 RGB values
    const rgb150 = rgb100.map((value, index) => Math.floor((value + rgb200[index]) / 2));

    // Convert the 150 RGB color to a HEX color code
    const hex150 = '#' + rgb150.map(value => {
        const hex = value.toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    }).join('');

    return hex150;
}

// how to use
calculate150RgbAndConvertToHex([241, 245, 249],[226, 232, 240]);  //output: e9eef4