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 Color Module Level 3のspecifier文字列を解析し、RGBまたはHSLの色と、CSS Color Module Level 4 hexの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を返します。たとえば、チャネル値が丸められたときにゼロ未満または255を超える場合、または不透明度が[0、1]の範囲にない場合、これはRGB色に対してfalseを返します。

color.formatHex()

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

ソース・この色をRGB空間で表す16進数文字列（例：#4682b4）を返します。この色が表示可能でない場合は、代わりに適切な表示可能な色が返されます。たとえば、255を超えるRGBチャネル値は255にクランプされます。

color.formatHex8()

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

ソース・この色をRGBA空間で表す16進数文字列（例：#4682b4cc）を返します。この色が表示可能でない場合は、代わりに適切な表示可能な色が返されます。たとえば、255を超えるRGBチャネル値は255にクランプされます。

color.formatHsl()

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

ソース・CSS Color Module Level 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 Object Model仕様に従って、この色を表す文字列（例：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 が指定された場合、これらは返される色のチャンネル値を表します。opacity（不透明度）も指定できます。CSS Color Module Level 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}

ソース · r、g、bチャンネルが[0, 255]の範囲にクランプされ、最も近い整数値に丸められ、opacityが[0, 1]の範囲にクランプされた、新しいRGB色を返します。

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の指定子文字列が指定された場合、解析され、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}

ソース · hチャンネルが[0, 360)の範囲にクランプされ、s、l、およびopacityチャンネルが[0, 1]の範囲にクランプされた、新しいHSL色を返します。

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 が指定された場合、これらは返される色のチャンネル値を表します。opacity（不透明度）も指定できます。CSS Color Module Level 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}

ソース · 指定されたl値と a = b = 0 を持つ、新しいCIELAB色を構築します。

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 が指定された場合、これらは返される色のチャンネル値を表します。opacity（不透明度）も指定できます。CSS Color Module Level 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 が指定された場合、これらは返される色のチャンネル値を表します。opacity（不透明度）も指定できます。CSS Color Module Level 3の指定子文字列が指定された場合、解析され、Cubehelix色空間に変換されます。例については、colorを参照してください。colorインスタンスが指定された場合、color.rgbを使用してRGB色空間に変換され、その後Cubehelixに変換されます。（すでにCubehelix色空間にある色は、RGBへの変換をスキップします。）