apphouse/dist/utils/color/getShades.ts

Component library for React that uses observable state management and theme-able components.

export function getShadesOfColor(baseColor: string): string[] {
  const shades: string[] = [];

  // Convert base color to RGB values
  const baseRGB = hexToRGB(baseColor);

  // Generate five shades using linear interpolation
  for (let i = 0; i < 5; i++) {
    const ratio = (i + 1) * 0.2;
    const shadeRGB = interpolateRGB(baseRGB, ratio);
    const shadeHex = RGBToHex(shadeRGB);
    shades.push(shadeHex);
  }

  return shades;
}

// Helper functions
export function hexToRGB(hex: string): [number, number, number] {
  const bigint = parseInt(hex.slice(1), 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return [r, g, b];
}

export function interpolateRGB(
  rgb: [number, number, number],
  ratio: number
): [number, number, number] {
  const [r, g, b] = rgb;
  const targetR = Math.floor(r * (1 - ratio));
  const targetG = Math.floor(g * (1 - ratio));
  const targetB = Math.floor(b * (1 - ratio));
  return [targetR, targetG, targetB];
}

export function RGBToHex(rgb: [number, number, number]): string {
  const [r, g, b] = rgb;
  const hexR = r.toString(16).padStart(2, '0');
  const hexG = g.toString(16).padStart(2, '0');
  const hexB = b.toString(16).padStart(2, '0');
  return `#${hexR}${hexG}${hexB}`;
}