d3-color RGB methods
RGB color methods: rgb.clamp returns a copy of the color clamped to RGB color space.
d3-color
88 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
d3-color HSL methods
HSL color methods: hsl.clamp returns a copy of the color clamped to HSL color space.
d3-color module overview
d3-color provides color manipulation and color space conversion. It supports parsing CSS color specifiers, creating colors in various spaces (RGB, HSL, Lab, HCL, Cubehelix), and methods for adjusting opacity, brightness, and converting between formats.
color.opacity property
The opacity property of a color instance is a number typically in the range [0, 1] representing this color's opacity.
color.rgb() converts color to RGB equivalent
color.rgb() returns the RGB equivalent of this color. For RGB colors, that's this. For other color spaces like HSL, it converts to RGB.
color.copy(values) returns modified copy
color.copy(values) returns a copy of this color. If values is specified, any enumerable own properties of values are assigned to the new returned color.
color.brighter(k) returns brighter copy
color.brighter(k) returns a brighter copy of this color. The parameter k controls how much brighter the returned color should be in arbitrary units; if k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.
color.darker(k) returns darker copy
color.darker(k) returns a darker copy of this color. The parameter k controls how much darker the returned color should be in arbitrary units; if k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.
color.displayable() tests if color is displayable
color.displayable() returns true if and only if the color is displayable on standard hardware. For example, this returns false for an RGB color if any channel value is less than zero or greater than 255 when rounded, or if the opacity is not in the range [0, 1].
color.formatHex8() returns hex RGBA string
color.formatHex8() returns a hexadecimal string representing this color in RGBA space, such as #4682b4ff. If this color is not displayable, a suitable displayable color is returned instead. For example, RGB channel values greater than 255 are clamped to 255.
color.formatHsl() returns HSL/HSLA string
color.formatHsl() returns a string representing this color according to the CSS Color Module Level 3 specification, such as hsl(60, 100%, 50%) or hsla(257, 50%, 80%, 0.2). If this color is not displayable, a suitable displayable color is returned instead by clamping S and L channel values to the interval [0, 100].
color.formatRgb() returns RGB/RGBA string
color.formatRgb() returns a string representing this color according to the CSS Object Model specification, such as rgb(255, 255, 0) or rgba(247, 234, 186, 0.2). If this color is not displayable, a suitable displayable color is returned instead by clamping RGB channel values to the interval [0, 255].
d3-color color spaces: RGB, HSL, CIELAB, CIELCh, Cubehelix
d3-color provides representations for multiple color spaces. RGB and HSL are machine-friendly color spaces. CIELAB (Lab), CIELCh_ab (LCh or HCL), and Cubehelix are designed for humans. Cubehelix features monotonic lightness, while CIELAB and its polar form CIELCh_ab are perceptually uniform.
color.toString() alias for formatRgb
color.toString() is an alias for color.formatRgb().
d3.rgb() constructs RGB color
d3.rgb(color) constructs a new RGB color with channel values exposed as r, g and b properties on the returned instance. If r, g and b are specified as numbers, 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 converted to RGB. If a color instance is specified, it is converted to RGB 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() clamps channel values
rgb.clamp() returns a new RGB color where the r, g, and b channels are clamped to the range [0, 255] and rounded to the nearest integer value, and the opacity is clamped to the range [0, 1].
d3.hsl() constructs HSL color
d3.hsl(color) constructs a new HSL color with channel values exposed as h, s and l properties on the returned instance. If h, s and l are specified as numbers, 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 converted to HSL. If a color instance is specified, it is converted to RGB using color.rgb() and then to HSL. Colors already in HSL skip the conversion to RGB.
hsl.clamp() clamps channel values
hsl.clamp() returns a new HSL color where the h channel is clamped to the range [0, 360), and the s, l, and opacity channels are clamped to the range [0, 1].
d3.lab() constructs CIELAB color
d3.lab(color) constructs a new CIELAB color with channel values exposed as l, a and b properties on the returned instance. The value of l is typically in the range [0, 100], while a and b are typically in [-160, +160]. If l, a and b are specified as numbers, 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 converted to CIELAB. If a color instance is specified, it is converted to RGB using color.rgb() and then to CIELAB. Colors already in CIELAB skip the conversion to RGB, and colors in HCL are converted directly to CIELAB.
d3.gray(l, opacity) constructs neutral CIELAB color
d3.gray(l, opacity) constructs a new CIELAB color with the specified l value and a = b = 0.
d3.hcl() constructs CIELCh color (reversed argument order)
d3.hcl(color) is equivalent to d3.lch(), but with reversed argument order.
d3.lch() constructs CIELCh color
d3.lch(color) constructs a new CIELCh_ab color with channel values exposed as l, c and h properties on the returned instance. The value of l is typically in the range [0, 100], c is typically in [0, 230], and h is typically in [0, 360). If l, c, and h are specified as numbers, 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 converted to CIELCh_ab. If a color instance is specified, it is converted to RGB using color.rgb() and then to CIELCh_ab. Colors already in CIELCh_ab skip the conversion to RGB, and colors in CIELAB are converted directly to CIELCh_ab.
d3.cubehelix() constructs Cubehelix color
d3.cubehelix(color) constructs a new Cubehelix color with channel values exposed as h, s and l properties on the returned instance. If h, s and l are specified as numbers, 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 converted to Cubehelix. If a color instance is specified, it is converted to RGB using color.rgb() and then to Cubehelix. Colors already in Cubehelix skip the conversion to RGB.
d3.color() parses CSS Color Module Level 3 and 4 specifiers
d3.color(specifier) parses the specified CSS Color Module Level 3 specifier string, returning an RGB or HSL color, along with CSS Color Module Level 4 hex specifier strings. If the specifier was not valid, null is returned. Supported formats include 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, and named colors like steelblue. The list of supported named colors is specified by CSS. This function may also be used with instanceof to test if an object is a color instance.
schemeSet3 categorical color scheme
d3.schemeSet3 is an array of twelve categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
Creating categorical color scale with d3.scaleOrdinal
To create a categorical color scale using a categorical color scheme such as schemeAccent, use d3.scaleOrdinal(d3.schemeAccent).
schemeAccent categorical color scheme
d3.schemeAccent is an array of eight categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemeDark2 categorical color scheme
d3.schemeDark2 is an array of eight categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemeObservable10 categorical color scheme
d3.schemeObservable10 is an array of ten categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemePaired categorical color scheme
d3.schemePaired is an array of twelve categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemePastel2 categorical color scheme
d3.schemePastel2 is an array of eight categorical colors represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemeTableau10 categorical color scheme
d3.schemeTableau10 is an array of ten categorical colors authored by Tableau as part of Tableau 10, represented as RGB hexadecimal strings, suitable for creating categorical color scales with d3.scaleOrdinal().
schemeRdYlGn discrete diverging color scheme
schemeRdYlGn[k] is an array representation of the RdYlGn discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
interpolatePuOr continuous diverging color scheme
interpolatePuOr(t) takes a number t in the range [0,1] and returns the corresponding color from the PuOr diverging color scheme represented as an RGB string.
interpolateRdYlBu continuous diverging color scheme
interpolateRdYlBu(t) takes a number t in the range [0,1] and returns the corresponding color from the RdYlBu diverging color scheme represented as an RGB string.
interpolateBrBG continuous diverging color scheme
interpolateBrBG(t) takes a number t in the range [0,1] and returns the corresponding color from the BrBG diverging color scheme represented as an RGB string.
interpolatePRGn continuous diverging color scheme
interpolatePRGn(t) takes a number t in the range [0,1] and returns the corresponding color from the PRGn diverging color scheme represented as an RGB string.
interpolatePiYG continuous diverging color scheme
interpolatePiYG(t) takes a number t in the range [0,1] and returns the corresponding color from the PiYG diverging color scheme represented as an RGB string.
interpolateRdYlGn continuous diverging color scheme
interpolateRdYlGn(t) takes a number t in the range [0,1] and returns the corresponding color from the RdYlGn diverging color scheme represented as an RGB string.
interpolateSpectral continuous diverging color scheme
interpolateSpectral(t) takes a number t in the range [0,1] and returns the corresponding color from the Spectral diverging color scheme represented as an RGB string.
schemeBrBG discrete diverging color scheme
schemeBrBG[k] is an array representation of the BrBG discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
schemePRGn discrete diverging color scheme
schemePRGn[k] is an array representation of the PRGn discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
schemePiYG discrete diverging color scheme
schemePiYG[k] is an array representation of the PiYG discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
schemePuOr discrete diverging color scheme
schemePuOr[k] is an array representation of the PuOr discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
schemeRdYlBu discrete diverging color scheme
schemeRdYlBu[k] is an array representation of the RdYlBu discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
schemeSpectral discrete diverging color scheme
schemeSpectral[k] is an array representation of the Spectral discrete diverging color scheme where k ranges from 3 to 11. The kth element contains an array of k color strings for that scheme size.
Using diverging schemes with d3.scaleSequential
Diverging color schemes are available as continuous interpolators for use with d3.scaleSequential. Example: const color = d3.scaleSequential(d3.interpolatePiYG);
Using diverging schemes with d3.scaleOrdinal
Diverging color schemes are available as discrete schemes for use with d3.scaleOrdinal. Example: const color = d3.scaleOrdinal(d3.schemePiYG[9]);
Diverging discrete scheme structure
Each discrete diverging scheme is represented as an array of arrays of hexadecimal color strings. The kth element contains the color scheme of size k. For example, d3.schemeBrBG[9] contains an array of nine strings representing nine colors.
Diverging discrete scheme size range
Diverging color schemes support a size k ranging from 3 to 11.
Sequential color schemes: continuous interpolators
Sequential color schemes are available as continuous interpolators, often used with d3.scaleSequential. Each interpolator function takes a single parameter t in the range [0,1] and returns the corresponding color as an RGB string.
Sequential color schemes: discrete arrays
Sequential color schemes are available as discrete schemes, often used with d3.scaleOrdinal. Each discrete scheme is represented as an array of arrays of hexadecimal color strings. The kth element contains the color scheme of size k. For example, d3.schemeBlues[9] contains an array of nine hex color strings. Sequential color schemes support sizes k ranging from 3 to 9.
interpolateBlues(t) signature
interpolateBlues(t) takes a number t in the range [0,1] and returns the corresponding color from the Blues sequential color scheme as an RGB string.
interpolateGreys(t) signature
interpolateGreys(t) takes a number t in the range [0,1] and returns the corresponding color from the Greys sequential color scheme as an RGB string.
interpolateOranges(t) signature
interpolateOranges(t) takes a number t in the range [0,1] and returns the corresponding color from the Oranges sequential color scheme as an RGB string.
interpolatePurples(t) signature
interpolatePurples(t) takes a number t in the range [0,1] and returns the corresponding color from the Purples sequential color scheme as an RGB string.
interpolateReds(t) signature
interpolateReds(t) takes a number t in the range [0,1] and returns the corresponding color from the Reds sequential color scheme as an RGB string.
interpolateTurbo(t) signature
interpolateTurbo(t) takes a number t in the range [0,1] and returns the corresponding color from the turbo color scheme by Anton Mikhailov as an RGB string.
interpolateViridis(t) signature
interpolateViridis(t) takes a number t in the range [0,1] and returns the corresponding color from the viridis perceptually-uniform color scheme designed by van der Walt, Smith and Firing for matplotlib as an RGB string.
interpolateInferno(t) signature
interpolateInferno(t) takes a number t in the range [0,1] and returns the corresponding color from the inferno perceptually-uniform color scheme designed by van der Walt and Smith for matplotlib as an RGB string.