js 颜色|极客笔记

js 颜色

在前端开发中，颜色是一个非常重要的概念。我们经常需要使用颜色来美化网页的设计，为元素添加背景色、文字颜色等。在 JavaScript 中，我们可以使用各种方式来表示颜色，并对颜色进行操作。

本文将详细介绍在 JavaScript 中表示颜色的方式，以及如何操作颜色。我们将涵盖以下内容：

颜色的表示方式
RGB、RGBA、HEX和HSL颜色模型
颜色的转换
颜色的操作

让我们开始吧！

颜色的表示方式

在 JavaScript 中，有几种表示颜色的方式，最常见的有以下几种：

字符串表示

let color = 'red';

RGB 表示

let color = 'rgb(255, 0, 0)';

HEX 表示

let color = '#ff0000';

HSL 表示

let color = 'hsl(0, 100%, 50%)';

RGB、RGBA、HEX和HSL颜色模型

RGB 颜色模型

RGB（Red Green Blue）是一种加色模式，通过对红、绿、蓝三个通道的变化，来调配颜色。在 RGB 模式下，每个通道的取值范围是 0 到 255。

我们可以通过以下方式创建一个 RGB 颜色：

let color = 'rgb(255, 0, 0)';

RGBA 颜色模型

RGBA 和 RGB 类似，不同之处在于多了一个表示透明度的通道 A（Alpha）。取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。

let color = 'rgba(255, 0, 0, 0.5)';

HEX 颜色模型

HEX 是十六进制颜色表示法，通过 6 位的十六进制数来表示 RGB 颜色。每两位表示一种颜色通道的值。

let color = '#ff0000';

HSL 颜色模型

HSL（Hue Saturation Lightness）是一种较为直观的颜色表示方式，通过色相、饱和度和亮度来表示颜色。色相取值范围是 0 到 360，饱和度和亮度取值范围是 0% 到 100%。

let color = 'hsl(0, 100%, 50%)';

颜色的转换

在 JavaScript 中，我们可以相互转换不同表示方式的颜色。下面是一些示例代码：

RGB 转 HEX

function rgbToHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length == 1) r = "0" + r;
  if (g.length == 1) g = "0" + g;
  if (b.length == 1) b = "0" + b;

  return "#" + r + g + b;
}

console.log(rgbToHex(255, 0, 0)); // 输出 #ff0000

HEX 转 RGB

function hexToRgb(hex) {
  let r = parseInt(hex.substring(1, 3), 16);
  let g = parseInt(hex.substring(3, 5), 16);
  let b = parseInt(hex.substring(5, 7), 16);

  return `rgb( ${r},$ {g}, ${b})`;
}

console.log(hexToRgb('#ff0000')); // 输出 rgb(255, 0, 0)

RGBA 转 HEX

function rgbaToHex(r, g, b, a) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);
  a = Math.round(a * 255).toString(16);

  if (r.length == 1) r = "0" + r;
  if (g.length == 1) g = "0" + g;
  if (b.length == 1) b = "0" + b;
  if (a.length == 1) a = "0" + a;

  return `# ${r}$ {g} ${b}$ {a}`;
}

console.log(rgbaToHex(255, 0, 0, 0.5)); // 输出 #ff000080

HEX 转 RGBA

function hexToRgba(hex) {
  let r = parseInt(hex.substring(1, 3), 16);
  let g = parseInt(hex.substring(3, 5), 16);
  let b = parseInt(hex.substring(5, 7), 16);
  let a = parseInt(hex.substring(7, 9), 16) / 255;

  return `rgba( ${r},$ {g},  ${b},$ {a})`;
}

console.log(hexToRgba('#ff000080')); // 输出 rgba(255, 0, 0, 0.5)

颜色的操作

JavaScript 还提供了一些方法来操作颜色，比如颜色的混合、亮度调节等。下面是一些常用的方法：

颜色混合

function blendColors(color1, color2, ratio) {
  let r1 = parseInt(color1.substring(1, 3), 16);
  let g1 = parseInt(color1.substring(3, 5), 16);
  let b1 = parseInt(color1.substring(5, 7), 16);

  let r2 = parseInt(color2.substring(1, 3), 16);
  let g2 = parseInt(color2.substring(3, 5), 16);
  let b2 = parseInt(color2.substring(5, 7), 16);

  let r = Math.round(r1 * ratio + r2 * (1 - ratio));
  let g = Math.round(g1 * ratio + g2 * (1 - ratio));
  let b = Math.round(b1 * ratio + b2 * (1 - ratio));

  return `rgb( ${r},$ {g}, ${b})`;
}

console.log(blendColors('#ff0000', '#00ff00', 0.5)); // 输出 rgb(127, 127, 0)

调节亮度

function adjustBrightness(color, percent) {
  let r = parseInt(color.substring(1, 3), 16);
  let g = parseInt(color.substring(3, 5), 16);
  let b = parseInt(color.substring(5, 7), 16);

  r = Math.min(Math.max(0, r + r * percent), 255);
  g = Math.min(Math.max(0, g + g * percent), 255);
  b = Math.min(Math.max(0, b + b * percent), 255);

  return `rgb( ${r},$ {g}, ${b})`;
}

console.log(adjustBrightness('#ff0000', 0.2)); // 输出 rgb(255, 51, 0)