동적 텍스트 요소에 대해 반대 배경색을 생성하려면 어떻게 해야 합니까?

function invertColor(hex) {
  // Convert hex to RGB
  const rgb = hex.match(/[a-f\d]{2}/gi).map(x => parseInt(x, 16));

  // Invert R, G, and B
  const inverted = rgb.map(x => 255 - x);

  // Convert RGB to hex
  const invertedHex = inverted.map(x => x.toString(16).padStart(2, '0')).join('');

  // Return inverted color
  return "#" + invertedHex;
}

const originalColor = "#F0F0F0"; // Bright color
const oppositeColor = invertColor(originalColor); // Should be "#202020" or a dark color

function invertColor(hex, bw) {
  // Convert hex to RGB
  const rgb = hex.match(/[a-f\d]{2}/gi).map(x => parseInt(x, 16));

  // Calculate luminosity
  const luminosity = rgb.reduce((a, b) => a + 0.299 * b + 0.587 * b + 0.114 * b) / 255;

  // Invert to black or white based on luminosity
  const invertedHex = luminosity > 0.5 ? "#000000" : "#FFFFFF";

  // Return inverted color
  return invertedHex;
}