D3

d3-color ​

即使你的浏览器对颜色有很强的理解能力，它在通过 JavaScript 操作颜色方面也提供不了太多帮助。因此，d3-color 模块提供了各种颜色空间的表示，允许进行指定、转换和操作。（另请参见 d3-interpolate 用于颜色插值。）

🌐 Even though your browser understands a lot about colors, it doesn’t offer much help in manipulating colors through JavaScript. The d3-color module therefore provides representations for various color spaces, allowing specification, conversion and manipulation. (Also see d3-interpolate for color interpolation.)

例如，取名为颜色 steelblue的颜色，它在RGB中是 rgb(70, 130, 180) ：

js
let c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

转换为 HSL hsl(207.3, 44%, 49%):

js
c = d3.hsl(c); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}

然后将色相旋转90° <ColorSpan :color="(((c) => （c.h += 90， c））（d3.hsl（'steelblue'）））“ 格式=”hsl“ />，将饱和度增加20% <ColorSpan :color="(((c) => （c.h += 90， c.s += 0.2， c））（d3.hsl（'steelblue'）））” 格式=“hsl” />，并格式化为RGB字符串 <ColorSpan :color="(((c) => （c.h += 90， c.s += 0.2， c））（d3.hsl（'steelblue'）））“）” />：

js
c.h += 90;
c.s += 0.2;
c + ""; // rgb(198, 45, 205)

为了稍微淡化颜色（ <ColorSpan :color="(((c) => c.h += 90，c.s += 0.2，c.不透明度 = 0.8， c））（d3.hsl（'steelblue'）））“ />：

js
c.opacity = 0.8;
c + ""; // rgba(198, 45, 205, 0.8)

除了无处不在且适合机器处理的 RGB 和 HSL 色彩空间外，d3-color 还支持为人类设计的色彩空间：

🌐 In addition to the ubiquitous and machine-friendly RGB and HSL color space, d3-color supports color spaces that are designed for humans:

Cubehelix 具有单调亮度，而 CIELAB 及其极坐标形式 CIELChab 在感知上是均匀的。

有关其他颜色空间，请参阅：

🌐 For additional color spaces, see:

要测量色差，请参阅：

🌐 To measure color differences, see:

color(specifier) ​

js
d3.color("steelblue") // {r: 70, g: 130, b: 180, opacity: 1}

来源 · 解析指定的 CSS 颜色模块 Level 3 说明符 字符串，返回一个 RGB 或 HSL 颜色，以及 CSS 颜色模块 Level 4 十六进制 说明符 字符串。如果说明符无效，则返回 null。一些示例：

  • rgb(255, 255, 255)
  • rgb(10%, 20%, 30%)
  • rgba(255, 255, 255, 0.4)
  • rgba(10%, 20%, 30%, 0.4)
  • hsl(120, 50%, 20%)
  • hsla(120, 50%, 20%, 0.4)
  • #ffeeaa
  • #fea
  • #ffeeaa22
  • #fea2
  • steelblue

支持的命名颜色列表由CSS指定。

🌐 The list of supported named colors is specified by CSS.

注意：此函数也可以与 instanceof 一起使用，以测试对象是否是颜色实例。颜色子类也是如此，这允许你测试某个颜色是否属于特定的颜色空间。

🌐 Note: this function may also be used with instanceof to test if an object is a color instance. The same is true of color subclasses, allowing you to test whether a color is in a particular color space.

color.opacity ​

js
d3.color("steelblue").opacity // 1

此颜色的不透明度，通常在 [0, 1] 范围内。

🌐 This color’s opacity, typically in the range [0, 1].

color.rgb() ​

js
d3.color("hsl(120, 50%, 20%)").rgb() // {r: 25.5, g: 76.5, b: 25.5, opacity: 1}

来源 · 返回此颜色的 RGB 等效值。对于 RGB 颜色，它是 this。

color.copy(values) ​

js
d3.color("steelblue").copy({opacity: 0.5}) // {r: 70, g: 130, b: 180, opacity: 0.5}

来源 · 返回此颜色的副本。如果指定了 values，则 values 的任何可枚举自身属性都会被分配给新返回的颜色。

color.brighter(k) ​

js
d3.color("steelblue").brighter(1) // {r: 100, g: 185.71428571428572, b: 257.14285714285717, opacity: 1}

来源 · 返回此颜色的更亮副本。例如，如果 k 为 1， steelblue 在 RGB 颜色空间中变为 rgb(100, 186, 255)。参数 k 控制返回的颜色应变亮多少（以任意单位计算）；如果未指定 k，默认为 1。此方法的行为取决于实现的颜色空间。

color.darker(k) ​

js
d3.color("steelblue").darker(1) // {r: 49, g: 91, b: 126, opacity: 1}

来源 · 返回此颜色的更深副本。例如，如果 k 为 1， steelblue 在 RGB 颜色空间中变为 rgb(49, 91, 126)。参数 k 控制返回的颜色应变暗多少（以任意单位计算）；如果未指定 k，默认为 1。此方法的行为取决于实现的颜色空间。

color.displayable() ​

js
d3.color("steelblue").displayable(1) // true

来源 · 仅当颜色可在标准硬件上显示时返回 true。例如，如果任意通道值在四舍五入后小于零或大于 255，或者不透明度不在 [0, 1] 范围内，则对于 RGB 颜色返回 false。

color.formatHex() ​

js
d3.color("steelblue").formatHex() // "#4682b4"

来源 · 返回表示此颜色在 RGB 空间中的十六进制字符串，例如 #4682b4。如果此颜色不可显示，则返回一个合适的可显示颜色。例如，RGB 通道值大于 255 会被限制为 255。

color.formatHex8() ​

js
d3.color("steelblue").formatHex8() // "#4682b4ff"

来源 · 返回一个表示该颜色在 RGBA 空间中的十六进制字符串，例如 #4682b4cc。如果该颜色无法显示，则返回一个合适的可显示颜色。例如，大于 255 的 RGB 通道值将被限制为 255。

color.formatHsl() ​

js
d3.color("yellow").formatHsl() // "hsl(60, 100%, 50%)"

Source · 根据 CSS 颜色模块第 3 级规范 返回表示此颜色的字符串，例如 hsl(257, 50%, 80%) 或 hsla(257, 50%, 80%, 0.2)。如果此颜色无法显示，则通过将 S 和 L 通道值限制在 [0, 100] 范围内来返回一个适合显示的颜色。

color.formatRgb() ​

js
d3.color("yellow").formatRgb() // "rgb(255, 255, 0)"

Source · 根据 CSS 对象模型规范 返回表示此颜色的字符串，例如 rgb(247, 234, 186) 或 rgba(247, 234, 186, 0.2)。如果此颜色不可显示，则通过将 RGB 通道值限制在 [0, 255] 范围内返回一个合适的可显示颜色。

color.toString() ​

js
d3.color("yellow").toString() // "rgb(255, 255, 0)"

来源 · color.formatRgb 的别名。

rgb(颜色) ​

🌐 rgb(color)

js
d3.rgb("hsl(60, 100%, 50%)") // {r: 255, g: 255, b: 0, opacity: 1}

来源 · 构建一个新的 RGB 颜色。通道值在返回的实例上以 r、g 和 b 属性的形式暴露。使用 RGB 颜色选择器 来探索此颜色空间。

如果指定了 r、g 和 b，这些表示返回颜色的通道值；也可以指定 opacity。如果指定了 CSS Color Module Level 3 的 specifier 字符串，则会先解析该字符串，然后将其转换为 RGB 颜色空间。示例请参见 color。如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间。请注意，与 color.rgb 不同，这个方法 总是 返回一个新的实例，即使 color 已经是 RGB 颜色。

🌐 If r, g and b are specified, these represent the channel values of the returned color; an opacity may also be specified. If a CSS Color Module Level 3 specifier string is specified, it is parsed and then converted to the RGB color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb. Note that unlike color.rgb this method always returns a new instance, even if color is already an RGB color.

rgb.clamp() ​

js
d3.rgb(300, 200, 100).clamp() // {r: 255, g: 200, b: 100, opacity: 1}

来源 · 返回一个新的 RGB 颜色，其中 r、g 和 b 通道被限制在 [0, 255] 范围内并四舍五入到最接近的整数值，而 opacity 被限制在 [0, 1] 范围内。

hsl(颜色) ​

🌐 hsl(color)

js
d3.hsl("yellow") // {h: 60, s: 1, l: 0.5, opacity: 1}

来源 · 构造一个新的 HSL 颜色。通道值在返回的实例上以 h、s 和 l 属性的形式公开。使用 HSL 颜色选择器 来探索这个颜色空间。

如果指定了 h、s 和 l，这些表示返回颜色的通道值；也可以指定 opacity。如果指定了 CSS 颜色模块第 3 级的 specifier 字符串，它将被解析，然后转换为 HSL 颜色空间。有关示例，请参见 color。如果指定了 color 实例，它将使用 color.rgb 转换为 RGB 颜色空间，然后再转换为 HSL。（已经在 HSL 颜色空间的颜色会跳过转换为 RGB 的步骤。）

🌐 If h, s and l are specified, these represent the channel values of the returned color; an opacity may also be specified. If a CSS Color Module Level 3 specifier string is specified, it is parsed and then converted to the HSL color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to HSL. (Colors already in the HSL color space skip the conversion to RGB.)

hsl.clamp() ​

js
d3.hsl(400, 2, 0.5).clamp() // {h: 40, s: 1, l: 0.5, opacity: 1}

来源 · 返回一个新的 HSL 颜色，其中 h 通道被限制在 [0, 360) 范围内，s、l 和 opacity 通道被限制在 [0, 1] 范围内。

lab(color) ​

js
d3.lab("red") // {l: 54.29173376861782, a: 80.8124553179771, b: 69.88504032350531, opacity: 1}

Source · 构建一个新的 CIELAB 颜色。通道值作为 l、a 和 b 属性暴露在返回的实例上。使用 CIELAB 颜色选择器 来探索此颜色空间。l 的值通常在 [0, 100] 范围内，而 a 和 b 通常在 [-160, +160] 范围内。

如果指定了 l、a 和 b，它们表示返回颜色的通道值；也可以指定 opacity。如果指定了 CSS 颜色模块第 3 级的 specifier 字符串，则对其进行解析，然后转换为 CIELAB 颜色空间。有关示例，请参见 color。如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间，然后转换为 CIELAB。（已经在 CIELAB 颜色空间中的颜色将跳过转换为 RGB 的步骤，而 HCL 颜色空间中的颜色则直接转换为 CIELAB。）

🌐 If l, a and b are specified, these represent the channel values of the returned color; an opacity may also be specified. If a CSS Color Module Level 3 specifier string is specified, it is parsed and then converted to the CIELAB color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to CIELAB. (Colors already in the CIELAB color space skip the conversion to RGB, and colors in the HCL color space are converted directly to CIELAB.)

灰色(l, opacity) ​

🌐 gray(l, opacity)

js
d3.gray(50) // {l: 50, a: 0, b: 0, opacity: 1}

来源 · 使用指定的 l 值以及 a = b = 0 构造一个新的 CIELAB 颜色。

hcl(颜色) ​

🌐 hcl(color)

js
d3.hcl("yellow") // {h: 99.57458688693687, c: 94.70776566727464, l: 97.60712516622824, opacity: 1}

来源 · 等同于 d3.lch，但参数顺序相反。

lch(颜色) ​

🌐 lch(color)

js
d3.lch("yellow") // {h: 99.57458688693687, c: 94.70776566727464, l: 97.60712516622824, opacity: 1}

来源 · 构建一个新的 CIELChab 颜色。通道值在返回的实例上以 l、c 和 h 属性的形式暴露。使用 CIELChab 取色器 来探索此颜色空间。l 的值通常在 [0, 100] 范围内，c 通常在 [0, 230] 范围内，h 通常在 [0, 360) 范围内。

如果指定了 l、c 和 h，这些表示返回颜色的通道值；也可以指定 opacity。如果指定了 CSS 颜色模块第 3 级的 specifier 字符串，则会解析该字符串，然后转换为 CIELChab 颜色空间。示例请参见 color。如果指定了 color 实例，它将使用 color.rgb 转换为 RGB 颜色空间，然后再转换为 CIELChab。 (已经位于 CIELChab 颜色空间的颜色会跳过 RGB 转换，而处于 CIELAB 颜色空间的颜色则直接转换为 CIELChab。)

cubehelix(color) ​

js
d3.cubehelix("yellow") // {h: 56.942171677321085, s: 4.614386868039714, l: 0.8900004504279901, opacity: 1}

来源 · 构造一个新的 Cubehelix 颜色。通道值作为 h、s 和 l 属性暴露在返回的实例上。

如果指定了 h、s 和 l，这些表示返回颜色的通道值；也可以指定 opacity。如果指定了 CSS 颜色模块第 3 级的 specifier 字符串，则解析该字符串，然后转换为 Cubehelix 颜色空间。示例请参见 color。如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间，然后再转换为 Cubehelix。（已经在 Cubehelix 颜色空间的颜色会跳过转换为 RGB 的步骤。）

🌐 If h, s and l are specified, these represent the channel values of the returned color; an opacity may also be specified. If a CSS Color Module Level 3 specifier string is specified, it is parsed and then converted to the Cubehelix color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to Cubehelix. (Colors already in the Cubehelix color space skip the conversion to RGB.)