index.js

// 获取HTML元素
const color1 = document.getElementById("color1");
const color2 = document.getElementById("color2");
const generateBtn = document.getElementById("generate");
const svgContainer = document.getElementById("svg-container");

// 点击 "Generate SVG" 按钮时执行生成SVG矩形的函数
generateBtn.addEventListener("click", () => {
  // 获取两种颜色
  const color1Value = color1.value;
  const color2Value = color2.value;

  // 将两种颜色转换为HSL格式
  const color1Hsl = rgbToHsl(hexToRgb(color1Value));
  const color2Hsl = rgbToHsl(hexToRgb(color2Value));

  // 计算颜色差值
  const hueDiff = color2Hsl[0] - color1Hsl[0];
  const satDiff = color2Hsl[1] - color1Hsl[1];
  const lumDiff = color2Hsl[2] - color1Hsl[2];

  // 创建SVG元素
  const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svgElement.setAttribute("viewBox", "0 0 500 200");
  svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");

  // 创建渐变元素
  const gradientElement = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
  gradientElement.setAttribute("id",