在前端设计中，经常需要计算一个颜色的互补色。互补色是指在 RGB 颜色空间中，与给定颜色相差 180 度的颜色。计算互补色的 JS 函数可以帮助我们更方便地实现这个任务。
RGB 色彩空间
RGB 是一种用于表示彩色图像的颜色系统，其包含三个分量：红（R）、绿（G）和蓝（B）。每个颜色分量的取值范围都在 0 到 255 之间。因此，每种颜色都可以用一个由三个数字组成的 RGB 值来表示。
计算互补色的方法
要计算一个颜色的互补色，我们需要将其 RGB 值中的每个分量都减去 255，并将结果取绝对值。例如，对于颜色 (r, g, b)，它的互补色为 (255 - r, 255 - g, 255 - b)。下面是一个实现该计算方法的 JS 函数：
function complementaryColor(color) {
return [255 - color[0], 255 - color[1], 255 - color[2]];
}该函数接受一个包含三个数字的数组作为输入，表示一个 RGB 颜色。函数返回另一个数组，表示该颜色的互补色。
示例代码
下面是一个简单的 HTML 页面，其中包含一个用于显示颜色和其互补色的 DIV 元素。页面中还包含一个 JavaScript 函数，用于将 DIV 的背景色设置为用户选择的颜色，并将相应的互补色显示在 DIV 中：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------
--------
-------- ------------------------- -
------ ---- - --------- --- - --------- --- - ----------
-
-------- -------------- -
--- ---------- - ---------------------------------------
--- ----- - ------------------------------------
--- ------------- - --------------------------
--- -------- - -------------------------------------
------------------------------ - -----------------
------------------ - ------- - ---------------- - --------------- - --------------------- -- - ----
-
-------- ------------- -
--- - - ---------------------------- ----
--- - - ---------------------------- ----
--- - - ---------------------------- ----
------ --- -- ---
-
---------
-------
---------- -
------ ------
------- ------
------- ---- -----
----------- -------
---------- -----
------------ ------
-
--------
-------
------
------ ------------ ---------------- ------------------------ --------------------
---- ---------------------
-------
-------在上面的代码中，complementaryColor 函数计算颜色的互补色。updateColors 函数首先从文本框中读取用户选择的颜色，并将其转换为 RGB 格式。然后，它调用 complementaryColor 函数计算相应的互补色，并使用 JavaScript 修改 DIV 元素的背景色和内容。
总结
计算互补色是前端设计的一个基本任务。本文提供了一个简单而有效的 JS 函数来实现这个任务，并且通过一个示例页面展示了如何将函数应用到实际开发中。此外，本文介绍了 RGB 色彩空间的基本知
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15580