Процентное изменение цвета

// Функция для преобразования HEX в RGB
function hexToRgb(hex) {
  // Удаляем #, если есть
  hex = hex.replace(/^#/, '');
 
  // Обработка короткой формы #RGB
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }
 
  const bigint = parseInt(hex, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
 
  return { r, g, b };
}
 
// Функция для преобразования RGB в HEX
function rgbToHex(r, g, b) {
  const toHex = c => c.toString(16).padStart(2, '0');
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
 
// Функция для преобразования RGB в HSL
function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
 
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l;
 
  l = (max + min) / 2;
 
  if (max === min) {
    h = s = 0; // отсутсвие оттенка
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 
    switch (max) {
      case r:
        h = ((g - b) / d + (g < b ? 6 : 0));
        break;
      case g:
        h = ((b - r) / d + 2);
        break;
      case b:
        h = ((r - g) / d + 4);
        break;
    }
 
    h /= 6;
  }
 
  return { h, s, l };
}
 
// Функция для преобразования HSL в RGB
function hslToRgb(h, s, l) {
  let r, g, b;
 
  if (s === 0) {
    r = g = b = l; // achromatic
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };
 
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
 
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
 
  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
}
 
// Основная функция для получения светлого и темного варианта
function adjustColor(hexColor, percent) {
  const rgb = hexToRgb(hexColor);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
  // Изменяем L (яркость)
  hsl.l += percent / 100;
  // Ограничиваем значение между 0 и 1
  hsl.l = Math.min(1, Math.max(0, hsl.l));
  const rgbAdjusted = hslToRgb(hsl.h, hsl.s, hsl.l);
  return rgbToHex(rgbAdjusted.r, rgbAdjusted.g, rgbAdjusted.b);
}
 
// Исходный цвет
const baseColor = '#00FF7F';
 
// Получаем на 20% светлее
const lighterColor = adjustColor(baseColor, 20);
 
// Получаем на 20% темнее
const darkerColor = adjustColor(baseColor, -20);
 
console.log('На 20% светлее:', lighterColor);
console.log('На 20% темнее:', darkerColor);

function RGBToHSL(rgb: {
  r: number;
  g: number;
  b: number;
}): {
  h: number;
  s: number;
  l: number;
} {
  const { r: r255, g: g255, b: b255 } = rgb;
 
  const r = r255 / 255;
  const g = g255 / 255;
  const b = b255 / 255;
 
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
 
  let h = (max + min) / 2;
  let s = h;
  let l = h;
 
  if (max === min) {
    // Achromatic
    return { h: 0, s: 0, l };
  }
 
  const d = max - min;
  s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
  switch (max) {
    case r:
      h = ((g - b) / d + 0) * 60;
      break;
    case g:
      h = ((b - r) / d + 2) * 60;
      break;
    case b:
      h = ((r - g) / d + 4) * 60;
      break;
  }
 
  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}