作者Observable

外观

d3-color ​

虽然您的浏览器对颜色有很多了解，但它在通过 JavaScript 操作颜色方面并没有提供太多帮助。因此，d3-color 模块提供了各种颜色空间的表示，允许您进行指定、转换和操作。 （另请参见 d3-interpolate 以了解颜色插值。）

例如，取命名颜色 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° hsl(297.3, 44%, 49%)，将饱和度增加 20% hsl(297.3, 64%, 49%)，并将其格式化为 RGB 字符串 rgb(198, 45, 205)

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

将颜色稍微淡化 rgba(198, 45, 205, 0.8)

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

除了无处不在且对机器友好的 RGB 和 HSL 颜色空间之外，d3-color 还支持为人类设计的颜色空间

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

有关其他颜色空间，请参见

要测量颜色差异，请参见

color(specifier) ​

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

源代码 · 解析指定的 CSS 颜色模块级别 3 specifier 字符串，返回 RGB 或 HSL 颜色，以及 CSS 颜色模块级别 4 十六进制 specifier 字符串。 如果 specifier 无效，则返回 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 指定。

注意：此函数也可以与 instanceof 一起使用来测试对象是否为颜色实例。 颜色子类也是如此，允许您测试颜色是否在特定颜色空间中。

color.opacity ​

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

此颜色的不透明度，通常在 [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，则 RGB 颜色空间中的 steelblue 变为 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，则 RGB 颜色空间中的 steelblue 变为 rgb(49, 91, 126)。 参数 k 控制返回的颜色应该暗多少（以任意单位表示）； 如果未指定 k，则默认为 1。 此方法的行为取决于实现的颜色空间。

color.displayable() ​

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

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

color.formatHex() ​

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

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

color.formatHex8() ​

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

源代码 · 返回表示此颜色在 RGBA 空间中的十六进制字符串，例如 #4682b4cc。 如果此颜色不可显示，则返回合适的可显示颜色。 例如，RGB 通道值大于 255 将被钳制为 255。

color.formatHsl() ​

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

源代码 · 返回根据 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)"

源代码 · 返回根据 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(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 颜色模块级别 3 specifier 字符串，则将其解析，然后转换为 RGB 颜色空间。 有关示例，请参见 color。 如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间。 请注意，与 color.rgb 不同，此方法始终返回一个新实例，即使 color 已经是 RGB 颜色。

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(color) ​

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

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

如果指定了 h、s 和 l，它们表示返回颜色的通道值；也可以指定 不透明度。如果指定了 CSS 颜色模块级别 3 说明符 字符串，则解析该字符串并将其转换为 HSL 颜色空间。有关示例，请参见 color。如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间，然后转换为 HSL。（已经在 HSL 颜色空间中的颜色将跳过转换为 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 和 不透明度 通道被限制在范围 [0, 1] 内。

lab(color) ​

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

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

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

gray(l, opacity) ​

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

源代码 · 构建一个新的 CIELAB 颜色，其 l 值和 a = b = 0 指定。

hcl(color) ​

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

源代码 · 等效于 d3.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，它们表示返回颜色的通道值；也可以指定 不透明度。如果指定了 CSS 颜色模块级别 3 说明符 字符串，则解析该字符串并将其转换为 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，它们表示返回颜色的通道值；也可以指定 不透明度。如果指定了 CSS 颜色模块级别 3 说明符 字符串，则解析该字符串并将其转换为 Cubehelix 颜色空间。有关示例，请参见 color。如果指定了 color 实例，则使用 color.rgb 将其转换为 RGB 颜色空间，然后转换为 Cubehelix。（已经在 Cubehelix 颜色空间中的颜色将跳过转换为 RGB 的步骤。）