d3-color

儘管您的瀏覽器了解許多關於顏色的知識，但它並未提供太多透過 JavaScript 操作顏色的協助。因此，d3-color 模組提供各種色彩空間的表示，允許指定、轉換和操作。（另請參閱 d3-interpolate 以進行色彩插補。）

例如，取用命名色彩 steelblue，在 RGB 中為 rgb(70, 130, 180)

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

轉換為 HSL hsl(207.3, 44%, 49%)

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)

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

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

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

除了普遍且機器友善的 RGB 和 HSL 色彩空間外，d3-color 還支援專為人類設計的色彩空間

• CIELAB（又稱「Lab」）
• CIELCh_ab（又稱「LCh」或「HCL」）
• Dave Green 的 Cubehelix

Cubehelix 具有單調亮度，而 CIELAB 及其極座標形式 CIELCh_ab 則在知覺上是一致的。

如需其他色彩空間，請參閱

• d3-cam16
• d3-cam02
• d3-hsv
• d3-hcg
• d3-hsluv

如需測量色彩差異，請參閱

• d3-color-difference

color(specifier)

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

來源 · 分析指定的 CSS 色彩模組 3 級 specifier 字串，傳回 RGB 或 HSL 色彩，以及 CSS 色彩模組 4 級 hex 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

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

此色彩的不透明度，通常在 [0, 1] 範圍內。

color.rgb()

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

來源 · 傳回此色彩的 RGB 等效值。對於 RGB 色彩，那就是 this。

color.copy(values)

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

來源 · 傳回此色彩的副本。如果指定 values，則 values 的任何可列舉自有屬性都會指派給傳回的新色彩。

color.brighter(k)

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)

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

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

原始碼 · 唯當顏色在標準硬體上可顯示時，傳回 true。例如，如果任何通道值在四捨五入後小於 0 或大於 255，或不透明度不在 [0, 1] 範圍內，則對 RGB 顏色傳回 false。

color.formatHex()

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

原始碼 · 傳回代表此顏色的 RGB 空間十六進位字串，例如 #4682b4。如果此顏色不可顯示，則會傳回適當的可顯示顏色。例如，大於 255 的 RGB 通道值會強制調整為 255。

color.formatHex8()

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

原始碼 · 傳回代表此顏色的 RGBA 空間十六進位字串，例如 #4682b4cc。如果此顏色不可顯示，則會傳回適當的可顯示顏色。例如，大於 255 的 RGB 通道值會強制調整為 255。

color.formatHsl()

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

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

原始碼 · 傳回一個字串，表示此色彩，根據 CSS 物件模型規格，例如 rgb(247, 234, 186) 或 rgba(247, 234, 186, 0.2)。如果此色彩無法顯示，則會透過將 RGB 通道值限制在 [0, 255] 區間內，傳回一個合適的可顯示色彩。

color.toString()

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

原始碼 · color.formatRgb 的別名。

rgb(color)

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

原始碼 · 建構一個新的 RGB 色彩。通道值會顯示為傳回實例上的 r、g 和 b 屬性。使用 RGB 色彩選取器 來探索此色彩空間。

如果指定 r、g 和 b，這些會表示傳回色彩的通道值；也可以指定一個 不透明度。如果指定一個 CSS 色彩模組第 3 級 說明符 字串，它會被解析，然後轉換成 RGB 色彩空間。請參閱 color 以取得範例。如果指定一個 color 實例，它會使用 color.rgb 轉換成 RGB 色彩空間。請注意，與 color.rgb 不同，此方法永遠會傳回一個新的實例，即使 color 已經是 RGB 色彩。

rgb.clamp()

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)

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

來源 · 建構一個新的 HSL 顏色。通道值會在傳回的執行個體上顯示為 h、s 和 l 屬性。使用 HSL 色彩選取器 來探索此色彩空間。

如果指定了 h、s 和 l，這些值會代表傳回顏色的通道值；也可以指定 opacity。如果指定了 CSS Color Module Level 3 specifier 字串，它會被解析，然後轉換為 HSL 色彩空間。請參閱 color 以取得範例。如果指定了 color 執行個體，它會使用 color.rgb 轉換為 RGB 色彩空間，然後轉換為 HSL。（已經在 HSL 色彩空間中的顏色會略過轉換為 RGB 的步驟。）

hsl.clamp()

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)

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)

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

原始碼 · 建構一個新的 CIELAB 顏色，其指定 l 值和 a = b = 0。

hcl(color)

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

原始碼 · 等同於 d3.lch，但反轉了引數順序。

lch(color)

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

原始碼 · 建構一個新的 CIELCh_ab 顏色。通道值會在傳回的執行個體上顯示為 l、c 和 h 屬性。使用 CIELCh_ab 色彩選擇器 來探索這個色彩空間。l 的值通常在 [0, 100] 範圍內，c 通常在 [0, 230] 範圍內，而 h 通常在 [0, 360] 範圍內。

如果指定了 l、c 和 h，這些值會代表傳回顏色的通道值；也可以指定一個 不透明度。如果指定了 CSS 顏色模組第 3 級的 說明符字串，它會被剖析，然後轉換為 CIELCh_ab 色彩空間。請參閱 color 中的範例。如果指定了 color 執行個體，它會使用 color.rgb 轉換為 RGB 色彩空間，然後轉換為 CIELCh_ab。（已經在 CIELCh_ab 色彩空間中的顏色會略過轉換為 RGB 的步驟，而 CIELAB 色彩空間中的顏色會直接轉換為 CIELCh_ab。）

cubehelix(color)

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 的步驟。）