type RGB = [number, number, number]; const grey: RGB = [237, 242, 246]; // grey-200 const red: RGB = [221, 103, 81]; // red-600 const yellow: RGB = [250, 200, 82]; // yellow-500 const lightGreen: RGB = [120, 222, 163]; // green-500 const darkGreen: RGB = [91, 183, 130]; // green-600 const blendColorValue = (v1: number, v2: number, weight: number): number => { return v1 * (1 - weight) + v2 * weight; }; const blendColors = (c1: RGB, c2: RGB, weight: number): RGB => { const [r1, g1, b1] = c1; const [r2, g2, b2] = c2; return [ blendColorValue(r1, r2, weight), blendColorValue(g1, g2, weight), blendColorValue(b1, b2, weight), ]; }; const getRGBString = (color: RGB): string => { const [r, g, b] = color; return `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`; }; export const getBlendedColorForRating = (rating: number): string => { const scale = Math.floor(rating); const weight = rating % 1; let colors: [RGB, RGB]; switch (scale) { case 0: return getRGBString(grey); case 1: colors = [red, yellow]; break; case 2: colors = [yellow, lightGreen]; break; case 3: colors = [lightGreen, darkGreen]; break; case 4: default: return getRGBString(darkGreen); } const blendedColor = blendColors(colors[0], colors[1], weight); return getRGBString(blendedColor); };