如何生成给定十六进制代码的相反颜色？-css教程-PHP中文网

如何生成给定十六进制代码的相反颜色？

Linda Hamilton

发布： 2024-11-13 16:24:03

原创

360 人浏览过

How to Generate the Opposite Color of a Given Hex Code?

从给定颜色生成相反颜色

从给定颜色确定相反颜色是网页和图形设计中的常见要求。当文本颜色是动态的并且需要调整背景颜色以提高可读性时，这一点变得至关重要。我们的目标是创建一个函数，获取当前颜色并生成其相反颜色，从而产生提供高对比度和清晰文本可见性的颜色。

生成相反颜色的算法

为了实现我们的目标，我们提出以下算法：

转换当前颜色从十六进制格式转换为 RGB 格式。 这涉及从十六进制代码中提取红色、绿色和蓝色值。
反转每个 R、G 和 B 分量。 这意味着计算（255 - 分量）。
将反转的分量转换回十六进制格式。
用零填充每个十六进制组件以确保其长度为两个字符。
将反转的颜色作为十六进制代码输出.

实施JavaScript 中的算法

下面是概述算法的 JavaScript 实现：

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }

  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join('0');
  return (zeros + str).slice(-len);
}

登录后复制

此函数接受十六进制颜色代码并返回其相反的颜色。例如，如果我们提供颜色“#F0F0F0”，我们将得到“#0F0F0F”作为相反颜色。

高级选项：考虑亮度

在某些情况下在某些情况下，在生成相反颜色时可能需要考虑颜色的亮度。这是包含 bw 参数的函数的修改版本：

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }

  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);

  if (bw) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }

  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

登录后复制

如果 bw 参数设置为 true，则如果给定颜色为浅色 (#000000)，则函数将返回黑色，如果给定颜色为浅色，则函数将返回白色。很黑（#FFFFFF）。否则，它将生成与之前相反的颜色。

以上是如何生成给定十六进制代码的相反颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！